Issue #4: Adds missing requirements for WidgetAreaEditor

NEW: Updates WidgetAreaEditor images to fit new design

BUG: Removes use of deprecated method Name() on FormField
This commit is contained in:
Ed 2012-06-18 21:27:35 -03:00 committed by Daniel Howlett
parent 025ee424c4
commit 3c99b0f23a
8 changed files with 276 additions and 4 deletions

View File

@ -21,10 +21,7 @@ class WidgetAreaEditor extends FormField {
function FieldHolder($properties = array()) { function FieldHolder($properties = array()) {
Requirements::css('widgets/css/WidgetAreaEditor.css'); Requirements::css('widgets/css/WidgetAreaEditor.css');
Requirements::javascript(THIRDPARTY_DIR . "/prototype/prototype.js");
Requirements::javascript(THIRDPARTY_DIR . '/behaviour/behaviour.js');
Requirements::javascript('widgets/javascript/WidgetAreaEditor.js'); Requirements::javascript('widgets/javascript/WidgetAreaEditor.js');
return $this->renderWith("WidgetAreaEditor"); return $this->renderWith("WidgetAreaEditor");
} }

View File

@ -91,7 +91,7 @@ class Widget extends DataObject {
$output = ''; $output = '';
$fields = $this->getCMSFields(); $fields = $this->getCMSFields();
foreach($fields as $field) { foreach($fields as $field) {
$name = $field->Name(); $name = $field->getName();
$field->setValue($this->getField($name)); $field->setValue($this->getField($name));
$renderedField = $field->FieldHolder(); $renderedField = $field->FieldHolder();
$renderedField = preg_replace("/name=\"([A-Za-z0-9\-_]+)\"/", "name=\"Widget[" . $this->ID . "][\\1]\"", $renderedField); $renderedField = preg_replace("/name=\"([A-Za-z0-9\-_]+)\"/", "name=\"Widget[" . $this->ID . "][\\1]\"", $renderedField);

84
css/WidgetAreaEditor.css Normal file
View File

@ -0,0 +1,84 @@
div.availableWidgetsHolder {
width: 30%;
}
div.usedWidgetsHolder {
width: 66%;
max-width: 745px;
}
div.availableWidgetsHolder {
float: left;
}
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' */
}
div.usedWidgets div.Widget,
div.availableWidgets div.Widget {
width: 98%;
border: 1px solid #ddd;
border-top: none;
margin-bottom: 10px;
background: #F0F3F4;
}
div.widgetDescription{
padding: 10px 0;
}
div.widgetDescription p,
div.widgetFields {
padding: 0 8px;
color: #666;
font-size: 11px;
}
p.deleteWidget {
margin: 0 0 4px;
height: 22px;
line-height: 2.2;
font-size: 12px;
}
span.widgetDelete {
padding-left: 20px;
margin-right: 8px;
float: right;
background: url(../images/delete.gif) no-repeat left center;
cursor: pointer;
}
div.usedWidgets div.Widget h3,
div.availableWidgets div.Widget h3 {
font-size: 12px;
color: #fff;
line-height: 1.8;
padding: 0 5px;
margin: 0;
}
div.usedWidgets div.Widget h3 {
cursor: move;
background: #000 url(../images/handled-bg.png) right top;
}
div.availableWidgets div.Widget h3 {
cursor: pointer;
color: #444;
padding-right: 25px;
background: #ccc url(../images/add-bg.png) right center;
}
div.availableWidgets div.Widget h3:hover {
background: #ccc url(../images/add-bg-hover.png) right center;
}

BIN
images/add-bg-hover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 621 B

BIN
images/add-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 578 B

BIN
images/delete.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 356 B

BIN
images/handled-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,191 @@
(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);