upgraded widget called ord_des_images

resources/library/sankoreInteractivities/ordonner_des_images.wgt/css/basic.css

@@ -3,6 +3,7 @@ html, body{
     height: 100%;
     margin: 0;
     padding: 0;
+    background-color: white;
 }
 
 .toggle_mode{
@@ -122,29 +123,35 @@ html, body{
     background-color: white;
 }
 
-.close_img{
+.close_img, .clear_img, .numb_img {
     width: 30px;
     height: 30px;    
-    background-image: url(../img/close_img.png);
     background-repeat: no-repeat;
     position: absolute;    
-    top: -15px;
     right: -15px;
     cursor: pointer;
 }
 
+.close_img{
+    background-image: url(../img/close_img.png);
+    top: -15px;
+}
+
 .clear_img{
-    width: 30px;
-    height: 30px;
     background-image: url(../img/clear_img.png);
-    background-repeat: no-repeat;
-    position: absolute;
     top: 15px;
-    right: -15px;
-    cursor: pointer;
 }
 
-.fill_img{
+.numb_img{
+    background-image: url(../img/numb_img.png); 
+    left: -15px;
+    top: -15px;
+    color: white;
+    font-weight: bold;
+    font-size: 130%;
+}
+
+/*.fill_img{
     width: 30px;
     height: 30px;
     background-image: url(../img/fill_hor.png);
@@ -153,7 +160,9 @@ html, body{
     top: -15px;
     right: 17px; 
     cursor: pointer;
-}
+}*/
+
+
 
 .add_block{
     margin: 20px 0 0 20px;

resources/library/sankoreInteractivities/ordonner_des_images.wgt/index.html

@@ -15,10 +15,26 @@
                     lang = sankore.locale().substr(0,2);    
                 } else 
                     lang = "en";
-                $("<script type='text/javascript' src='js/translation/" + lang + ".js'>").appendTo("head");
-                if((typeof sankoreLang) == "undefined")
-                    $("<script type='text/javascript' src='js/translation/en.js'>").appendTo("head");
+                if(lang == "en")
                     start();
+                else{
+                    returnStatus(lang);
+                }
+                
+                function returnStatus(lang){
+                    $.ajax({
+                        type: 'POST',
+                        url:'locales/' + lang + '/index.html',
+                        statusCode: {
+                            404: function() {
+                                start();
+                            },
+                            200: function(){
+                                window.location.href = 'locales/' + lang + '/index.html';
+                            }
+                        }
+                    });                    
+                }
                 //here you can put your code
                 if(window.sankore)
                     sankore.enableDropOnWidget();
@@ -38,13 +54,13 @@
             <div style="width: 50%; height: 100%; float: left;">
                 <div id="display" style="float: right; width: 90px; cursor: pointer;" class="selected">
                     <div id="display_img" style="float: right;" class="green_point"></div>
-                    <div id="display_text" style="float: right;">Display</div>                    
+                    <div id="display_text" style="float: right;"></div>                    
                 </div>
             </div>
             <div style="width: 50%; height: 100%; float: right;">
                 <div id="edit" style="float: left; width: 90px; cursor: pointer;">                    
                     <div id="edit_img" style="float: left;" class="red_point"></div>
-                    <div id="edit_text" style="float: left;">Edit</div>
+                    <div id="edit_text" style="float: left;"></div>
                 </div>
             </div>
         </div>

resources/library/sankoreInteractivities/ordonner_des_images.wgt/js/script.js

+var sankoreLang = {display: "Display", edit: "Edit", short_desc: "Place the pictures in ascending order.", add: "Add new block"};
+
 //main function
 function start(){
     
@@ -40,9 +42,10 @@ function start(){
                     container.find(".add_img").remove();
                     container.find(".close_cont").remove();
                     container.find(".img_block").each(function(){
-                        if($(this).html().match(/<img/)){
+                        if($(this).find("img").attr("src") != "img/drop_img.png"){
                             $(this).find(".close_img").remove();
                             $(this).find(".clear_img").remove();
+                            $(this).find(".numb_img").remove();
                             $(this).removeAttr("ondragenter")
                             .removeAttr("ondragleave")
                             .removeAttr("ondragover")
@@ -78,7 +81,7 @@ function start(){
     
                     $("<div class='close_cont'>").appendTo(container);
                     container.find(".text_cont").attr("contenteditable","true");
-                    container.find(".imgs_cont").sortable("destroy");
+                    //container.find(".imgs_cont").sortable("destroy");
                     container.find(".imgs_cont").css("background-color", "white");
                     
                     var add_img = $("<div class='add_img'>");
@@ -87,10 +90,12 @@ function start(){
                         .attr("ondragleave", "$(this).css(\"background-color\",\"white\"); return false;")
                         .attr("ondragover", "$(this).css(\"background-color\",\"#ccc\"); return false;")
                         .attr("ondrop", "$(this).css(\"background-color\",\"white\"); return onDropTarget(this,event);")
-                        .css("float","left");
+                        //.css("float","left");
                         $("<div class='close_img'>").appendTo($(this));
                         $("<div class='clear_img'>").appendTo($(this));
+                        $("<div class='numb_img'>" + $(this).find("input").val() + "</div>").appendTo($(this));
                     });
+                    rightOrder(container.find(".imgs_cont"));
                     container.find(".imgs_cont").append(add_img)
                 });
                 
@@ -130,9 +135,7 @@ function start(){
         var tmp_obj = $(this).parent().parent();        
         $(this).parent().remove();
         if(tmp_obj.find(".img_block").size() > 0){
-            tmp_obj.find(".img_block").each(function(){
-                $(this).find("input").val(++i);
-            });
+            refreshImgNumbers(tmp_obj);
         }
         
     });
@@ -154,7 +157,7 @@ function start(){
     //cleaning an image
     $(".clear_img").live("click",function(){
         //$(this).parent().find(".fill_img").remove();
-        $(this).parent().find("img").remove();
+        $(this).parent().find("img").attr("src","img/drop_img.png");
     });
 }
 
@@ -274,6 +277,7 @@ function showExample(){
 //check result
 function checkResult(event)
 {
+    if($("#display").hasClass("selected")){
         var str = "";
         var right_str = $(event.target).find("input").val();
         $(event.target).find(".img_block").each(function(){
@@ -281,6 +285,9 @@ function checkResult(event)
         });
         if(str == right_str)
             $(event.target).css("background-color","#9f9");
+    } else {
+        refreshImgNumbers($(event.target));
+    }
 }
 
 //add new container
@@ -300,11 +307,13 @@ function addContainer(){
 
 //add new img block
 function addImgBlock(dest){
-    var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"white\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"white\"); return onDropTarget(this,event);' style='text-align: center; float: left;'></div>").insertBefore(dest);
+    var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"white\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"white\"); return onDropTarget(this,event);' style='text-align: center;'></div>").insertBefore(dest);
     var tmp_counter = dest.parent().find(".img_block").size();
     $("<div class='close_img'>").appendTo(img_block);
     $("<div class='clear_img'>").appendTo(img_block);
+    $("<div class='numb_img'>" + tmp_counter + "</div>").appendTo(img_block);
     $("<input type='hidden' value='" + tmp_counter + "'/>").appendTo(img_block);
+    $("<img src='img/drop_img.png' height='120'/>").appendTo(img_block);
 }
 
 function refreshBlockNumbers(){
@@ -329,6 +338,35 @@ function shuffle( arr )
     return arr;
 }
 
+//regulation the images in right order
+function rightOrder(source){
+    var tmp_arr = [];
+    var tmp_var;
+    source.find(".img_block").each(function(){
+        tmp_arr.push($(this));
+        $(this).remove();
+    });
+    for(var i = 0; i < tmp_arr.length; i++)
+        for(var j = 0; j < tmp_arr.length - 1; j++){
+            if(tmp_arr[j].find("input").val() > tmp_arr[j+1].find("input").val()){
+                tmp_var = tmp_arr[j];
+                tmp_arr[j] = tmp_arr[j+1];
+                tmp_arr[j+1] = tmp_var;
+            }
+        }
+    for(i in tmp_arr)
+        source.append(tmp_arr[i]);
+}
+
+//refresh the numbers of the images
+function refreshImgNumbers(source){
+    var tmp = 1;
+    source.find(".img_block").each(function(){
+        $(this).find("input").val(tmp);
+        $(this).find(".numb_img").text(tmp);
+        tmp++;
+    });
+}
 
 function stringToXML(text){
     if (window.ActiveXObject){

resources/library/sankoreInteractivities/ordonner_des_images.wgt/js/translation/en.js

-var sankoreLang = {
-    short_desc: "Place the pictures in ascending order.",
-    display:"Display",
-    edit:"Edit",
-    add:"Add new block"
-};
-
-

resources/library/sankoreInteractivities/ordonner_des_images.wgt/js/translation/fr.js

-var sankoreLang = {
-    short_desc: "Placez les photos dans l'ordre croissant.",
-    display:"D'affichage",
-    edit:"Modifier",
-    add:"Ajouter nouveau bloc"
-};
-
-

resources/library/sankoreInteractivities/ordonner_des_images.wgt/js/translation/ru.js

-var sankoreLang = {
-    short_desc: "Расположите картинки в порядке возрастания цифр.",
-    display:"Показать",
-    edit:"Изменить",
-    add:"Добавить новый блок"
-};
-
-

resources/library/sankoreInteractivities/ordonner_des_images.wgt/locales/fr/index.html

+<!DOCTYPE html>
+<html>
+    <head>
+        <title>D'n'd</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <link rel="stylesheet" type="text/css" href="../../css/basic.css"/>
+        <script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script>
+        <script type="text/javascript" src="../../js/jquery-ui-1.8.9.custom.min.js"></script>
+        <script type="text/javascript" src="js/script.js"></script>
+        <script type="text/javascript">
+            $(document).ready(function(){                
+                start();
+                //here you can put your code
+                if(window.sankore)
+                    sankore.enableDropOnWidget();
+            });
+        </script>
+    </head>
+    <body>
+        <!--<div class="dnd_container">
+            <div class="dnd_1" id="dnd_1" ondragenter="return false;" ondragleave="$(this).css('border-color','#ccc'); return false;" ondragover="$(this).css('border-color','orange'); return false;" ondrop="$(this).css('border-color','#ccc'); return onDropTarget1(event);">Drop the item here ...</div>
+            <div class="dnd_2" id="dnd_2" ondragenter="return false;" ondragleave="$(this).css('border-color','#ccc'); return false;" ondragover="$(this).css('border-color','orange'); return false;" ondrop="$(this).css('border-color','#ccc'); return onDropTarget2(event);">Drop the item here ...</div>
+        </div>
+        <div class='black_overlay' id='fade'></div>
+        <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">открыть</a></p>
+    <div id="light" class="white_content">
+        Содержание<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">закрыть</a></div>-->
+        <div class="toggle_mode">
+            <div style="width: 50%; height: 100%; float: left;">
+                <div id="display" style="float: right; width: 130px; cursor: pointer;" class="selected">
+                    <div id="display_img" style="float: right;" class="green_point"></div>
+                    <div id="display_text" style="float: right;"></div>                    
+                </div>
+            </div>
+            <div style="width: 50%; height: 100%; float: right;">
+                <div id="edit" style="float: left; width: 130px; cursor: pointer;">                    
+                    <div id="edit_img" style="float: left;" class="red_point"></div>
+                    <div id="edit_text" style="float: left;"></div>
+                </div>
+            </div>
+        </div>
+        <div style="width: 100%; height: 25px;"></div>
+
+    </body>
+</html>

resources/library/sankoreInteractivities/ordonner_des_images.wgt/locales/ru/index.html

+<!DOCTYPE html>
+<html>
+    <head>
+        <title>D'n'd</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <link rel="stylesheet" type="text/css" href="../../css/basic.css"/>
+        <script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script>
+        <script type="text/javascript" src="../../js/jquery-ui-1.8.9.custom.min.js"></script>
+        <script type="text/javascript" src="js/script.js"></script>
+        <script type="text/javascript">
+            $(document).ready(function(){                
+                start();
+                //here you can put your code
+                if(window.sankore)
+                    sankore.enableDropOnWidget();
+            });
+        </script>
+    </head>
+    <body>
+        <!--<div class="dnd_container">
+            <div class="dnd_1" id="dnd_1" ondragenter="return false;" ondragleave="$(this).css('border-color','#ccc'); return false;" ondragover="$(this).css('border-color','orange'); return false;" ondrop="$(this).css('border-color','#ccc'); return onDropTarget1(event);">Drop the item here ...</div>
+            <div class="dnd_2" id="dnd_2" ondragenter="return false;" ondragleave="$(this).css('border-color','#ccc'); return false;" ondragover="$(this).css('border-color','orange'); return false;" ondrop="$(this).css('border-color','#ccc'); return onDropTarget2(event);">Drop the item here ...</div>
+        </div>
+        <div class='black_overlay' id='fade'></div>
+        <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">открыть</a></p>
+    <div id="light" class="white_content">
+        Содержание<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">закрыть</a></div>-->
+        <div class="toggle_mode">
+            <div style="width: 50%; height: 100%; float: left;">
+                <div id="display" style="float: right; width: 120px; cursor: pointer;" class="selected">
+                    <div id="display_img" style="float: right;" class="green_point"></div>
+                    <div id="display_text" style="float: right;"></div>                    
+                </div>
+            </div>
+            <div style="width: 50%; height: 100%; float: right;">
+                <div id="edit" style="float: left; width: 120px; cursor: pointer;">                    
+                    <div id="edit_img" style="float: left;" class="red_point"></div>
+                    <div id="edit_text" style="float: left;"></div>
+                </div>
+            </div>
+        </div>
+        <div style="width: 100%; height: 25px;"></div>
+
+    </body>
+</html>