updated iCell, TextEditor and ColorPicker

13 years ago · 0ba8dd86fa
parent a04e8246c7
commit 0ba8dd86fa
17 changed files with 777 additions and 663 deletions
--- a/resources/library/interactive/ColorPicker.wgt/css/colorpicker.css
+++ b/resources/library/interactive/ColorPicker.wgt/css/colorpicker.css
@ -32,7 +32,7 @@
    width: 11px;
    height: 11px;
    overflow: hidden;
-	background: url(../images/colorpicker_select.gif);
+    background: url(../images/colorpicker_select.png);
    margin: -5px 0 0 -5px;
 }
 .colorpicker_hue {
@ -48,7 +48,7 @@
    width: 35px;
    height: 9px;
    overflow: hidden;
-	background: url(../images/colorpicker_indic.gif) left top;
+    background: url(../images/colorpicker_indic.png) left top;
    margin: -4px 0 0 0;
    left: 0px;
 }
@ -147,6 +147,25 @@
    top: 142px;
    overflow: hidden;
 }
 .tools_change {
    position: absolute;
    width: 22px;
    height: 22px;
    background: url(../images/tools.jpg) top;
    left: 290px;
    top: 142px;
    overflow: hidden;
 }
 .tools_change.tools_compass{
    background-position: bottom;
 }
 .tools_change.tools_border{
    border: 1px solid #999090;
 }
 .colorpicker_focus {
    background-position: center;
 }
--- a/resources/library/interactive/ColorPicker.wgt/css/layout.css
+++ b/resources/library/interactive/ColorPicker.wgt/css/layout.css
@ -180,7 +180,7 @@ h1 {
 	left: 0;
 }
 #colorpickerHolder2 .colorpicker_hue div {
-	background-image: url(../images/custom_indic.gif);
+	background-image: url(../images/custom_indic.png);
 }
 #colorpickerHolder2 .colorpicker_hex {
 	background-image: url(../images/custom_hex.png);
--- a/resources/library/interactive/ColorPicker.wgt/images/blank.gif
+++ b/resources/library/interactive/ColorPicker.wgt/images/blank.gif
--- a/resources/library/interactive/ColorPicker.wgt/images/blank.png
+++ b/resources/library/interactive/ColorPicker.wgt/images/blank.png
--- a/resources/library/interactive/ColorPicker.wgt/images/colorpicker_indic.gif
+++ b/resources/library/interactive/ColorPicker.wgt/images/colorpicker_indic.gif
--- a/resources/library/interactive/ColorPicker.wgt/images/colorpicker_indic.png
+++ b/resources/library/interactive/ColorPicker.wgt/images/colorpicker_indic.png
--- a/resources/library/interactive/ColorPicker.wgt/images/colorpicker_select.gif
+++ b/resources/library/interactive/ColorPicker.wgt/images/colorpicker_select.gif
--- a/resources/library/interactive/ColorPicker.wgt/images/colorpicker_select.png
+++ b/resources/library/interactive/ColorPicker.wgt/images/colorpicker_select.png
--- a/resources/library/interactive/ColorPicker.wgt/images/custom_indic.gif
+++ b/resources/library/interactive/ColorPicker.wgt/images/custom_indic.gif
--- a/resources/library/interactive/ColorPicker.wgt/images/custom_indic.png
+++ b/resources/library/interactive/ColorPicker.wgt/images/custom_indic.png
--- a/resources/library/interactive/ColorPicker.wgt/images/tools.jpg
+++ b/resources/library/interactive/ColorPicker.wgt/images/tools.jpg
--- a/resources/library/interactive/ColorPicker.wgt/index.html
+++ b/resources/library/interactive/ColorPicker.wgt/index.html
@ -11,6 +11,6 @@
        <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
    </head>
    <body>
-    <p id="colorpickerHolder">
+        <p id="colorpickerHolder"></p>
    </body>
 </html>
--- a/resources/library/interactive/ColorPicker.wgt/js/colorpicker.js
+++ b/resources/library/interactive/ColorPicker.wgt/js/colorpicker.js
@ -10,10 +10,11 @@
    var ColorPicker = function () {
        var
        ids = {},
        penFlag = true,
        inAction,
        charMin = 65,
        visible,
-			tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
+        tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="tools_change"></div><div class="colorpicker_submit"></div></div>',
        defaults = {
            eventName: 'click',
            onShow: function () {},
@ -43,7 +44,11 @@
            .eq(0).val(HSBToHex(hsb)).end();
        },
        setSelector = function (hsb, cal) {
-				$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
+            $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({
                h: hsb.h, 
                s: 100, 
                b: 100
            }));
            $(cal).data('colorpicker').selectorIndic.css({
                left: parseInt(150 * hsb.s/100, 10),
                top: parseInt(150 * (100-hsb.b)/100, 10)
@ -57,8 +62,17 @@
        },
        setNewColor = function (hsb, cal) {
            $(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
            if(penFlag){
                $("div.tools_change").removeClass("tools_compass");
                window.sankore.setTool('pen');              
                window.sankore.setPenColor('#' + HSBToHex(hsb));
                sankore.returnStatus("PEN installed", penFlag);
            } else {
                $("div.tools_change").addClass("tools_compass");
                window.sankore.setTool('compass');              
                window.sankore.setPenColor('#' + HSBToHex(hsb));
                sankore.returnStatus("Compass installed", penFlag);
            }
        },
        keyDown = function (ev) {
            var pressedKey = ev.charCode || ev.keyCode || -1;
@ -203,6 +217,22 @@
            setCurrentColor(col, cal.get(0));
            cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);            
        },        
        mouseOverBorder = function(ev) {
            $(this).addClass("tools_border");
        },        
        mouseOutBorder = function(ev) {
            $(this).removeClass("tools_border");
        },        
        clickToolsChange = function (ev) {
            var cal = $(this).parent();
            var col = cal.data('colorpicker').color;
            cal.data('colorpicker').origColor = col;
            setCurrentColor(col, cal.get(0));
            cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
            penFlag = (penFlag)?false:true;
            setNewColor(col, cal.get(0));
            sankore.returnStatus("startEditing()", penFlag);
        },
        show = function (ev) {
            var cal = $('#' + $(this).data('colorpickerId'));
            cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
@ -216,11 +246,16 @@
            if (left + 356 > viewPort.l + viewPort.w) {
                left -= 356;
            }
-				cal.css({left: left + 'px', top: top + 'px'});
+            cal.css({
                left: left + 'px', 
                top: top + 'px'
                });
            if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
                cal.show();
            }
-				$(document).bind('mousedown', {cal: cal}, hide);
+            $(document).bind('mousedown', {
                cal: cal
            }, hide);
            return false;
        },
        hide = function (ev) {
@ -286,7 +321,11 @@
        }, 
        HexToRGB = function (hex) {
            var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
-				return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
+            return {
                r: hex >> 16, 
                g: (hex & 0x00FF00) >> 8, 
                b: (hex & 0x0000FF)
                };
        },
        HexToHSB = function (hex) {
            return RGBToHSB(HexToRGB(hex));
@ -336,15 +375,47 @@
                var t2 = (255-s)*v/255;
                var t3 = (t1-t2)*(h%60)/60;
                if(h==360) h = 0;
-					if(h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
+                if(h<60) {
-					else if(h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
+                    rgb.r=t1;
-					else if(h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
+                    rgb.b=t2;
-					else if(h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
+                    rgb.g=t2+t3
-					else if(h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
+                    }
-					else if(h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
+                else if(h<120) {
-					else {rgb.r=0; rgb.g=0;	rgb.b=0}
+                    rgb.g=t1;
                    rgb.b=t2;
                    rgb.r=t1-t3
                    }
                else if(h<180) {
                    rgb.g=t1;
                    rgb.r=t2;
                    rgb.b=t2+t3
                    }
                else if(h<240) {
                    rgb.b=t1;
                    rgb.r=t2;
                    rgb.g=t1-t3
                    }
-				return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
+                else if(h<300) {
                    rgb.b=t1;
                    rgb.g=t2;
                    rgb.r=t2+t3
                    }
                else if(h<360) {
                    rgb.r=t1;
                    rgb.g=t2;
                    rgb.b=t1-t3
                    }
                else {
                    rgb.r=0;
                    rgb.g=0;
                    rgb.b=0
                    }
            }
            return {
                r:Math.round(rgb.r), 
                g:Math.round(rgb.g), 
                b:Math.round(rgb.b)
                };
        },
        RGBToHex = function (rgb) {
            var hex = [
@ -418,6 +489,10 @@
                        .bind('mouseenter', enterSubmit)
                        .bind('mouseleave', leaveSubmit)
                        .bind('click', clickSubmit);
                        cal.find('div.tools_change')
                        .bind('mouseover', mouseOverBorder)
                        .bind('mouseout', mouseOutBorder)
                        .bind('click', clickToolsChange);
                        fillRGBFields(options.color, cal.get(0));
                        fillHSBFields(options.color, cal.get(0));
                        fillHexFields(options.color, cal.get(0));
--- a/resources/library/interactive/TextEditor.wgt/config.xml
+++ b/resources/library/interactive/TextEditor.wgt/config.xml
@ -4,8 +4,8 @@
 		xmlns:ub="http://uniboard.mnemis.com/widgets"
        id="http://www.example.net/widgets/helloworld" 
        version="1.0"
-        width="200"
+        width="540"
-        height="700" 
+        height="320" 
 		ub:resizable="true">
 		<name>Rich Note</name>
--- a/resources/library/interactive/TextEditor.wgt/index.html
+++ b/resources/library/interactive/TextEditor.wgt/index.html
@ -6,6 +6,7 @@
        <!-- TinyMCE -->
        <script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
        <script type="text/javascript">
            var flag = false;
            tinyMCE.init({
                // General options
                mode : "textareas",
@ -13,9 +14,9 @@
                plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
                // Theme options
-		theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
+                theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
-		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,code,insertdate,inserttime,preview,|,forecolor,backcolor",
+                theme_advanced_buttons2 : "undo,redo,|,cut,copy,paste,pasteword,|,bullist,numlist,|,outdent,indent,|,code,insertdate,inserttime,preview,|,forecolor,backcolor",
-		theme_advanced_buttons3 : "hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,advhr,|,ltr,rtl,|,fullscreen,|,visualchars,nonbreaking",
+                theme_advanced_buttons3 : "hr,removeformat,|,sub,sup,|,charmap,emotions,iespell,|,ltr,rtl",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "bottom",
@ -47,19 +48,38 @@
                    staffid : "991234"
                }
            });
            function setSankoreData() {
                if(window.sankore) {				
                    if(flag)
                        window.sankore.setPreference("textForEditing", window.frames[0].document.getElementById("tinymce").innerHTML);
                }
            }
            function setTextEditorData() {
                if(window.sankore) {
                    if(!window.frames[0])
                        setTimeout(function(){setTextEditorData()}, 300);
                    else {
                        flag = true;
                        window.frames[0].document.getElementById("tinymce").innerHTML = window.sankore.preference("textForEditing","<p>Enter your text here ...</p>");
                    }
                }
            }
            /*function setSpanHandler(){
            alert(document.body.innerHTML);
            alert(document.getElementById("elm1_toolbargroup").innerHTML);
                document.getElementById("elm1_toolbargroup").onmouseout = function(){
                    setSankoreData();
                };
            }*/
        </script>
        <!-- /TinyMCE -->
    </head>
-<body>
+    <body onmouseout="setSankoreData()" onload="setTextEditorData()">
        <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
 			&lt;p&gt;
 				This is some example text that you can edit inside the &lt;strong&gt;TinyMCE editor&lt;/strong&gt;.
 			&lt;/p&gt;
 			&lt;p&gt;
 			Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros.
 			&lt;/p&gt;
        </textarea>
    </body>
 </html>
--- a/resources/library/interactive/TextEditor.wgt/jscripts/tiny_mce/themes/advanced/langs/en.js
+++ b/resources/library/interactive/TextEditor.wgt/jscripts/tiny_mce/themes/advanced/langs/en.js
@ -51,7 +51,7 @@ cut_desc:"Cut",
 copy_desc:"Copy",
 paste_desc:"Paste",
 image_props_desc:"Image properties",
-newdocument_desc:"New document",
+newdocument_desc:"Clean",
 help_desc:"Help",
 blockquote_desc:"Blockquote",
 clipboard_msg:"Copy/Cut/Paste is not available in Mozilla and Firefox.\r\nDo you want more information about this issue?",
--- a/resources/library/interactive/iCell.wgt/js/script.js
+++ b/resources/library/interactive/iCell.wgt/js/script.js
@ -102,7 +102,7 @@ function adn() {
        document.getElementById("div_zoom").innerHTML='<img src="images/'+elt_a_zoomer+'_zoom.jpg" alt="" />'
        /*Uniboard 4 ne supportant pas bien les gifs...*/
-        if(window.uniboard){
+        if(window.sankore){
            document.getElementById("img_ADN").src="images/adn.jpg"
        } else {
            document.getElementById("img_ADN").src="images/ADN.gif"