diff --git a/code/form/WidgetAreaEditor.php b/code/form/WidgetAreaEditor.php index 03bdafe..814c132 100644 --- a/code/form/WidgetAreaEditor.php +++ b/code/form/WidgetAreaEditor.php @@ -21,15 +21,7 @@ class WidgetAreaEditor extends FormField { function FieldHolder($properties = array()) { Requirements::css('widgets/css/WidgetAreaEditor.css'); - Requirements::javascript(THIRDPARTY_DIR . "/prototype/prototype.js"); - Requirements::javascript(THIRDPARTY_DIR . '/behaviour/behaviour.js'); - Requirements::javascript(THIRDPARTY_DIR . "/scriptaculous/builder.js"); - Requirements::javascript(THIRDPARTY_DIR . "/scriptaculous/effects.js"); - Requirements::javascript(THIRDPARTY_DIR . "/scriptaculous/dragdrop.js"); - Requirements::javascript(THIRDPARTY_DIR . "/scriptaculous/control.js"); - Requirements::javascript(THIRDPARTY_DIR . "/scriptaculous/slider.js"); Requirements::javascript('widgets/javascript/WidgetAreaEditor.js'); - return $this->renderWith("WidgetAreaEditor"); } diff --git a/code/model/Widget.php b/code/model/Widget.php index 8ef5b7a..5da61e4 100644 --- a/code/model/Widget.php +++ b/code/model/Widget.php @@ -91,7 +91,7 @@ class Widget extends DataObject { $output = ''; $fields = $this->getCMSFields(); foreach($fields as $field) { - $name = $field->Name(); + $name = $field->getName(); $field->setValue($this->getField($name)); $renderedField = $field->FieldHolder(); $renderedField = preg_replace("/name=\"([A-Za-z0-9\-_]+)\"/", "name=\"Widget[" . $this->ID . "][\\1]\"", $renderedField); diff --git a/css/WidgetAreaEditor.css b/css/WidgetAreaEditor.css index 24df1fc..e746a62 100644 --- a/css/WidgetAreaEditor.css +++ b/css/WidgetAreaEditor.css @@ -4,6 +4,7 @@ div.availableWidgetsHolder { div.usedWidgetsHolder { width: 66%; + max-width: 745px; } div.availableWidgetsHolder { @@ -14,6 +15,13 @@ div.usedWidgetsHolder { float: right; } +div.usedWidgets .ui-state-highlight { + background: #EEEEEE; + border: 1px solid #DDDDDD; + width: 98%; + margin-bottom: 5px; +} + .NoWidgets { padding: 50px; /* Make this nice and big and easily 'droppable' */ } @@ -23,7 +31,12 @@ div.availableWidgets div.Widget { width: 98%; border: 1px solid #ddd; border-top: none; - margin-bottom: 5px; + margin-bottom: 10px; + background: #F0F3F4; +} + +div.widgetDescription{ + padding: 10px 0; } div.widgetDescription p, div.widgetFields { @@ -33,7 +46,7 @@ div.widgetFields { } p.deleteWidget { - margin: 0; + margin: 0 0 4px; height: 22px; line-height: 2.2; font-size: 12px; diff --git a/javascript/WidgetAreaEditor.js b/javascript/WidgetAreaEditor.js index 0fa14fa..33a16c7 100644 --- a/javascript/WidgetAreaEditor.js +++ b/javascript/WidgetAreaEditor.js @@ -279,4 +279,196 @@ WidgetTreeDropdownField.prototype = { } } WidgetTreeDropdownField.applyTo('div.usedWidgets .TreeDropdownField'); -WidgetAreaEditorClass.applyTo('.WidgetAreaEditor'); \ No newline at end of file +WidgetAreaEditorClass.applyTo('.WidgetAreaEditor'); +======= +(function($) { + $.entwine('ss', function($) { + $('.WidgetAreaEditor').entwine({ + onmatch: function() { + var parentName=$(this).attr('name'); + this.rewriteWidgetAreaAttributes(); + + var availableWidgets=$('#availableWidgets-'+$(this).attr('name')).children().each(function() { + // Don't run on comments, whitespace, etc + if($(this)[0].nodeType==1) { + // Gotta change their ID's because otherwise we get clashes between two tabs + $(this)[0].id=$(this)[0].id+'-'+parentName; + } + }); + + var parentRef=$(this); + + + // Used widgets are sortable + $(this).find('.usedWidgets').sortable({ + opacity: 0.6, + handle: '.handle', + update: function(e, ui) {parentRef.updateWidgets(e, ui)}, + placeholder: 'ui-state-highlight', + forcePlaceholderSize: true + }); + + // Figure out maxid, this is used when creating new widgets + $(this).data('maxid', 0); + + var usedWidgets = $(this).find('.usedWidgets .Widget'); + usedWidgets.each(function() { + var widget = $(this)[0]; + if(widget.id) { + widgetid = widget.id.match(/Widget\[(.+?)\]\[([0-9]+)\]/i); + if(widgetid && parseInt(widgetid[2]) > parseInt(parentRef.data('maxid'))) { + parentRef.data('maxid', parseInt(widgetid[2])); + } + } + }); + + + // Ensure correct sort values are written when page is saved + // TODO Adjust to new event listeners + $('.cms-container').bind('submitform', this.beforeSave); + }, + + rewriteWidgetAreaAttributes: function() { + var name = $(this).attr('name'); + + var monkeyWith = function(widgets, name) { + if (!widgets) { + return; + } + + widgets.each(function() { + widget=$(this)[0]; + if (!widget.rewritten && (widget.id || widget.name)) { + if (widget.id && widget.id.indexOf('Widget[') === 0) { + var newValue = widget.id.replace(/Widget\[/, 'Widget['+name+']['); + //console.log('Renaming '+widget.tagName+' ID '+widget.id+' to '+newValue); + widget.id = newValue; + } + if (widget.name && widget.name.indexOf('Widget[') === 0) { + var newValue = widget.name.replace(/Widget\[/, 'Widget['+name+']['); + //console.log('Renaming '+widget.tagName+' Name '+widget.name+' to '+newValue); + widget.name=newValue; + } + widget.rewritten='yes'; + }else { + //console.log('Skipping '+(widget.id ? widget.id : (widget.name ? widget.name : 'unknown '+widget.tagName))); + } + }); + } + + monkeyWith($('#WidgetAreaEditor-'+name+' .Widget'), name); + monkeyWith($('#WidgetAreaEditor-'+name+' .Widget *'), name); + }, + + beforeSave: function() { + // Ensure correct sort values are written when page is saved + var usedWidgets = $('#usedWidgets-'+$(this).attr('name')); + if(usedWidgets) { + this.sortWidgets(); + + var children=usedWidgets.children(); + + children.each(function() { + if($(this).beforeSave) { + $(this).beforeSave(); + } + }); + } + }, + + addWidget: function(className, holder) { + if($('#WidgetAreaEditor-'+holder).attr('maxwidgets')) { + var maxCount = $('#WidgetAreaEditor-'+holder).attr('maxwidgets'); + var count = $('#usedWidgets-'+holder+' .Widget').length; + if (count+1 > maxCount) { + alert(ss.i18n._t('WidgetAreaEditor.TOOMANY')); + return; + } + } + + var parentRef=$(this); + $.ajax({ + 'url': 'Widget_Controller/EditableSegment/' + className, + 'success' : function(response) {parentRef.insertWidgetEditor(response)} + }); + }, + + updateWidgets: function(e, ui) { + // Gotta get the name of the current dohickey based off the ID + var name = $(this).attr('id').split('-').pop(); + + var i=0; + var usedWidgets = $('#usedWidgets-'+name).children().each(function() { + var widget = $(this)[0]; + if(widget.id) { + $(this).find('input[name='+widget.id.replace(/\]/g,'\\]').replace(/\[/g,'\\[')+'\\[Sort\\]]').val(i); + i++; + } + }); + }, + + insertWidgetEditor: function(response) { + var usedWidgets = $('#usedWidgets-'+$(this).attr('name')).children(); + + // Give the widget a unique id + var newID=parseInt($(this).data('maxid'))+1; + $(this).data('maxid', newID); + + var widgetContent = response.replace(/Widget\[0\]/gi, "Widget[new-" + (newID) + "]"); + $('#usedWidgets-'+$(this).attr('name')).prepend(widgetContent); + + this.rewriteWidgetAreaAttributes(); + }, + + sortWidgets: function() { + // Order the sort by the order the widgets are in the list + $('#usedWidgets-'+$(this).attr('name')).children().each(function() { + var div = $(this)[0]; + + if(div.nodeName != '#comment') { + var fields = div.getElementsByTagName('input'); + for(j = 0; field = fields.item(j); j++) { + if(field.name == div.id + '[Sort]') { + field.value = i; + } + } + } + }); + }, + + deleteWidget: function(widgetToRemove) { + // Remove a widget from the used widgets column + widgetToRemove.remove(); + } + }); + + $('div.availableWidgets .Widget h3').entwine({ + onclick: function(event) { + parts = $(this).parent().attr('id').split('-'); + var widgetArea = parts.pop(); + var className = parts.pop(); + $('#WidgetAreaEditor-'+widgetArea).addWidget(className, widgetArea); + } + }); + + /** + * Disable chosen + */ + $('div.usedWidgets .field.dropdown select, div.usedWidgets .field select[multiple]').entwine({ + onmatch: function() { + $(this).addClass('no-chzn'); + + this._super(); + } + }); + + $('div.usedWidgets div.Widget').entwine({ + onmatch: function() { + // Call deleteWidget when delete button is pushed + $(this).find('span.widgetDelete').click(function() { + $(this).closest('.WidgetAreaEditor').deleteWidget($(this).parent().parent()); + }); + } + }); + }) +})(jQuery); \ No newline at end of file