tonyair/silverstripe-widgets
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-widgets synced 2024-10-22 15:05:54 +00:00
Code Issues Projects Releases Wiki Activity

Finished work on the editor javascript

Browse Source
This commit is contained in:
Ed 2012-06-20 20:42:58 -03:00
parent 3fdd8fe2ec
commit 4972b44cec
1 changed files with 183 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

412
javascript/WidgetAreaEditor.js
View File

@ -1,236 +1,190 @@
(function($) { (function($) {
$.entwine('ss', function($) { $.entwine('ss', function($) {
$('.WidgetAreaEditor').entwine({ $('.WidgetAreaEditor').entwine({
onmatch: function() { onmatch: function() {
var parentName=$(this).attr('name'); var parentName=$(this).attr('name');
this.rewriteWidgetAreaAttributes(); this.rewriteWidgetAreaAttributes();
var availableWidgets=$('#availableWidgets-'+$(this).attr('name')).children().each(function() { var availableWidgets=$('#availableWidgets-'+$(this).attr('name')).children().each(function() {
// Don't run on comments, whitespace, etc // Don't run on comments, whitespace, etc
if($(this)[0].nodeType==1) { if($(this)[0].nodeType==1) {
// Gotta change their ID's because otherwise we get clashes between two tabs // Gotta change their ID's because otherwise we get clashes between two tabs
$(this)[0].id=$(this)[0].id+'-'+parentName; $(this)[0].id=$(this)[0].id+'-'+parentName;
} }
}); });
var parentRef=$(this);
// Create dummy sortable to prevent javascript errors
$(this).find('.availableWidgets').sortable({
opacity: 0.6, // Used widgets are sortable
handle: '.handle' $(this).find('.usedWidgets').sortable({
}); opacity: 0.6,
handle: '.handle',
// Used widgets are sortable update: function(e, ui) {parentRef.updateWidgets(e, ui)}
$(this).find('.usedWidgets').sortable({ });
opacity: 0.6,
handle: '.handle', // Figure out maxid, this is used when creating new widgets
//update: this.updateWidgets, $(this).data('maxid', 0);
connectWith: $(this).find('.availableWidgets')
}); var usedWidgets = $(this).find('.usedWidgets .Widget');
usedWidgets.each(function() {
// Figure out maxid, this is used when creating new widgets var widget = $(this)[0];
$(this).data('maxid', 0); if(widget.id) {
widgetid = widget.id.match(/Widget\[(.+?)\]\[([0-9]+)\]/i);
var parentRef=$(this); if(widgetid && parseInt(widgetid[2]) > parseInt(parentRef.data('maxid'))) {
var usedWidgets = $(this).find('.usedWidgets .Widget'); parentRef.data('maxid', parseInt(widgetid[2]));
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() {
// Ensure correct sort values are written when page is saved var name = $(this).attr('name');
// TODO Adjust to new event listeners
$('.cms-container').bind('submitform', this.beforeSave);
},
rewriteWidgetAreaAttributes: function() {
var name = $(this).attr('name');
var monkeyWith = function(widgets, name) { var monkeyWith = function(widgets, name) {
if (!widgets) { if (!widgets) {
return; return;
} }
widgets.each(function() { widgets.each(function() {
widget=$(this)[0]; widget=$(this)[0];
if (!widget.rewritten && (widget.id || widget.name)) { if (!widget.rewritten && (widget.id || widget.name)) {
if (widget.id && widget.id.indexOf('Widget[') === 0) { if (widget.id && widget.id.indexOf('Widget[') === 0) {
var newValue = widget.id.replace(/Widget\[/, 'Widget['+name+']['); var newValue = widget.id.replace(/Widget\[/, 'Widget['+name+'][');
//console.log('Renaming '+widget.tagName+' ID '+widget.id+' to '+newValue); //console.log('Renaming '+widget.tagName+' ID '+widget.id+' to '+newValue);
widget.id = newValue; widget.id = newValue;
} }
if (widget.name && widget.name.indexOf('Widget[') === 0) { if (widget.name && widget.name.indexOf('Widget[') === 0) {
var newValue = widget.name.replace(/Widget\[/, 'Widget['+name+']['); var newValue = widget.name.replace(/Widget\[/, 'Widget['+name+'][');
//console.log('Renaming '+widget.tagName+' Name '+widget.name+' to '+newValue); //console.log('Renaming '+widget.tagName+' Name '+widget.name+' to '+newValue);
widget.name=newValue; widget.name=newValue;
} }
widget.rewritten='yes'; widget.rewritten='yes';
}else { }else {
//console.log('Skipping '+(widget.id ? widget.id : (widget.name ? widget.name : 'unknown '+widget.tagName))); //console.log('Skipping '+(widget.id ? widget.id : (widget.name ? widget.name : 'unknown '+widget.tagName)));
} }
}); });
} }
monkeyWith($('#WidgetAreaEditor-'+name+' .Widget'), name); monkeyWith($('#WidgetAreaEditor-'+name+' .Widget'), name);
monkeyWith($('#WidgetAreaEditor-'+name+' .Widget *'), name); monkeyWith($('#WidgetAreaEditor-'+name+' .Widget *'), name);
}, },
beforeSave: function() { beforeSave: function() {
// Ensure correct sort values are written when page is saved // Ensure correct sort values are written when page is saved
var usedWidgets = $('#usedWidgets-'+$(this).attr('name')); var usedWidgets = $('#usedWidgets-'+$(this).attr('name'));
if(usedWidgets) { if(usedWidgets) {
this.sortWidgets(); this.sortWidgets();
var children=usedWidgets.children(); var children=usedWidgets.children();
children.each(function() { children.each(function() {
if($(this).beforeSave) { if($(this).beforeSave) {
$(this).beforeSave(); $(this).beforeSave();
} }
}); });
} }
}, },
addWidget: function(className, holder) { addWidget: function(className, holder) {
if($('#WidgetAreaEditor-'+holder).attr('maxwidgets')) { if($('#WidgetAreaEditor-'+holder).attr('maxwidgets')) {
var maxCount = $('#WidgetAreaEditor-'+holder).attr('maxwidgets'); var maxCount = $('#WidgetAreaEditor-'+holder).attr('maxwidgets');
var count = $('#usedWidgets-'+holder+' .Widget').length; var count = $('#usedWidgets-'+holder+' .Widget').length;
if (count+1 > maxCount) { if (count+1 > maxCount) {
alert(ss.i18n._t('WidgetAreaEditor.TOOMANY')); alert(ss.i18n._t('WidgetAreaEditor.TOOMANY'));
return; return;
} }
} }
var parentRef=$(this); var parentRef=$(this);
$.ajax({ $.ajax({
'url': 'Widget_Controller/EditableSegment/' + className, 'url': 'Widget_Controller/EditableSegment/' + className,
'success' : function(response) {parentRef.insertWidgetEditor(response)} '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) {
// Remove placeholder text
if($('#NoWidgets-'+$(this).attr('name')).length>0) {
$('#usedWidgets-'+$(this).attr('name')).remove($('#NoWidgets-'+$(this).attr('name')));
}
/*updateWidgets: function() { var usedWidgets = $('#usedWidgets-'+$(this).attr('name')).children();
var self = this;
// 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];
// Gotta get the name of the current dohickey based off the ID if(div.nodeName != '#comment') {
this.name = this.element.id.split('-').pop(); var fields = div.getElementsByTagName('input');
for(j = 0; field = fields.item(j); j++) {
// alert(this.name); if(field.name == div.id + '[Sort]') {
field.value = i;
// Gotta get the name of the current dohickey based off the ID }
this.name = this.element.id.split('-').pop(); }
}
});
// This is called when an available widgets is dragged over to used widgets. },
// It inserts the editor form into the new used widget
deleteWidget: function(widgetToRemove) {
var usedWidgets = document.getElementById('usedWidgets-'+this.name).childNodes; // Remove a widget from the used widgets column
for(var i = 0; i < usedWidgets.length; i++) { widgetToRemove.remove();
var widget = usedWidgets[i]; // TODO ... re-create NoWidgets div?
if(widget.id && (widget.id.indexOf("Widget[") != 0) && (widget.id != 'NoWidgets-'+this.name)) { }
// Need to remove the -$Name part. });
var wIdArray = widget.id.split('-');
wIdArray.pop(); $('div.availableWidgets .Widget h3').entwine({
onclick: function(event) {
jQuery.ajax({ parts = $(this).parent().attr('id').split('-');
'url': 'Widget_Controller/EditableSegment/' + wIdArray.join('-'), var widgetArea = parts.pop();
'success' : function() { var className = parts.pop();
document.getElementById('usedWidgets-'+self.name).parentNode.parentNode.insertWidgetEditor(); $('#WidgetAreaEditor-'+widgetArea).addWidget(className, widgetArea);
} }
}); });
}
} /*$('div.usedWidgets .TreeDropdownField').entwine({
},*/ getName: function() {
return 'Widget_TDF_Endpoint';
insertWidgetEditor: function(response) { }
// Remove placeholder text });*/
if($('#NoWidgets-'+$(this).attr('name')).length>0) {
$('#usedWidgets-'+$(this).attr('name')).remove($('#NoWidgets-'+$(this).attr('name'))); $('div.usedWidgets div.Widget').entwine({
} onmatch: function() {
// Call deleteWidget when delete button is pushed
var usedWidgets = $('#usedWidgets-'+$(this).attr('name')).children(); $(this).find('span.widgetDelete').click(function() {
$(this).closest('.WidgetAreaEditor').deleteWidget($(this).parent().parent());
// 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
$('#usedWidgets-'+$(this).attr('name')).remove(widgetToRemove);
// TODO ... re-create NoWidgets div?
}
});
$('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);
}
});
/*$('div.usedWidgets .TreeDropdownField').entwine({
getName: function() {
return 'Widget_TDF_Endpoint';
}
});
/*$('div.usedWidgets div.Widget').entwine({
initialize: function() {
// Call deleteWidget when delete button is pushed
this.deleteButton = this.findDescendant('span', 'widgetDelete');
if(this.deleteButton)
this.deleteButton.onclick = this.deleteWidget.bind(this);
},
// Taken from FieldEditor
findDescendant: function(tag, clsName, element) {
if(!element)
element = this;
var descendants = element.getElementsByTagName(tag);
for(var i = 0; i < descendants.length; i++) {
var el = descendants[i];
if(tag.toUpperCase() == el.tagName && el.className.indexOf( clsName ) != -1)
return el;
}
return null;
},
deleteWidget: function() {
this.parentNode.parentNode.parentNode.deleteWidget(this);
}
});*/
})
})(jQuery); })(jQuery);