First commit of Ninja to ninja-internal

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>

1 files changed, 269 insertions, 0 deletions

diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.js b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
new file mode 100644
index 00000000..4c1c0977
--- /dev/null
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
@@ -0,0 +1,269 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+
+exports.TreeItem = Montage.create(Component, {
+
+    _treeItemData:{
+        enumerable : false,
+        value:null
+    },
+    treeItemData:{
+        get:function(){
+            return this._treeItemData;
+        },
+        set:function(value){
+            this._treeItemData = value;
+            this.needsDraw = true;
+        }
+    },
+
+    showIcon :{
+        writable:true,
+        enumerable:true,
+        value:true
+    },
+
+    directoryBold :{
+        writable:true,
+        enumerable:true,
+        value:false
+    },
+
+    metadata:{
+           enumerable:true,
+           writable:true,
+           value:null
+       },
+    willDraw: {
+        enumerable: false,
+        value: function() {
+            var that = this;
+            this.itemName.innerHTML = this.treeItemData.name;
+
+            if(this.showIcon === false){
+                this.itemImg.style.display = "none";
+            }else{
+                if(this.treeItemData.type === "directory"){
+                    this.itemImg.src = this.imgStore.img_root + this.imgStore.directory;
+                }else{
+                    var fileImg = "";
+                    //get extension to map again right icon image
+                    var extension = this.treeItemData.name.substring(this.treeItemData.name.lastIndexOf(".")).toLowerCase();
+                    if(typeof this.imgStore[extension] !== "undefined"){
+                        fileImg = this.imgStore.img_root + this.imgStore[extension];
+                    }else{
+                        fileImg = this.imgStore.img_root + this.imgStore.file_default;
+                    }
+                    this.itemImg.src = fileImg;
+                }
+            }
+
+            if(this.treeItemData.type === "directory"){
+                this.treeArrow.classList.remove("hidden");
+                if(this.directoryBold === true){
+                    this.itemName.classList.add("bold");
+                }
+            }
+        }
+    },
+    draw: {
+        enumerable: false,
+        value: function() {
+
+        }
+    },
+    didDraw: {
+        enumerable: false,
+        value: function() {
+            var that = this;
+            this.element.identifier = "treeItem";
+            this.treeArrow.identifier = "treeArrow";
+
+            //add arrow click handler for directory
+            if(this.treeItemData.type === "directory"){
+                this.treeArrow.addEventListener("click", this, false);
+            }
+
+            //icon or text click sends selection event
+            var contentEls = this.element.querySelectorAll(".atreeItemContent");
+            for(var i=0;i<contentEls.length;i++){
+                contentEls[i].addEventListener("click", function(evt){that.handleTreeItemContentClick(evt);}, false);
+                contentEls[i].addEventListener("dblclick", function(evt){that.handleTreeItemContentDblclick(evt);}, false);
+            }
+
+            this.element.addEventListener("mouseover", function(evt){that.handleTreeItemMouseover(evt);}, false);
+
+            //prepare metadata string
+            if(this.treeItemData.name !== ""){
+                this.metadata = "Name: "+this.treeItemData.name;
+            }
+            this.metadata = this.metadata + "<br />" + "Type: "+this.treeItemData.type;
+            if(this.treeItemData.size){this.metadata = this.metadata + "<br />" + "Size: "+this.treeItemData.size;}
+            if(this.treeItemData.creationDate){this.metadata = this.metadata + "<br />" + "Creation date: "+ this.formatTimestamp(this.treeItemData.creationDate);}
+            if(this.treeItemData.modifiedDate){this.metadata = this.metadata + "<br />" + "Modified date: "+ this.formatTimestamp(this.treeItemData.modifiedDate);}
+        }
+    },
+
+    toggleContent:{
+        writable:false,
+        enumerable:true,
+        value:function(el){
+            //if children already drawn then just hide/show
+            if(this.element.getElementsByTagName("ul").length > 0){
+                var theParent = this.element.getElementsByTagName("ul")[0].parentNode;
+                if(theParent.classList.contains("hideTree")){//collapsed
+
+//                    //check if content has changed and refresh if yes
+//                    var refreshTreeSegmentEvent = document.createEvent("Events");
+//                    refreshTreeSegmentEvent.initEvent("refreshTreeSegment", false, false);
+//                    refreshTreeSegmentEvent.uri = this.treeItemData.uri;
+//                    refreshTreeSegmentEvent.type = this.treeItemData.type;
+//                    refreshTreeSegmentEvent.treeSegment = this.element.querySelector(".atree");
+//                    this.element.dispatchEvent(refreshTreeSegmentEvent);
+
+                    theParent.classList.remove("hideTree");//expand
+                    el.innerHTML = "&#9660;";
+                }else{//expanded
+                    theParent.classList.add("hideTree");//collapse
+                    el.innerHTML = "&#9654;";
+                }
+            }
+            //else send event to draw the children
+            else{
+                var treeClickEvent = document.createEvent("Events");
+                treeClickEvent.initEvent("drawTree", false, false);
+                treeClickEvent.uri = this.treeItemData.uri;
+                treeClickEvent.uriType = this.treeItemData.type;
+                var divEl = document.createElement("div");
+                this.element.appendChild(divEl);
+                treeClickEvent.subTreeContainer = divEl;
+                this.element.dispatchEvent(treeClickEvent);
+
+                el.innerHTML = "&#9660;";
+            }
+        }
+    },
+
+    /**
+     * Event Listeners
+     */
+
+    handleTreeArrowClick : {
+        value:  function(evt){
+                    this.toggleContent(evt.target);
+
+                    if(evt.bubbles){
+                        evt.stopPropagation();
+                    }
+                }
+    },
+
+    handleTreeItemMouseover:{
+        value:function(evt){
+                    //console.log(that.element.querySelector(".name").innerHTML);
+                    var showMetadataEvent = document.createEvent("Events");
+                    showMetadataEvent.initEvent("showMetadata", false, false);
+                    showMetadataEvent.metadata = this.metadata;
+                    this.element.dispatchEvent(showMetadataEvent);
+
+                    if(evt.bubbles){
+                        evt.stopPropagation();
+                    }
+
+                }
+    },
+
+    handleTreeItemContentClick:{
+        value: function(evt){
+                    var selectedItemEvent = document.createEvent("Events");
+                    selectedItemEvent.initEvent("selectedItem", false, false);
+                    selectedItemEvent.uri = this.treeItemData.uri;
+                    this.itemName.dispatchEvent(selectedItemEvent);
+
+                    var showMetadataEvent = document.createEvent("Events");
+                    showMetadataEvent.initEvent("updateMetadata", false, false);
+                    showMetadataEvent.metadata = this.metadata;
+                    this.element.dispatchEvent(showMetadataEvent);
+
+                    if(evt.bubbles){
+                        evt.stopPropagation();
+                    }
+                }
+    },
+
+    handleTreeItemContentDblclick:{
+        value: function(evt){
+                    if(this.treeItemData.type === "directory"){
+                        var openFolderEvent = document.createEvent("Events");
+                        openFolderEvent.initEvent("openFolder", false, false);
+                        openFolderEvent.folderUri = this.treeItemData.uri;
+                        this.element.dispatchEvent(openFolderEvent);
+                    }
+                    if(evt.bubbles){