From 4c3aac5eabd93052b1554a03d78235215bb49db4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 29 May 2012 00:34:40 -0700 Subject: document bindings phase 1 - using array controller to bind the current document to all ninja components - removed open document event - removed references to the document controller Signed-off-by: Valerio Virgillito --- .../layout/bread-crumb.reel/bread-crumb.js | 44 +++++++++++++++++--- .../layout/document-bar.reel/document-bar.html | 6 +-- .../layout/document-bar.reel/document-bar.js | 48 +++++++++++++++++----- .../layout/document-entry.reel/document-entry.css | 22 +++++++--- .../layout/document-entry.reel/document-entry.html | 14 +++++-- .../layout/document-entry.reel/document-entry.js | 44 +++++++------------- .../layout/documents-tab.reel/documents-tab.html | 13 +++--- .../layout/documents-tab.reel/documents-tab.js | 5 +++ .../layout/tools-list.reel/tools-list.html | 6 +-- js/components/layout/tools-list.reel/tools-list.js | 39 +++++++++++++++--- .../tools-properties.reel/tools-properties.js | 42 +++++++++++++++---- js/components/menu/menu-item.reel/menu-item.js | 6 ++- js/components/menu/menu.reel/menu.html | 20 ++------- 13 files changed, 204 insertions(+), 105 deletions(-) (limited to 'js/components') diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js index 49dbe3cb..74e89ac1 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.js +++ b/js/components/layout/bread-crumb.reel/bread-crumb.js @@ -9,13 +9,45 @@ var Montage = require("montage/core/core").Montage, exports.Breadcrumb = Montage.create(Component, { - disabled: { + _currentDocument: { + enumerable: false, + value: null + }, + + currentDocument: { + enumerable: false, + get: function() { + return this._currentDocument; + }, + set: function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + if(!this._currentDocument) { + this.disabled = true; + } + + this.disabled = this._currentDocument.currentView !== "design"; + + } + }, + + + _disabled: { value: true }, - handleOpenDocument: { - value: function(){ - this.disabled = false; + disabled: { + get: function() { + return this._disabled; + }, + set: function(value) { + if(value !== this._disabled) { + this._disabled = value; + } } }, @@ -50,7 +82,6 @@ exports.Breadcrumb = Montage.create(Component, { prepareForDraw: { value: function() { - this.eventManager.addEventListener("openDocument", this, false); this.eventManager.addEventListener("closeDocument", this, false); this.breadcrumbBt.addEventListener("action", this, false); } @@ -65,7 +96,7 @@ exports.Breadcrumb = Montage.create(Component, { parentNode = this.container; - while(parentNode !== this.application.ninja.currentDocument.model.documentRoot) { + while(parentNode !== this.currentDocument.model.documentRoot) { this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName}); parentNode = parentNode.parentNode; } @@ -87,6 +118,7 @@ exports.Breadcrumb = Montage.create(Component, { this.containerElements.pop(); } + // TODO: This is bound 2 ways, update the internal property this.application.ninja.currentSelectedContainer = this.containerElements[i].node; } } diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html index 760186ba..a35b5590 100755 --- a/js/components/layout/document-bar.reel/document-bar.html +++ b/js/components/layout/document-bar.reel/document-bar.html @@ -37,11 +37,7 @@ "element": {"#": "disabledCondition"} }, "bindings": { - "condition": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "disabled", - "oneway": true - } + "condition": {"<-": "@owner.disabled"} } }, diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index 56b61f1d..6a7b0f3f 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -9,13 +9,32 @@ var Component = require("montage/ui/component").Component; exports.DocumentBar = Montage.create(Component, { + _currentDocument: { + enumerable: false, + value: null + }, + + currentDocument: { + enumerable: false, + get: function() { + return this._currentDocument; + }, + set: function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + this.disabled = !this._currentDocument; + + } + }, + designView: { value: null, enumerable: false}, codeView: { value: null, enumerable: false}, zoomControl: { value: null, enumerable: false }, _type: { enumerable: false, value: null }, - disabled: { value: true }, - - type: { enumerable: false, @@ -86,7 +105,6 @@ exports.DocumentBar = Montage.create(Component, { prepareForDraw: { value: function() { - this.eventManager.addEventListener( "openDocument", this, false); this.eventManager.addEventListener( "closeDocument", this, false); this.designView.addEventListener("click", this, false); this.codeView.addEventListener("click", this, false); @@ -94,6 +112,22 @@ exports.DocumentBar = Montage.create(Component, { } }, + _disabled: { + value: true + }, + + disabled: { + get: function() { + return this._disabled; + }, + set: function(value) { + if(value !== this._disabled) { + this._disabled = value; + } + } + }, + + handleClick: { value: function(event) { if(event._event.target.id === this.currentView) return; @@ -103,12 +137,6 @@ exports.DocumentBar = Montage.create(Component, { } }, - handleOpenDocument: { - value: function() { - this.disabled = false; - } - }, - handleCloseDocument: { value: function() { if(!this.application.ninja.documentController.activeDocument) { diff --git a/js/components/layout/document-entry.reel/document-entry.css b/js/components/layout/document-entry.reel/document-entry.css index 4601974f..010e1da7 100755 --- a/js/components/layout/document-entry.reel/document-entry.css +++ b/js/components/layout/document-entry.reel/document-entry.css @@ -19,7 +19,20 @@ min-width:0px; } -.documentEntry img { +.mybutton { + display: inline; + -webkit-appearance: none; + outline: none; + + font-size: 9px; + cursor: pointer; + border: 0px; + background-color: #474747; + background-image: -webkit-linear-gradient(top, #505050 0%, #3c3c3c 100%); + +} + +.documentEntry button { opacity: 0.5; /* 50% */ width: 12px; max-width:12px; @@ -29,17 +42,14 @@ transition: opacity 0.2s ease; } -.documentEntry:hover, -.documentEntry:active, -.documentEntry.activeTab { - /*background-color: #7f7f7f; *//* rgb(127, 127, 127); */ +.documentEntry.selected { + background-color:#7F7F7F; } .documentEntry img:hover { opacity: 1.0; /* 100% */ } - .documentEntry span.dirty:before{ content: "*"; display:inline; diff --git a/js/components/layout/document-entry.reel/document-entry.html b/js/components/layout/document-entry.reel/document-entry.html index 679ebb62..bd8c25cb 100755 --- a/js/components/layout/document-entry.reel/document-entry.html +++ b/js/components/layout/document-entry.reel/document-entry.html @@ -15,8 +15,14 @@ "prototype": "js/components/layout/document-entry.reel", "properties": { "element": {"#": "documentEntry"}, - "label": {"#": "name"}, - "activeBack": {"#": "isActive"} + "label": {"#": "name"} + } + }, + + "closeButton": { + "prototype": "montage/ui/button.reel", + "properties": { + "element": {"#": "close-btn"} } } } @@ -24,9 +30,9 @@
  • -
    - + +
    • \ No newline at end of file diff --git a/js/components/layout/document-entry.reel/document-entry.js b/js/components/layout/document-entry.reel/document-entry.js index 50b3624c..2e66c7cd 100755 --- a/js/components/layout/document-entry.reel/document-entry.js +++ b/js/components/layout/document-entry.reel/document-entry.js @@ -58,25 +58,6 @@ exports.DocumentEntry = Montage.create(Component, { } }, - _active: { - enumerable: false, - value: null - }, - - active: { - get: function() { - return this._active; - }, - set: function(value) { - var previousValue = this._active; - this._active = value; - - if (previousValue !== this._active) { - this.needsDraw = true; - } - } - }, - _saveFlag: { value: false }, @@ -96,7 +77,8 @@ exports.DocumentEntry = Montage.create(Component, { prepareForDraw: { enumerable: false, value: function() { - this.element.addEventListener("click", this, false); +// this.element.addEventListener("click", this, false); +// this.closeBtn.addEventListener("click", this, true); } }, @@ -106,7 +88,7 @@ exports.DocumentEntry = Montage.create(Component, { value: function() { this.label.innerText = this._name ? this._name : ""; - this._active ? this.element.classList.add("activeTab") : this.element.classList.remove("activeTab"); +// this._active ? this.element.classList.add("activeTab") : this.element.classList.remove("activeTab"); if(this.saveFlag) { this.label.classList.add("dirty"); @@ -116,15 +98,19 @@ exports.DocumentEntry = Montage.create(Component, { } }, - handleClick: { + captureClick: { value: function(event) { - if(event._event.target.nodeName === "IMG") { - this.application.ninja.documentController.closeFile(this.application.ninja.documentController._findDocumentByUUID(this._uuid)); - } else { - if(!this.active) { - this.application.ninja.documentController.switchDocuments(this.application.ninja.currentDocument, this.application.ninja.documentController._findDocumentByUUID(this._uuid)); - } - } + console.log("clicked on the X"); + event.preventDefault(); + event.stopImmediatePropagation(); + event.stopPropagation(); +// if(event._event.target.nodeName === "IMG") { +// this.application.ninja.documentController.closeFile(this.application.ninja.documentController._findDocumentByUUID(this._uuid)); +// } else { +// if(!this.active) { +// this.application.ninja.documentController.switchDocuments(this.application.ninja.currentDocument, this.application.ninja.documentController._findDocumentByUUID(this._uuid)); +// } +// } } } diff --git a/js/components/layout/documents-tab.reel/documents-tab.html b/js/components/layout/documents-tab.reel/documents-tab.html index 304c8871..04b2bd7b 100755 --- a/js/components/layout/documents-tab.reel/documents-tab.html +++ b/js/components/layout/documents-tab.reel/documents-tab.html @@ -28,22 +28,19 @@ "bindings": { "document": {"<-": "@repetition1.objectAtCurrentIteration"}, "name": {"<-": "@repetition1.objectAtCurrentIteration.model.file.name"}, - "saveFlag": {"<-": "@repetition1.objectAtCurrentIteration.model.needsSave"}, - "active": {"<-": "@repetition1.objectAtCurrentIteration.model.isActive"} + "saveFlag": {"<-": "@repetition1.objectAtCurrentIteration.model.needsSave"} } }, "repetition1": { "prototype": "montage/ui/repetition.reel", "properties": { - "element": {"#": "openDocuments"} + "element": {"#": "openDocuments"}, + "isSelectionEnabled": true }, "bindings": { - "objects": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "openDocuments", - "oneway": true - } + + "contentController": {"<-": "@owner.contentController"} } } diff --git a/js/components/layout/documents-tab.reel/documents-tab.js b/js/components/layout/documents-tab.reel/documents-tab.js index 982f6ecd..0be639db 100755 --- a/js/components/layout/documents-tab.reel/documents-tab.js +++ b/js/components/layout/documents-tab.reel/documents-tab.js @@ -9,6 +9,7 @@ var Component = require("montage/ui/component").Component; exports.DocumentsTab = Montage.create(Component, { + /* openDocuments: { value: [] }, @@ -40,4 +41,8 @@ exports.DocumentsTab = Montage.create(Component, { } } + */ + contentController: { + value: null + } }); \ No newline at end of file diff --git a/js/components/layout/tools-list.reel/tools-list.html b/js/components/layout/tools-list.reel/tools-list.html index df603bf8..4e5b85ee 100755 --- a/js/components/layout/tools-list.reel/tools-list.html +++ b/js/components/layout/tools-list.reel/tools-list.html @@ -102,11 +102,7 @@ "element": {"#": "disabledCondition"} }, "bindings": { - "condition": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "disabled", - "oneway": true - } + "condition": {"<-": "@owner.disabled"} } }, diff --git a/js/components/layout/tools-list.reel/tools-list.js b/js/components/layout/tools-list.reel/tools-list.js index a10b6c3e..638aea41 100755 --- a/js/components/layout/tools-list.reel/tools-list.js +++ b/js/components/layout/tools-list.reel/tools-list.js @@ -26,11 +26,41 @@ exports.ToolsList = Montage.create(Component, { RotateStageTool3D: { value: null }, PanTool: { value: null }, ZoomTool: { value: null }, - disabled: { value: true}, - handleOpenDocument: { - value: function(){ - this.disabled = false; + _currentDocument: { + enumerable: false, + value: null + }, + + currentDocument: { + enumerable: false, + get: function() { + return this._currentDocument; + }, + set: function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + this.disabled = !this._currentDocument; + + } + }, + + _disabled: { + value: true + }, + + disabled: { + get: function() { + return this._disabled; + }, + set: function(value) { + if(value !== this._disabled) { + this._disabled = value; + } } }, @@ -45,7 +75,6 @@ exports.ToolsList = Montage.create(Component, { prepareForDraw: { enumerable: false, value: function() { - this.eventManager.addEventListener( "openDocument", this, false); this.eventManager.addEventListener( "closeDocument", this, false); this.PenTool.options = this.application.ninja.toolsProperties.shapeProperties.lineProperties;//this.application.Ninja.toolsProperties.penProperties; diff --git a/js/components/layout/tools-properties.reel/tools-properties.js b/js/components/layout/tools-properties.reel/tools-properties.js index 47945b58..c25559ae 100755 --- a/js/components/layout/tools-properties.reel/tools-properties.js +++ b/js/components/layout/tools-properties.reel/tools-properties.js @@ -9,10 +9,43 @@ var Component = require("montage/ui/component").Component; exports.ToolsProperties = Montage.create(Component, { - disabled: { + _currentDocument: { + enumerable: false, + value: null + }, + + currentDocument: { + enumerable: false, + get: function() { + return this._currentDocument; + }, + set: function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + this.disabled = !this._currentDocument; + + } + }, + + _disabled: { value: true }, + disabled: { + get: function() { + return this._disabled; + }, + set: function(value) { + if(value !== this._disabled) { + this._disabled = value; + } + } + }, + handleCloseDocument: { value: function(){ if(!this.application.ninja.documentController.activeDocument) { @@ -21,16 +54,9 @@ exports.ToolsProperties = Montage.create(Component, { } }, - handleOpenDocument: { - value: function() { - this.disabled = false; - } - }, - prepareForDraw: { enumerable: false, value: function() { - this.eventManager.addEventListener( "openDocument", this, false); this.eventManager.addEventListener( "closeDocument", this, false); } }, diff --git a/js/components/menu/menu-item.reel/menu-item.js b/js/components/menu/menu-item.reel/menu-item.js index fc3913b8..9c18ed37 100755 --- a/js/components/menu/menu-item.reel/menu-item.js +++ b/js/components/menu/menu-item.reel/menu-item.js @@ -82,7 +82,7 @@ exports.MenuItem = Montage.create(Component, { }); } - +/* if(this.data.enabled.boundProperty) { boundObject = this.application.ninja[this.data.enabled.boundObj]; @@ -95,9 +95,11 @@ exports.MenuItem = Montage.create(Component, { }); } else { + */ this.enabled = this.data.enabled; + /* } - + */ if(this.data.submenu) { this.submenu = true; diff --git a/js/components/menu/menu.reel/menu.html b/js/components/menu/menu.reel/menu.html index 49956f8a..7f2aeeef 100755 --- a/js/components/menu/menu.reel/menu.html +++ b/js/components/menu/menu.reel/menu.html @@ -21,11 +21,7 @@ "automaticallyOrganizeObjects": false }, "bindings": { - "content": { - "boundObject": {"@": "menudata"}, - "boundObjectPropertyPath": "topLevelMenu", - "oneway": true - } + "content": {"<-": "@menudata.topLevelMenu"} } }, @@ -44,18 +40,8 @@ "element": { "#": "menuItem" } }, "bindings": { - "data": { - "boundObject": {"@": "repetition"}, - "boundObjectPropertyPath": "objectAtCurrentIteration", - "oneway": true - }, - "_menu": { - "boundObject": {"@": "repetition"}, - "boundObjectPropertyPath": "menuComponent", - "oneway": true - } - - + "data": {"<-": "@repetition.objectAtCurrentIteration"}, + "_menu": {"<-": "@repetition.menuComponent"} } }, -- cgit v1.2.3