gridster update

app/assets/Archive/javascripts/orbitdesktop.js

@@ -324,7 +324,9 @@ var orbitDesktop = function(dom){
     $(window).resize(function(){
       // var ww = $(window).width();
       // $("img#thmbackground").attr({"width":ww});
-      if( $('.tinycanvas').length > 0 ){ $('.tinycanvas').tinyscrollbar_update('relative'); }
+      // if( $('.tinycanvas').length > 0 ){
+        $('.tinycanvas').tinyscrollbar_update('relative'); 
+      // }
       if($(o.contentHolder).find("div.app_frame").length > 0){
         $(o.contentHolder).find("div.app_frame").each(function(){
           var app_holder_height = $(this).height() - 72;
@@ -444,7 +446,7 @@ var orbitDesktop = function(dom){
     }
     $("div[container=true]")
       .find("div.tinycanvas")
-      .prepend('<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>');
+      .prepend('<div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>');
     var f = o.layout_data.generate_layout_html(h)
     $("div[container=true] div.overview").html(f.markup);
     var settings = {main : ".tinycanvas"};
@@ -471,6 +473,7 @@ var orbitDesktop = function(dom){
     o.simple_drop_down();
     o.autocomplete();
     o.use_select2();
+    o.check_simple_layout();
   }
   this.paging = true;
   this.pagination = function(link,variable,page_no){
@@ -652,6 +655,10 @@ var orbitDesktop = function(dom){
     target = (!target) ? 'desktop' : target;
     var bindHandlers = function(){ // this function will bind all the handlers in the desktop
         var dragged = null,draggable,lastpos = [];
+        /* Hotfix - Part 1 */
+        var items = $(".gridster ul li");
+        items.detach();
+
         o.gridvar = $(".grid ul").find("> li ")
         .mousedown(function(e){
           !draggable;
@@ -663,6 +670,8 @@ var orbitDesktop = function(dom){
           })
         .end()
         .gridster({
+          max_rows: 4,
+          shift_larger_widgets_down: false,
           widget_margins: [6, 6],
           widget_base_dimensions: [120, 120],
           serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, id: $w.data("id") } },
@@ -671,21 +680,33 @@ var orbitDesktop = function(dom){
               dragged.addClass("noClick");
             },
             stop: function(event, ui){
-              for (var i = 1; i <= 30; i++) {
+              // for (var i = 1; i <= 30; i++) {
-                // var celement = $(".grid ul .widget[data-col="+i+"]:last");
+              //   // var celement = $(".grid ul .widget[data-col="+i+"]:last");
-                $(".grid ul .widget[data-col="+i+"]").each(function(){
+              //   $(".grid ul .widget[data-col="+i+"]").each(function(){
-                  var pos = $(this).position();
+              //     var pos = $(this).position();
-                  if(pos && (pos.top + $(this).height() + 6) > 550){
+              //     if(pos && (pos.top + $(this).height() + 6) > 550){
-                    revertbacktiles();                       
+              //       revertbacktiles();                       
-                  }
+              //     }
-                });
+              //   });
-              }
+              // }
+              $('.tinycanvas').tinyscrollbar_update();
               var newpos = o.gridvar.serialize();
               $.post("/desktop/newpositions",{"newpositions":newpos});
             }
           }
         })
         .data('gridster');
+
+        /* Hotfix - Part 2 */
+        $.each(items , function (i, e) {
+            var item = $(this);
+            var columns = parseInt(item.attr("data-sizex"));
+            var rows = parseInt(item.attr("data-sizey"));
+            var col = parseInt(item.attr("data-col"));
+            var row = parseInt(item.attr("data-row"));
+            o.gridvar.add_widget(item, columns, rows, col, row);
+        });
+
         var revertbacktiles = function(){
           lastpos.push({"col":"","row":""});
           $(".grid ul li").each(function(i){
@@ -841,26 +862,37 @@ var orbitDesktop = function(dom){
       var $elements = $("#app_manager .element"),
           $result = $("#app_manager .search_result"),
           $appinfo = $("#app_info"),
-          $apptitle = $("#app_info .app_info_name"),
+          $applist = $("#app_list"),
-          $appicon = $("#app_info .app_info_icon")
+          $apptitle = $appinfo.find(".app_info_name"),
-          $appinfolist = $("#app_info .app_info_list");
+          $appicon = $appinfo.find(".app_info_icon"),
+          $appinfolist = $appinfo.find(".app_info_list"),
+          $canvas = $result.parents('.overview'),
+          current_width = $canvas.css('width');
 
       $("#app_manager #searchbox")
         .focus(function(){
           $(this).val("");
         })
         .keyup(function(e){
-          if($(this).val()){    
+          var query = $(this).val();
-            $result.empty();
+          if(query){
-            $elements.hide();
+            $appinfo.hide().attr('style','');
+            $result.empty().show();
+            $applist.hide();
+
+            // searchArray = $elements.filter(":containsi("+$(this).val()+")").clone(1,1);
+            // searchArray = $('#app_list').find('[data-title*="'+query+'"]').clone(1,1);
+            searchArray = $elements.filter(function(){
+              var matcher = new RegExp(query, "i");
+              return matcher.test( $(this).attr('data-title') );
+            }).clone(1,1);
             
-            searchArray = $elements.filter(":containsi("+$(this).val()+")");
             if(searchArray.length > 0){
               // searchArray.each(function(){
               //   $(this).hide("fold","fast");
               // })
               // $("#app_manager #seperator").show();
-              var i = 0;
+              var i = 0, c = 1; // c for numbers of columns
               var $column;
               searchArray.each(function(){
                 i++;
@@ -872,23 +904,50 @@ var orbitDesktop = function(dom){
                 if(i == 4){
                   $result.append($column);
                   i = 0;
+                  c++;
                 }
-              })
+              });
               if(i != 0){
                 $result.append($column);
+                c*=132;
+                searchArray
+                  .eq(0)
+                  .parents('.overview')
+                  .animate({
+                    'width': c
+                  },0, function(){
+                    $(this)
+                      .parents('.tinycanvas')
+                      .tinyscrollbar_update();
+                  });
               }
-              elementSetting();
             } else {
-              $result.text("No Result Found.");
+              var $no_result = $('<div class="w2 h1 thmtxt thmc2 vp hp message"><span class="tile"></span>No result for <b></b></div>');
+              $no_result
+                .find('b')
+                .text('"'+$(this).val()+'"')
+                .end()
+                .show()
+                .appendTo($result);
+              $canvas.animate({
+                'width':252
+              }, 0, function(){
+                $(this)
+                  .parents('.tinycanvas')
+                  .tinyscrollbar_update();
+              });
             }
-
+          } else if( query == "" ) {
-          } else {
+            info_close();
             $result.empty();
-            $elements.show();
+            $applist.show();
+            $canvas.css('width',current_width);
           }
         })
         .blur(function(){
-          if($(this).val()=="") $(this).val("Search");
+          if($(this).val()==""){
+            $(this).val("Search");
+          }
         });
 
       //for Alphabet sorting
@@ -921,15 +980,21 @@ var orbitDesktop = function(dom){
       });
 
       var elementSetting = function(){// for element setting load
-        $(".element").click(function(){
+        $elements.click(function(){
-          $e = $(this);
+          var $e = $(this);
           $apptitle.text($e.data("title"));
           $appicon.attr("src",$e.find("img").attr("src"));
-          $appinfolist.find("li:eq(2) div").text($e.data("version"));
+          $appinfolist.find("[info=app_version]").text($e.data("version"));
           var dt = new Date($e.data("update"));
-          $appinfolist.find("li:eq(3) div").text(dt.toUTCString());
+          $appinfolist.find("[info=app_last_update]").text(dt.toUTCString());
-          $appinfolist.find("li:eq(4) div").text($e.data("author"));
+          $appinfolist.find("[info=app_author]").text($e.data("author"));
-          
+          $appinfo
+            .find(".app_info_header")
+            .attr('style','')
+            .css({
+              "background-color": $e.data("background"),
+              "color": $e.data("text-color")
+            });
           var sections = elementSettingsData[$e.data("id")].sections;
 
           var sectionids = new Array();
@@ -937,7 +1002,7 @@ var orbitDesktop = function(dom){
             sectionids.push(sec.id);
           })
 
-          $appinfolist.find("[info=section_activation]").empty();
+          $appinfolist.find("[info=app_section_activation]").empty();
           $.each(o.sectionList,function(i,sec){
 
             var present = $.inArray(sec._id,sectionids);
@@ -946,9 +1011,9 @@ var orbitDesktop = function(dom){
             }else{
               $sectionswitch = $('<div class="s_grid_row"><label class="s_grid s_grid_3">'+ sec.name +'</label><div class="s_grid s_grid_6 s_switch"><div class="s_switch_status" status-on="On" status-off="Off">On</div><label class="s_switch_switcher thmc2"><input type="checkbox" checked="checked" data-widget="'+ $e.data("id") +'" data-section="'+ sec._id +'" data-type="'+$e.data("type")+'"><span class="s_switch_toggle"></span></label></div></div>');
             }
-             $appinfolist.find("[info=section_activation]").append($sectionswitch);
+             $appinfolist.find("[info=app_section_activation]").append($sectionswitch);
-          })            
+          });
-          $appinfo.show();
+          info_open();
           o.simple_switch(function(dom){
             var options = {
               "status" : dom.is(":checked"),
@@ -974,31 +1039,83 @@ var orbitDesktop = function(dom){
                   }
                 }
               }
-            })
             });
-        })
+          });
+          return false;
+        });
       }
 
       $appinfo.find("a.panel_close").click(function(){
-        $appinfo.hide();
+        info_close();
         return false;
+      });
+
+      var info_open = function(){
+        if($appinfo.is(":hidden")){
+          $('.overview').stop().animate({'width': '+=480'},0 , function(){
+            $('.tinycanvas').tinyscrollbar_update();
+          });
+          $appinfo
+            .css({
+              'display': 'block',
+              'margin-left': -480
             })
+            .delay(300)
+            .animate({
+              'margin-left': 0
+            }, 500, 'easeInOutQuint');
+        } else {
+          $('.tinycanvas').tinyscrollbar_update();
+        }
+      }
+
+      var info_close = function(){
+        if( $appinfo.is(":visible") ){
+          $appinfo
+            .stop()
+            .animate({
+              'margin-left': -480
+            },500 , 'easeInOutQuint', function(){
+              $('.overview').animate({'width': '-=480'}, 0, function(){
+                $('.tinycanvas').tinyscrollbar_update();
+              });
+              $(this).attr("style","");
+            });
+        } else {
+          $('.tinycanvas').tinyscrollbar_update();
+        }
+      }
+      $(window).on('keydown', function(){
+        if($('#searchbox').val() == 'Search'){
+          $('#searchbox').focus();
+        }
+      });
       elementSetting();
       o.appname_substr('#group_wrapper .element');
-      
+      o.check_simple_layout();
     }
     var elementSettingsData = {};
     var loadApps = function(){ //this load apps for sorting and searching
-      $('#app_list').empty();
+      $('#app_info').attr('style','');
+      $('.search_result').hide().text("");
+      $('#app_list').empty().show();
       $.getJSON("/desktop/getapplistforManager",{desktopid:o.desktopId},function(apps){
-        var count = 0, colindex = 0;
+        var count = 0,
-        $('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
+            colindex = 0,
+            apps_sum = apps.length,
+            col_sum;
+
+        col_sum = (apps_sum - (apps_sum % 4)) / 4 + 1;
+        
+        $('#app_list')
+          .css('width',col_sum * 132)
+          .append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
+
         $.each(apps,function(i,app){
           var $app;
           count++;
           elementSettingsData[app.id] = {"sections" : app.sections};
-            o.t[app.id] = {"sections" : app.sections};
+          $app = $('<div class="element w1 h1 thmc2" data-type="'+app.data_category+'" data-title="'+app.title+'" data-author="'+app.author+'" data-version="'+app.version+'" data-update="'+app.last_update+'" data-id="'+app.id+'" data-text-color="'+app.text_color+'" data-background="'+app.background+'" ><span class="tile thmc2"></span><a href="'+app.id+'" class="appicon"><img src="'+app.icon+'" alt="" onclick="return false;"></a><h1 class="appname thmtxt">'+app.title+'</h1></div>');
-            $app = $('<div class="element w1 h1 thmc2" data-type="'+app.data_category+'" data-title="'+app.title+'" data-author="'+app.author+'" data-version="'+app.version+'" data-update="'+app.last_update+'" data-id="'+app.id+'" ><span class="tile thmc2"></span><a href="'+app.id+'" class="appicon"><img src="'+app.icon+'" alt="" onclick="return false;"></a><h1 class="appname thmtxt">'+app.title+'</h1></div>');
           if( count > 4 ){
             count = 1, colindex+=1;
             $('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
@@ -1627,6 +1744,25 @@ var orbitDesktop = function(dom){
 
     o.tinyscrollbar = target.main.tinyscrollbar( settings );
   };
+  this.check_simple_layout = function(){
+    // use for various width of columns inside canvas(.overview)
+    // only count width for visible element which has "s_column" class
+    // then set width to canvas
+    // ** not sure to update canvas here ( $.tinyscrollbar_update() )
+    var sw = 0,
+        $simple_layout = $('#content .overview[content-layout=simple]');
+    if($simple_layout.find(".s_column").length > 0){
+      $simple_layout.each(function(){
+        $(this).find(".s_column").filter(":visible").each(function(){
+          sw += $(this).outerWidth();
+        });
+        $simple_layout.css('width',sw);
+      });
+    }
+    // if($simple_layout.find(".s_column").length > 0){
+    //   $simple_layout.css('width',sw);
+    // }
+  };
   this.simple_drop_down = function(){
     // simple dropdown menu
     var $sdm = $('.sdm');
@@ -1686,8 +1822,9 @@ var orbitDesktop = function(dom){
             $status.text(status_off);
           break;
         }
-        if(typeof func == "function")
+        if(typeof func == "function"){
           func.call(this,$(this));
+        }
       });
     });
   };

app/assets/Archive/stylesheets/desktop/desktop-component.css

@@ -424,7 +424,7 @@
       width: 6px; }
   .tinycanvas .scrollbar {
     position: absolute;
-    z-index: 9;
+    z-index: 11;
     visibility: hidden;
     opacity: 0;
     -webkit-transition: opacity 0.3s ease;
@@ -435,7 +435,7 @@
       visibility: visible; }
     .tinycanvas .scrollbar.sb_h {
       left: 0;
-      bottom: -6px;
+      bottom: 0;
       height: 6px; }
     .tinycanvas .scrollbar.sb_v {
       right: 0;

app/assets/Archive/stylesheets/desktop/desktop-component.scss

@@ -424,7 +424,7 @@
 	}
 	.scrollbar {
 		position: absolute;
-		z-index: 9;
+		z-index: 11;
 		visibility: hidden;
 		opacity: 0;
 		@include transition-type(opacity, 0.3);
@@ -435,7 +435,7 @@
 		}
 		&.sb_h {
 			left: 0;
-			bottom: -6px;
+			bottom: 0;
 			height: 6px;
 		}
 		&.sb_v {

app/models/desktop/desktop_app.rb

@@ -6,8 +6,8 @@ class DesktopApp
   	field :author
   	field :shape
   	field :version, :type => String
-    field :text_color, :type => String, default: "#fff"
+    field :text_color, :type => String, default: ""
-    field :bg_color, :type => String, default: "#fff"
+    field :bg_color, :type => String, default: ""
     field :icon, default: "icon.png"
     field :url