Introduce yourself here! In order to avoid spam, new users must first comment on the discussion in the 'Introductions' before they become 'full members'
admin.widgets.js
  • I've been beating my head against the wall trying to style a template using different colors and ran into an issue with the color values being hardcoded into the admin.widgets.js file. After playing around awhile with it, I came up with a way to have the colors reset using the users stylesheet instead of using the hardcoded value. I like the green and red hover defaults but didn't care for the thing setting itself to white afterwards so I came up with this. I will probably end up with variables for all of the colors so that they can be changed in the stylesheet but for now I'm happy that I got this thing working the way I want and the way I think it should have been.

    /*
    * Flatpress widget js admin
    * Based on original flatpress' code
    * Require jQuery and jQuery UI (Core, Draggable, Droppable and Effects Core)
    * Coded by Piero VDFN
    *
    * Modified and fixed 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.
    * Released under GNU GPL v2
    */
    var FlatPress = {
    wclass: function() {
    $('.widget-class').draggable({
    'scroll' : true,
    'helper':function(event) {
    return $(this).clone().appendTo('body').removeClass('widget-class').css({
    'position': 'fixed',
    'opacity' : 0.7,
    'color' : '#fff',
    'background-color' : '#260',
    'border' : '2px solid #0f0',
    'top' : event.pageY-10,
    'left' : event.pageX-($(this).width()/4),
    'list-style-type' : 'none',
    'width' : $(this).width()
    }).addClass('widget-dragger');
    }
    });
    },
    winstancedrag: function() {
    $('.widget-instance').draggable({
    'scroll' : true,
    'helper':function(event) {
    return $(this).clone().appendTo('body').removeClass('widget-class').css({
    'position': 'fixed',
    'opacity' : 0.7,
    'color' : '#fff',
    'background-color' : '#027',
    'border' : '2px solid #00f',
    'list-style-type' : 'none',
    'width' : $(this).width()
    }).addClass('widget-dragger');
    }
    });
    },
    wplaceholder: function() {
    $('.widget-instance').each(function (index, elem) {
    $(elem).data('foreColor', $(elem).css('color')),
    $(elem).data('backColor', $(elem).css('background-color'))
    });
    $('.widget-placeholder').each(function (index, elem) {
    $(elem).data('foreColor', $(elem).css('color')),
    $(elem).data('backColor', $(elem).css('background-color'))
    });
    $('#widget-trashcan').each(function (index, elem) {
    $(elem).data('foreColor', $(elem).css('color')),
    $(elem).data('backColor', $(elem).css('background-color'))
    });
    $('.widget-placeholder').droppable({
    'accept' : '.widget-class, .widget-dragger, .widget-instance',
    'over' : function(event, ui) {
    $(this).animate({'color' : '#fff', 'background-color' : '#78ba91'})
    },
    'out' : function(event, ui) {
    $(this).animate({'color' : $(this).data('foreColor')}),
    $(this).animate({'background-color' : $(this).data('backColor')})
    },
    '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) {<br /> parent.append('Drop here');
    }
    FlatPress.wreload();
    }
    });
    },
    winstancedrop: function() {
    $('.widget-instance').droppable({
    'accept' : '.widget-class, .widget-dragger, .widget-instance',
    'over' : function(event, ui) {
    $(this).animate({'color' : '#fff', 'background-color' : '#78ba91'})
    },
    'out' : function(event, ui) {
    $(this).animate({'color' : $(this).data('foreColor')}),
    $(this).animate({'background-color' : $(this).data('backColor')})
    },
    '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);
    $(this).attr('style',''); //this works
    if(parent.children().length<1) {<br /> parent.append('Drop here');
    }
    FlatPress.wreload();
    }
    });
    },
    wtrash: function() {
    $('#widget-trashcan').droppable({
    'accept' : '.widget-instance',
    'over' : function(event, ui) {
    $(this).animate({'color' : '#fff', 'background-color' : '#c22'})
    },
    'out' : function(event, ui) {
    $(this).animate({'color' : $(this).data('foreColor')}),
    $(this).animate({'background-color' : $(this).data('backColor')})
    },
    '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
    draggable.fadeOut();
    $('.widget-dragger').remove();
    // last element has not been removed,
    // so there is still one in the list, soon to be deleted '
    // (parent.children().lenght==1)
    if(parent.children().length<2) {<br /> parent.append('Drop here');
    }
    $(this).attr('style',''); //this works
    // deferred removal takes place here
    setTimeout(function() {
    draggable.remove();
    });
    FlatPress.wreload();
    }
    });
    },
    wreload: function(){
    this.wclass();
    this.winstancedrag();
    this.wplaceholder();
    this.winstancedrop();
    //wtrash();
    }
    }
    //$(document).ready(wreload);
    FlatPress.wreload();FlatPress.wtrash();
  • Hi,
    thank you very much.

    I'm not very good in JS and I was worse when I ported to jQuery the hole thing ;-)

    However my 2 cents: the css method returns the comptued style, so you could get the colours from stylesheets with it...
  • feel free to move the hardcoded values to a CSS class and edit the JS/CSS. Then make a pull request!
  • I'll see what I can do to get that done and clean up the code a bit.  I just did this as a quick fix and am sure it can be shortened somewhat.  I come from a c world so javascript and php aren't my forte but I'm having fun with it.

    I've been wanting to do a flatfile site for awhile but never got around to it, probably because php pisses me off with the syntax.  This is the best implementation I've come accross yet.  You guys have done a fantastic job.
  • thank you :)
  • I did a fork, messed it up having never used git before so I ended up just deleting things and starting over.  All is now right with the world.

    I also forked to a different repository but didn't fork it using git, I just uploaded as a new project because the source is going to be heavily modified removing things down to a small base and outputting html5 / css3 and I wanted it to be isolated and not detract from flatpress itself.  I called it nibble in case anyone is wondering.  Right now it will output valid code if the template is designed to but that's as far as I've gone with it because I'm still working on my wife's site and wanted to finish that first.  Once that is done, I'll upload it here once I revert it back to xhtml valid.
Start a New Discussion

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion