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 <liquibyte@gmail.com>
This commit is contained in:
liquibyte
parent
109664842b
commit
e121753594
@ -3,6 +3,161 @@
|
||||
* Based on original flatpress' code
|
||||
* Require jQuery and jQuery UI (Core, Draggable, Droppable and Effects Core)
|
||||
* Coded by Piero VDFN <vogliadifarniente@gmail.com>
|
||||
<<<<<<< HEAD
|
||||
* Re-Coded by liquibyte <liquibyte@gmail.com>
|
||||
* 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 = $('<li class="' + ui.draggable.attr('class') + '"></li>').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('<li class="widget-placeholder">Drop here</li>');
|
||||
}
|
||||
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 = $('<li class="' + ui.draggable.attr('class') + '"></li>').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('<li class="widget-placeholder">Drop here</li>');
|
||||
}
|
||||
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('<li class="widget-placeholder">Drop here</li>');
|
||||
}
|
||||
// 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('<li class="widget-placeholder">Drop here</li>');
|
||||
}
|
||||
// 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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user