YUI.add('change-history', function(Y) {
var Lang = Y.Lang,
Widget = Y.Widget,
Node = Y.Node;
var NS = Y.namespace('mazzle');
NS.ChangeHistory = ChangeHistory;
/* ChangeHistory class constructor */
function ChangeHistory(config) {
ChangeHistory.superclass.constructor.apply(this, arguments);
}
/*
* Required NAME static field, to identify the Widget class and
* used as an event prefix, to generate class names etc. (set to the
* class name in camel case).
*/
ChangeHistory.NAME = "change-history";
/*
* The attribute configuration for the ChangeHistory widget. Attributes can be
* defined with default values, get/set functions and validator functions
* as with any other class extending Base.
*/
ChangeHistory.ATTRS = {
index: {
value: 0
}
};
/* Static constants used to define the markup templates used to create ChangeHistory DOM elements */
ChangeHistory.LIST_CLASS = 'tag-list';
ChangeHistory.LIST_TEMPLATE = '
';
/* ChangeHistory extends the base Widget class */
Y.extend(ChangeHistory, Widget, {
initializer: function() {
this._listNode = null;
this._actions = [];
},
destructor : function() {
},
renderUI : function() {
var content = this.get("contentBox");
this._listNode = content.appendChild(Node.create(ChangeHistory.LIST_TEMPLATE));
},
bindUI : function() {
Y.delegate("click", this._itemSelect, this._listNode, "li", this);
},
syncUI : function() {
this._renderActions();
},
_renderActions : function() {
var actions = this._actions;
this._listNode.setContent("");
for(var i=0; i < actions.length; i++) {
this._listNode.append(''
+''+i+''
+this.formatAction(actions[i])
+'');
}
},
formatAction : function(action) {
var type = action.type;
annotation = action.annotation;
var label = annotation.tag ? '"'+annotation.tag.value+'"' : "";
if(action.newvalue) {label += ' to "'+action.newvalue+'"'}
if(action.startTime) {label += ' at time '+action.startTime}
if(action.endTime) {label += ' - '+action.endTime}
var html = ''+type+''
+ ' '+label+'';
return html;
},
addActionHandler : function(e) {
var action = e.details[0];
this.addAction(action);
},
addAction : function(action) {
var actions = this._actions,
index = this.get("index"),
nodes = this._listNode.all("li");
// First we remove the actions after the current index (the redos).
if(index'
+''+index+''
+this.formatAction(action)
+'');
},
getActiveActions : function() {
var actions = this._actions,
index = this.get("index");
var active = [];
for (var i=0; i < index; i++) {
var action = actions[i];
active[i] = {
type:action.type,
annotation:action.annotation
};
if(action.newvalue) {
active[i].newvalue = action.newvalue;
}
}
return active;
},
disableAll : function() {
this.set("index", 0);
this._actions = [];
this._listNode.setContent("");
/*
this.set("index", 0);
this._listNode.all("li").each(function(node, i) {
node.addClass("disabled");
});*/
},
_itemSelect : function(e) {
var nodes = e.container.all("li");
index = nodes.indexOf(e.currentTarget),
actions = this._actions,
undo = [];
// We store the current index, so later we know
// which actions are undos and redos
this.set("index", index);
// The redo actions are indicated by CSS class "disabled"
// and collected in the history array which is send in the
// undo event.
for (var i=index; i < nodes.size(); i++) {
nodes.item(i).addClass("disabled");
undo.push(actions[i]);
};
Y.log("undo "+undo);
this.fire("undo", {history:undo});
}
});
}, 'gallery-2010.03.02-18' ,{requires:['node','widget']});