/static/lib/inputex/examples/TaskManager/js/TaskManager.js
JavaScript | 248 lines | 145 code | 43 blank | 60 comment | 16 complexity | 7aaaea695800f1b63cabc85140948aa2 MD5 | raw file
- // Needed for inputEx
- YAHOO.inputEx.spacerUrl = "../images/space.gif";
- /**
- * Main TaskManager object
- */
- var TaskManager = {
-
- // Map of YAHOO.widget.TextNode instances in the TreeView instance.
- oTextNodeMap: {},
-
- // Remember the last clicked task
- oEditingTaskNode: null,
-
- // The YAHOO.widget.TextNode instance whose "contextmenu"
- // DOM event triggered the display of the ContextMenu instance.
- oCurrentTextNode: null,
-
- // Treeview instance
- oTreeView: null,
-
- // Task Details Form
- oTaskDetailsForm: null,
-
- /**
- * Init the taskManager
- */
- init: function() {
- this.buildTree();
- this.initContextMenu();
- this.buildForm();
- this.initEvents();
- this.queryData();
- },
-
- /**
- * Create the Task Details Form
- */
- buildForm: function() {
- this.oTaskDetailsForm = new YAHOO.inputEx.Group({parentEl: 'taskInformation', fields: [
- {inputParams: {label: 'Description', name: 'description'} },
- {type: 'date', inputParams: {label: 'Due date', name: 'duedate' } },
- {inputParams: {label: 'Tags', name: 'tags' } },
- {type:'text', inputParams: {label: 'Comments', name:'comments'}}
- ] });
- },
-
- /**
- * Init the events
- */
- initEvents: function() {
- // Save button
- YAHOO.util.Event.addListener('saveTreeButton', 'click', this.onSaveClick, this, true);
-
- // "Add Root Node" button
- YAHOO.util.Event.addListener('addRootNode', 'click', function(e) {
- YAHOO.util.Event.stopEvent(e);
- this.addNode(this.oTreeView.getRoot());
- }, this, true);
-
- // Updated event sent by the form
- this.oTaskDetailsForm.updatedEvt.subscribe(this.onTaskDetailsUpdated, this, true);
- },
-
- /**
- * Update the task details value
- */
- onTaskDetailsUpdated: function(e) {
- this.oEditingTaskNode._taskDetails = this.oTaskDetailsForm.getValue();
- var sLabel = this.oEditingTaskNode._taskDetails.description;
- if (sLabel && sLabel.length > 0) {
- this.oEditingTaskNode.getLabelEl().innerHTML = sLabel;
- this.oEditingTaskNode.label = sLabel;
- }
- },
-
- /**
- * Save button click
- */
- onSaveClick: function() {
- var value = [];
- var rootNode = this.oTreeView.getRoot();
-
- for(var i = 0 ; i < rootNode.children.length ; i++) {
- var childNode = rootNode.children[i];
- value.push( childNode.toJsObject() );
- }
- var json = YAHOO.lang.JSON.stringify(value);
-
- YAHOO.util.Dom.get('saveStatus').innerHTML = "saving...";
- YAHOO.util.Connect.asyncRequest('POST', 'store.php', {
- success: function(o) {
- var d = new Date();
- YAHOO.util.Dom.get('saveStatus').innerHTML = "saved at "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
- },
- failure: function(o) {
- YAHOO.util.Dom.get('saveStatus').innerHTML = "error !";
- }
- }, "data="+json);
- },
-
- /**
- * Ajax request to retreive the data
- */
- queryData: function() {
- YAHOO.util.Connect.asyncRequest('GET', 'store.php', {
- success: function(o) {
- var childNodes = YAHOO.lang.JSON.parse(o.responseText);
- this.populateTree(childNodes);
- },
- failure: function(o) {
- //console.log(o.responseText);
- },
- scope: this
- }, null);
- },
-
- /**
- * Populate the tree with the tasks
- */
- populateTree: function(childNodes) {
-
- // Function that render the branch
- var buildBranch = function(nodeInfos, parentNode) {
- var oTextNode = new YAHOO.widget.TaskNode(nodeInfos.label, parentNode, false, nodeInfos.checked);
- this.oTextNodeMap[oTextNode.labelElId] = oTextNode;
- oTextNode._taskDetails = nodeInfos._taskDetails;
- for(var i = 0 ; i < nodeInfos.children.length ; i++) {
- var n = nodeInfos.children[i];
- buildBranch.call(this, n, oTextNode);
- }
- };
- for(var i = 0 ; i < childNodes.length ; i++) {
- var nodeInfos = childNodes[i];
- buildBranch.call(this, nodeInfos, this.oTreeView.getRoot() );
- }
- this.oTreeView.draw();
- },
-
- /**
- * Render the treeview
- */
- buildTree: function() {
- // Create a TreeView instance
- this.oTreeView = new YAHOO.widget.TreeView("taskTreeView");
- },
-
- /**
- * Add a "Unamed" node to the parentEl and focus on the description field
- */
- addNode: function(parentNode) {
-
- var oChildNode = new YAHOO.widget.TaskNode("Unamed", parentNode, false);
- this.oTextNodeMap[oChildNode.labelElId] = oChildNode;
-
- parentNode.refresh();
- parentNode.expand();
-
- this.setEditingTaskNode(oChildNode);
- this.oTaskDetailsForm.inputsNames["description"].el.focus();
- this.oTaskDetailsForm.inputsNames["description"].el.setSelectionRange(0,6);
- },
-
- /**
- * Create the context menu
- */
- initContextMenu: function() {
- var that = this;
- var oContextMenu = new YAHOO.widget.ContextMenu("mytreecontextmenu", {
- trigger: "taskTreeView",
- lazyload: true,
- itemdata: [
- { text: "Add Subtask", onclick: { fn: function() { that.addNode(that.oCurrentTextNode); } } },
- { text: "Delete Task", onclick: { fn: function() {
- delete that.oTextNodeMap[that.oCurrentTextNode.labelElId];
- that.oTreeView.removeNode(that.oCurrentTextNode);
- that.oTreeView.draw();
- } } }
- ] });
- // Subscribe to the "contextmenu" event for the element(s) specified as the "trigger" for the ContextMenu instance.
- oContextMenu.subscribe("triggerContextMenu", this.onTriggerContextMenu);
- },
-
- /**
- * Get the TaskNode instance that that triggered the display of the ContextMenu instance.
- * and keep it in TaskManager.oCurrentTextNode
- */
- onTriggerContextMenu: function(p_oEvent) {
-
- function getTextNodeFromEventTarget(p_oTarget) {
- if (p_oTarget.tagName.toUpperCase() == "A" && YAHOO.util.Dom.hasClass(p_oTarget, "ygtvlabel") ) {
- return TaskManager.oTextNodeMap[p_oTarget.id];
- }
- else {
- if (p_oTarget.parentNode && p_oTarget.parentNode.nodeType == 1) {
- return getTextNodeFromEventTarget(p_oTarget.parentNode);
- }
- }
- }
- //
- var oTextNode = getTextNodeFromEventTarget(this.contextEventTarget);
- if (oTextNode) {
- TaskManager.oCurrentTextNode = oTextNode;
- }
- else {
- // Cancel the display of the ContextMenu instance.
- this.cancel();
- }
- },
-
- /**
- * Set the CSS class for the newly selected class and update the form
- */
- setEditingTaskNode: function(node) {
-
- // Update CSS class
- if(this.oEditingTaskNode) {
- YAHOO.util.Dom.removeClass( this.oEditingTaskNode.getLabelEl(), "selectedTask" );
- }
- YAHOO.util.Dom.addClass( node.getLabelEl(), "selectedTask" );
-
- // Keep a reference to the last clicked node
- this.oEditingTaskNode = node;
-
- // Set the form values
- this.oTaskDetailsForm.setValue(this.oEditingTaskNode._taskDetails || {
- description: this.oEditingTaskNode.label,
- duedate: "",
- tags: "",
- comments: ""
- });
-
- }
-
- };
- // Init
- YAHOO.util.Event.addListener(window, 'load', TaskManager.init, TaskManager, true);