It took me a while to figure out how to get the sortables working with the dynamically created layers, but it turned out to not be as big of a problem as I expected. My problem was that a list needed to have items added to it after two events that depended on each other had happened. Specifically – once the user creates the “new layer” button, a “save layer” button is generated, and once the “save layer” button is clicked, an item is added to a list.
It’s very simple to accomplish this. I simply added two functions and then the code for the list addition.
/*When everything is loaded, attach events to elements*/
window.addEvent('domready', function() {
var showNewOrder = function() {
//This function means we get serialize() to tell us the text of each
//element, instead of its ID, which is the default return.
var serializeFunction = function(el) { return el.get('tb2blcCommonLayerName'); };
//We pass our custom function to serialize();
var orderTxt = sort.serialize(serializeFunction);
//And then we add that text to our page so everyone can see it.
$('listData').set('tb2blcCommonLayerName', orderTxt.join(' '));
};
//This code initalizes the sortable list.
var sort = new Sortables('.layerListItems', {
handle: '.drag',
//This will constrain the list items to the list.
constrain: true,
//We'll get to see a nice cloned element when we drag.
clone: true,
//This function will happen when the user 'drops' an item in a new place.
onComplete: showNewOrder
});
var layersLength = 0;
//i is used to keep track of the list item
$('tb1NewLayerButton').addEvent('click', function(e) {
/*When the new layer button is clicked, populate toolbox 2*/
createBaseLayerConfig();
/*When the save button is clicked, add a list item to the layer list in toolbox1*/
$('saveButton').addEvent('click', function(e) {
e.stop();
//Get the value of the text input.
var val = $('tb2blcCommonLayerName').get('value');
//The code here will execute if the input is empty.
//Create a new <li> to hold all our content.
var li = new Element('li', {id: 'tb1Layer'+layersLength, 'class':'drag', text:val, 'onclick':'editLayer(' + layersLength + ')'}); //onclick=\"editLayer('" + ID + "')\"
//Add the <li> to our list.
$('layerListItems').adopt(li);
//Do a fancy effect on the <li>.
li.highlight('#efefef');
//We have to add the list item to our Sortable object so it's sortable.
sort.addItems(li);
//We put the new order inside of the data div.
showNewOrder();
saveLayerConfig(layersLength);
layersLength += 1; //A layer has been created, so add 1 to the layersLength
});
});
});
The code is tailored for my OLArchitect application, but the concept should work for pretty much any implementation. When the first button is clicked, add an event handler to a button that is generated from the first button’s click, and when that second button is clicked, add an item to the list. Sounds confusing, eh? This probably isn’t the best way to do it, but I haven’t encountered any problems.
