From e12175359448cb1969c1536af576bafac1ab5363 Mon Sep 17 00:00:00 2001 From: liquibyte Date: Wed, 29 Jan 2014 01:45:49 -0500 Subject: [PATCH] Rewrote admin.widgets.js to allow external styling. Added drop functionality to available widgets to accept installed widgets drop to delete. Added two classes to admin.css to style hover colors of available widgets, installed widgets and trashcan. Signed-off-by: liquibyte --- admin/panels/widgets/admin.widgets.js | 156 ++++++++++++++++++ .../themes/leggero/flatmaas-rev/res/admin.css | 23 +++ .../themes/leggero/leggero/res/admin.css | 27 +++ 3 files changed, 206 insertions(+) diff --git a/admin/panels/widgets/admin.widgets.js b/admin/panels/widgets/admin.widgets.js index 2749296..0fcbd46 100644 --- a/admin/panels/widgets/admin.widgets.js +++ b/admin/panels/widgets/admin.widgets.js @@ -3,6 +3,161 @@ * Based on original flatpress' code * Require jQuery and jQuery UI (Core, Draggable, Droppable and Effects Core) * Coded by Piero VDFN +<<<<<<< HEAD + * Re-Coded by liquibyte + * Colors weren't resetting on mouseout and position:absolute didn't work. + * Position:absolute changed to position:fixed. I also changed the + * hardcoded values to a variable that is stored and recalled so that the + * users stylesheet is used for styling. Colors were hardcoded so I fixed + * this to be styled from the users admin.css. Available widgets now + * accepts drag and drop from installed widgets to remove. + * Released under GNU GPL v2 + */ +var FlatPress = { + winstancedrag : function() { + $('.widget-class').draggable({ + 'scroll' : true, + 'helper' : function(event) { + return $(this).clone().appendTo('body').removeClass('widget-class').css({ + 'position': 'fixed', + 'cursor' : 'move', + 'list-style-type' : 'none', + 'margin' : '0', + 'padding' : '0', + 'width' : $(this).width(), + 'height' : $(this).height() + }) + .addClass('widget-available'); + } + }); + $('.widget-instance').draggable({ + 'scroll' : true, + 'helper' : function(event) { + return $(this).clone().appendTo('body').removeClass('widget-instance').css({ + 'position': 'fixed', + 'cursor' : 'move', + 'list-style-type' : 'none', + 'width' : $(this).width(), + 'height' : $(this).height() + }) + .addClass('widget-installed'); + } + }); + }, + wplaceholder : function() { + $('.widget-placeholder').droppable({ + 'accept' : '.widget-class, .widget-instance', + 'activeClass' : 'ui-state-highlight', + 'over' : function(event, ui) { + $(this).effect("highlight", { 'color' : $('.widget-installed, .widget-available').css('background-color') }, 1000); + }, + 'drop' : function(event, ui) { + var parent = ui.draggable.parent(); + var where = $(this).parent().attr('id').split('-')[1]; + var replace = null; + if (ui.draggable.hasClass('widget-instance')) { + replace = ui.draggable; + } + else { + replace = $('
  • ').append(ui.draggable.children().clone()); + replace.removeClass('widget-class').addClass('widget-instance'); + } + replace.children('input').attr('name', 'widgets[' + where + '][]'); + $(this).replaceWith(replace); + + if (parent.children().length < 1) { + parent.append('
  • Drop here
    • '); + } + FlatPress.wreload(); + } + }); + }, + winstancedrop : function() { + $('.widget-instance').droppable({ + 'accept' : '.widget-class, .widget-instance', + 'activeClass' : 'ui-state-highlight', + 'over' : function(event, ui) { + $(this).effect("highlight", { 'color' : $('.widget-available, .widget-installed').css('background-color') }, 1000); + }, + 'drop' : function(event, ui) { + var parent = ui.draggable.parent(); + var where = $(this).parent().attr('id').split('-')[1]; + var replace = null; + if (ui.draggable.hasClass('widget-instance')) { + replace = ui.draggable; + } + else { + replace = $('
  • ').append(ui.draggable.children().clone()); + replace.removeClass('widget-class').addClass('widget-instance'); + } + replace.children('input').attr('name', 'widgets[' + where + '][]'); + $(this).after(replace); + if (parent.children().length < 1) { + parent.append('
  • Drop here
    • '); + } + FlatPress.wreload(); + } + }); + }, + wtrash : function() { + $('#widget-trashcan').droppable({ + 'accept' : '.widget-instance', + 'activeClass' : 'ui-state-highlight', + 'over' : function(event, ui) { + $(this).fadeTo('slow', 0.2).fadeTo('slow', 1.0); + }, + 'drop' : function(event, ui) { + var parent = ui.draggable.parent(); + var draggable = $(ui.draggable); + // we can't remove() draggable here, because of a bug with jquery UI + IE8 + // we'll defer it + $('.widget-installed').remove(); + // last element has not been removed, + // so there is still one in the list, soon to be deleted ' + if(parent.children().length < 2) { + parent.append('
  • Drop here
    • '); + } + // deferred removal takes place here + setTimeout(function() { + draggable.remove(); + }); + FlatPress.wreload(); + } + }); + $('.widget-class').droppable({ + 'accept' : '.widget-instance', + 'activeClass' : 'ui-state-highlight', + 'over' : function(event, ui) { + $(this).effect("highlight", { 'color' : $('#widget-trashcan').css('background-color') }, 1000); + }, + 'drop' : function(event, ui) { + var parent = ui.draggable.parent(); + var draggable = $(ui.draggable); + // we can't remove() draggable here, because of a bug with jquery UI + IE8 + // we'll defer it + $('.widget-installed').remove(); + // last element has not been removed, + // so there is still one in the list, soon to be deleted + if(parent.children().length < 2) { + parent.append('
  • Drop here
    • '); + } + // deferred removal takes place here + setTimeout(function() { + draggable.remove(); + }); + FlatPress.wreload(); + } + }); + + }, + wreload : function(){ + this.winstancedrag(); + this.winstancedrop(); + this.wplaceholder(); + } +} +FlatPress.wreload();FlatPress.wtrash(); +======= * Released under GNU GPL v2 */ @@ -141,3 +296,4 @@ wreload: function(){ //$(document).ready(wreload); FlatPress.wreload();FlatPress.wtrash(); +>>>>>>> 109664842ba0aaec1b8e462a3fdcee470110a499 diff --git a/fp-interface/themes/leggero/flatmaas-rev/res/admin.css b/fp-interface/themes/leggero/flatmaas-rev/res/admin.css index aae3f4d..a6acb4b 100755 --- a/fp-interface/themes/leggero/flatmaas-rev/res/admin.css +++ b/fp-interface/themes/leggero/flatmaas-rev/res/admin.css @@ -485,8 +485,13 @@ li.admin-widgetset { text-align: left; } +<<<<<<< HEAD +#widget-trashcan { /*colors for trashcan/uninstall widgets while dragging*/ + background-color: rgba(170, 34, 34, 0.7); +======= #widget-trashcan { background-color: #a22; +>>>>>>> 109664842ba0aaec1b8e462a3fdcee470110a499 color: #ddd; font-size: 120%; font-weight: bold; @@ -496,6 +501,24 @@ li.admin-widgetset { margin: 2em; } +<<<<<<< HEAD +.widget-available { /*colors for available widgets while dragging*/ + cursor: move; + color: #fff; + background-color: rgba(34, 102, 0, 0.7); + border: 2px solid #2f0; + z-index: 2000; +} + +.widget-installed { /*colors for installed widgets while dragging*/ + cursor: move; + color: #fff; + background-color: rgba(0, 34, 102, 0.7); + border: 2px solid #00f; + z-index: 2000; +} +======= +>>>>>>> 109664842ba0aaec1b8e462a3fdcee470110a499 #available-widgets ul, .admin-widgetset ul { padding-left: 0; margin-left: 0; diff --git a/fp-interface/themes/leggero/leggero/res/admin.css b/fp-interface/themes/leggero/leggero/res/admin.css index a71ac37..d90207d 100755 --- a/fp-interface/themes/leggero/leggero/res/admin.css +++ b/fp-interface/themes/leggero/leggero/res/admin.css @@ -14,7 +14,10 @@ Module: admin.css @import url(common.css); @import url(globals.css); +<<<<<<< HEAD +======= +>>>>>>> 109664842ba0aaec1b8e462a3fdcee470110a499 /* ===== VARIOUS ===== */ .buttonbar input { padding: .3em; @@ -378,8 +381,13 @@ li.admin-widgetset { text-align: left; } +<<<<<<< HEAD +#widget-trashcan { /*colors for trashcan/uninstall widgets while dragging*/ + background-color: rgba(170, 34, 34, 0.7); +======= #widget-trashcan { background-color: #a22; +>>>>>>> 109664842ba0aaec1b8e462a3fdcee470110a499 color: #ddd; font-size: 120%; font-weight: bold; @@ -389,6 +397,25 @@ li.admin-widgetset { margin: 2em; } +<<<<<<< HEAD +.widget-available { /*colors for available widgets while dragging*/ + cursor: move; + color: #fff; + background-color: rgba(34, 102, 0, 0.7); + border: 2px solid #2f0; + z-index: 2000; +} + +.widget-installed { /*colors for installed widgets while dragging*/ + cursor: move; + color: #fff; + background-color: rgba(0, 34, 102, 0.7); + border: 2px solid #00f; + z-index: 2000; +} + +======= +>>>>>>> 109664842ba0aaec1b8e462a3fdcee470110a499 #available-widgets ul, .admin-widgetset ul { padding-left: 0; margin-left: 0;