From c627ebb5735d55218813b073c655dae6cded6040 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 10 Feb 2012 15:50:14 -0800 Subject: show iframeContainer if all documents are closed Signed-off-by: Ananya Sen --- js/io/document/document-controller.js | 3 +++ js/io/system/chromeapi.js | 2 +- .../new-file-options-navigator.reel/new-file-options-navigator.js | 5 ++--- js/io/ui/save-as-dialog.reel/save-as-dialog.js | 4 ++-- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/js/io/document/document-controller.js b/js/io/document/document-controller.js index c2a2dab6..6dc7e670 100755 --- a/js/io/document/document-controller.js +++ b/js/io/document/document-controller.js @@ -293,6 +293,9 @@ var DocumentController = exports.DocumentController = Montage.create(Component, nextDocumentIndex = closeDocumentIndex - 1; } this.application.ninja.stage.stageView.switchDocument(this._documents[nextDocumentIndex]); + }else{ + //if there are no documents to switch to then just show the iframeContainer + document.getElementById("iframeContainer").style.display="block"; } } }, diff --git a/js/io/system/chromeapi.js b/js/io/system/chromeapi.js index eee7409d..e53d4841 100644 --- a/js/io/system/chromeapi.js +++ b/js/io/system/chromeapi.js @@ -180,7 +180,7 @@ exports.ChromeApi = Montage.create(Object.prototype, { //Checking for directory not to already exist this.fileSystem.root.getDirectory(directoryPath, {}, function(dir) { if (callback) callback(false); - return; //Directory already exists + return false; //Directory already exists }); //Creating new directory this.fileSystem.root.getDirectory(directoryPath, {create: true}, function(dir) { diff --git a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js index f514b81a..848e0cb8 100644 --- a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js +++ b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js @@ -226,7 +226,7 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C if(!!this.selectedProjectType && !!this.selectedTemplate && this.isValidFileName(projectName) && this.isValidUri(projectDirectory) - && !this.checkFileExists(projectName, projectDirectory, this.selectedProjectType) + && !this.checkFileExists(projectName, projectDirectory, fileExtension) ){ this.error.innerHTML=""; //console.log("$$$ new file selections: \n" + selectionlog); @@ -258,7 +258,7 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C this.popup.hide(); } }else{ - if(this.error.innerHTML !== ""){ + if(this.error.innerHTML === ""){ this.showError("! Project Template, Name and Directory should be valid."); } //disable ok @@ -328,7 +328,6 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C if(!!this.selectedProjectType && !!this.selectedTemplate && this.isValidFileName(this.newFileName) && this.isValidUri(this.newFileDirectory) - && !this.checkFileExists(this.newFileName, this.newFileDirectory, this.newFileModel.projectTypeData[this.selectedProjectType.uri].fileExtension) ){ status = true; this.okButton.removeAttribute("disabled"); diff --git a/js/io/ui/save-as-dialog.reel/save-as-dialog.js b/js/io/ui/save-as-dialog.reel/save-as-dialog.js index 4546e124..786ef5c9 100644 --- a/js/io/ui/save-as-dialog.reel/save-as-dialog.js +++ b/js/io/ui/save-as-dialog.reel/save-as-dialog.js @@ -89,7 +89,7 @@ var SaveAsDialog = exports.SaveAsDialog = Montage.create(Component, { enableOk:{ value: function(){ - if(this.isValidFileName(this.fileName) && this.isValidUri(this.folderUri) && !this.checkFileExists(this.fileName, this.folderUri)){ + if(this.isValidFileName(this.fileName) && this.isValidUri(this.folderUri)){ this.okButton.removeAttribute("disabled"); this.error.innerHTML=""; } @@ -141,7 +141,7 @@ var SaveAsDialog = exports.SaveAsDialog = Montage.create(Component, { } } }else{ - if(this.error.innerHTML !== ""){ + if(this.error.innerHTML === ""){ this.showError("! Name and Location should be valid."); } //disable ok -- cgit v1.2.3 From c48eeb01bd726895dc577d8b843b2a75883eee07 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 10 Feb 2012 16:03:52 -0800 Subject: Merge from /joseeight/ninja-internal/tree/FileIO Signed-off-by: Ananya Sen --- css/ninja.css | 12 +- js/components/button.reel/button.js | 2 +- js/components/editable.reel/editable.js | 250 +++ js/components/hintable.reel/hintable.js | 360 ++++ .../layout/bread-crumb.reel/bread-crumb.js | 108 +- js/components/package.json | 8 - .../text-properties.reel/text-properties.css | 30 +- .../text-properties.reel/text-properties.html | 326 ++-- .../text-properties.reel/text-properties.js | 236 ++- js/controllers/document-controller.js | 443 +++++ js/controllers/styles-controller.js | 4 + js/helper-classes/Utils.js | 33 - js/io/document/document-controller.js | 455 ------ js/io/document/html-document.js | 84 +- js/io/ui/cloudpopup.reel/cloudpopup.js | 3 + js/lib/NJUtils.js | 21 + js/mediators/element-mediator.js | 19 + js/ninja.reel/ninja.html | 14 +- js/panels/CSSPanel/CSSPanel.js | 6 +- js/panels/Resizer.js | 4 +- js/panels/Timeline/Collapser.js | 320 ++++ js/panels/Timeline/Keyframe.reel/Keyframe.html | 27 + js/panels/Timeline/Keyframe.reel/Keyframe.js | 154 ++ js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 15 + js/panels/Timeline/Layer.reel/Layer.html | 168 ++ js/panels/Timeline/Layer.reel/Layer.js | 626 +++++++ js/panels/Timeline/Layer.reel/css/Layer.css | 322 ++++ js/panels/Timeline/Layer.reel/images/eye.png | Bin 0 -> 1331 bytes .../Timeline/Layer.reel/images/icon-collapsed.png | Bin 0 -> 325 bytes js/panels/Timeline/Layer.reel/images/icon-eye.png | Bin 0 -> 550 bytes js/panels/Timeline/Layer.reel/images/icon-lock.png | Bin 0 -> 475 bytes .../Timeline/Layer.reel/images/icon-minus.png | Bin 0 -> 161 bytes js/panels/Timeline/Layer.reel/images/icon-open.png | Bin 0 -> 323 bytes js/panels/Timeline/Layer.reel/images/icon-plus.png | Bin 0 -> 230 bytes .../Timeline/Layer.reel/images/lock_closed.png | Bin 0 -> 1208 bytes js/panels/Timeline/Layer.reel/images/lock_open.png | Bin 0 -> 1186 bytes .../Layer.reel/images/panelDisclosureIcon.png | Bin 0 -> 3028 bytes js/panels/Timeline/Layer.reel/scss/Layer.scss | 220 +++ js/panels/Timeline/Layer.reel/scss/config.rb | 9 + js/panels/Timeline/Span.reel/Span.html | 27 + js/panels/Timeline/Span.reel/Span.js | 41 + js/panels/Timeline/Span.reel/css/Span.css | 11 + js/panels/Timeline/Style.reel/Style.html | 91 ++ js/panels/Timeline/Style.reel/Style.js | 648 ++++++++ js/panels/Timeline/Style.reel/css/Style.css | 133 ++ js/panels/Timeline/Style.reel/scss/Style.scss | 70 + js/panels/Timeline/Style.reel/scss/config.rb | 9 + js/panels/Timeline/TimelineController.js | 13 - .../Timeline/TimelinePanel.reel/TimelinePanel.css | 6 - .../Timeline/TimelinePanel.reel/TimelinePanel.html | 242 ++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1027 +++++++++--- .../TimelinePanel.reel/css/TimelinePanel.css | 251 +++ .../Timeline/TimelinePanel.reel/images/pause.png | Bin 0 -> 1076 bytes .../Timeline/TimelinePanel.reel/images/play.png | Bin 0 -> 1190 bytes .../TimelinePanel.reel/images/play_next.png | Bin 0 -> 1185 bytes .../TimelinePanel.reel/images/play_prev.png | Bin 0 -> 1199 bytes .../Timeline/TimelinePanel.reel/images/plus.png | Bin 0 -> 1133 bytes .../TimelinePanel.reel/images/timetick.jpg | Bin 0 -> 737 bytes .../Timeline/TimelinePanel.reel/images/trash.png | Bin 0 -> 1154 bytes .../Timeline/TimelineTrack.reel/TimelineTrack.html | 112 ++ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 433 +++++ .../TimelineTrack.reel/css/TimelineTrack.css | 117 ++ .../TimelineTrack.reel/images/gridline.jpg | Bin 0 -> 724 bytes .../TimelineTrack.reel/scss/TimelineTrack.scss | 65 + .../Timeline/TimelineTrack.reel/scss/config.rb | 9 + js/panels/Timeline/Track.reel/Track.html | 61 + js/panels/Timeline/Track.reel/Track.js | 186 +++ js/panels/Timeline/Track.reel/css/Track.css | 26 + js/panels/Timeline/Track.reel/images/gridline.jpg | Bin 0 -> 724 bytes .../Timeline/TrackSpacer.reel/TrackSpacer.html | 26 + js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js | 15 + .../Timeline/TrackSpacer.reel/css/TrackSpacer.css | 5 + js/panels/Timeline/Tween.reel/Tween.html | 48 + js/panels/Timeline/Tween.reel/Tween.js | 109 ++ js/panels/Timeline/Tween.reel/css/Tween.css | 4 + js/stage/stage.reel/stage.html | 12 +- js/stage/stage.reel/stage.js | 7 + js/tools/TextTool.js | 97 +- .../rich-text-editor.reel/rich-text-editor.css | 112 ++ .../rich-text-editor.reel/rich-text-editor.html | 27 + .../labs/rich-text-editor.reel/rich-text-editor.js | 1716 ++++++++++++++++++++ .../rich-text-editor.reel/rich-text-resizer.js | 349 ++++ .../rich-text-editor.reel/rich-text-sanitizer.js | 132 ++ .../labs/rich-text-editor.reel/shortcut-manager.js | 237 +++ scss/imports/scss/_Base.scss | 2 +- scss/imports/scss/_MainWindow.scss | 7 +- scss/imports/scss/_PanelUI.scss | 2 +- scss/imports/scss/_Stage.scss | 14 + scss/ninja.scss | 1 + .../montage-application-cloud/default_html.css | 1 + 90 files changed, 9791 insertions(+), 989 deletions(-) create mode 100644 js/components/editable.reel/editable.js create mode 100644 js/components/hintable.reel/hintable.js delete mode 100755 js/components/package.json create mode 100755 js/controllers/document-controller.js delete mode 100755 js/helper-classes/Utils.js delete mode 100755 js/io/document/document-controller.js create mode 100644 js/panels/Timeline/Collapser.js create mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.html create mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.js create mode 100644 js/panels/Timeline/Keyframe.reel/css/Keyframe.css create mode 100644 js/panels/Timeline/Layer.reel/Layer.html create mode 100644 js/panels/Timeline/Layer.reel/Layer.js create mode 100644 js/panels/Timeline/Layer.reel/css/Layer.css create mode 100644 js/panels/Timeline/Layer.reel/images/eye.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-collapsed.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-eye.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-lock.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-minus.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-open.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-plus.png create mode 100644 js/panels/Timeline/Layer.reel/images/lock_closed.png create mode 100644 js/panels/Timeline/Layer.reel/images/lock_open.png create mode 100644 js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png create mode 100644 js/panels/Timeline/Layer.reel/scss/Layer.scss create mode 100644 js/panels/Timeline/Layer.reel/scss/config.rb create mode 100644 js/panels/Timeline/Span.reel/Span.html create mode 100644 js/panels/Timeline/Span.reel/Span.js create mode 100644 js/panels/Timeline/Span.reel/css/Span.css create mode 100644 js/panels/Timeline/Style.reel/Style.html create mode 100644 js/panels/Timeline/Style.reel/Style.js create mode 100644 js/panels/Timeline/Style.reel/css/Style.css create mode 100644 js/panels/Timeline/Style.reel/scss/Style.scss create mode 100644 js/panels/Timeline/Style.reel/scss/config.rb delete mode 100755 js/panels/Timeline/TimelineController.js delete mode 100755 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css create mode 100644 js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/pause.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_next.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_prev.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/plus.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/trash.png create mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html create mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js create mode 100644 js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css create mode 100644 js/panels/Timeline/TimelineTrack.reel/images/gridline.jpg create mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss create mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/config.rb create mode 100644 js/panels/Timeline/Track.reel/Track.html create mode 100644 js/panels/Timeline/Track.reel/Track.js create mode 100644 js/panels/Timeline/Track.reel/css/Track.css create mode 100644 js/panels/Timeline/Track.reel/images/gridline.jpg create mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html create mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js create mode 100644 js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css create mode 100644 js/panels/Timeline/Tween.reel/Tween.html create mode 100644 js/panels/Timeline/Tween.reel/Tween.js create mode 100644 js/panels/Timeline/Tween.reel/css/Tween.css create mode 100644 node_modules/labs/rich-text-editor.reel/rich-text-editor.css create mode 100644 node_modules/labs/rich-text-editor.reel/rich-text-editor.html create mode 100644 node_modules/labs/rich-text-editor.reel/rich-text-editor.js create mode 100644 node_modules/labs/rich-text-editor.reel/rich-text-resizer.js create mode 100644 node_modules/labs/rich-text-editor.reel/rich-text-sanitizer.js create mode 100644 node_modules/labs/rich-text-editor.reel/shortcut-manager.js diff --git a/css/ninja.css b/css/ninja.css index a9a23d24..48590fc8 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -36,7 +36,7 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content: " button.nj-skinned { font-size: 9px; cursor: pointer; display: block; border: 0px; margin: 0px; padding: 4px; border: 1px #313131 solid; background-color: #474747; background-image: -webkit-linear-gradient(top, #505050 0%, #3c3c3c 100%); border-radius: 4px; color: white; text-transform: uppercase; cursor: pointer; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } -button.nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); } +button.nj-skinned:active, button.nj-skinned.active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); } button.nj-skinned:hover { -webkit-box-shadow: 0px 0px 3px #b4b4b4; } @@ -80,7 +80,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } -#bottomPanelContainer { background: transparent; min-height: 80px; max-height: 50%; overflow: auto; } +#bottomPanelContainer { background: transparent; height: 150px; min-height: 80px; max-height: 50%; overflow: auto; } .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; } @@ -164,8 +164,6 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #rightPanelContent { overflow-y: hidden; } -.contextMenu { position: absolute; z-index: 999; } - #openDocumentsTabComponent { height: 25px; position: relative; overflow: hidden; color: white; } #openDocuments { float: left; height: 25px; width: 100%; font-size: 12px; list-style: none; margin: 0; padding: 0; position: relative; text-decoration: none; } @@ -212,6 +210,10 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; } +.montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; } + +.montage-editor { padding: 0px; word-wrap: normal; } + .panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; } .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; } @@ -236,7 +238,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #toolPropertiesPanel { height: 32px; margin: 0px; } -#timelinePanel { height: 116px; } +#timelinePanel { height: 100%; } .treeComponent { -webkit-user-select: none; font-size: 11px; margin-left: 20px; cursor: default; color: white; } diff --git a/js/components/button.reel/button.js b/js/components/button.reel/button.js index ce5ac1af..2d26c8b4 100755 --- a/js/components/button.reel/button.js +++ b/js/components/button.reel/button.js @@ -179,7 +179,7 @@ var Button = exports.Button = Montage.create(Component, { value: function() { if(this.isToggleButton) { - if(this._value) + if(this._value === true) { this.element.classList.remove(this.offState); this.element.classList.add(this.onState); diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js new file mode 100644 index 00000000..1d0ad776 --- /dev/null +++ b/js/components/editable.reel/editable.js @@ -0,0 +1,250 @@ +/* ComputedStyleSubPanel.js */ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component; + + +/* + +EDITABLE - Methods +- startEdit +- stopEdit +- value +- +- _suggest +- _suggestNext +- _suggestPrev +- _clearSuggest +- _accept +- _revert +- _setCaret + +*/ + + +exports.Editable = Montage.create(Component, { + hasTemplate: { value: false }, + + _element : { value : null }, + element : { + get : function() { + return this._element; + }, + set : function(el) { + this._element = el; + this._element.addEventListener('keydown', this, false); + this._element.addEventListener('input', this, false); + + if(this.startOnEvent) { + this._element.addEventListener(this.startOnEvent, this, false); + } + + } + }, + _readOnly : { + value: false + }, + readOnly : { + get : function() { return this._readOnly; }, + set : function(makeReadOnly) { + var action = makeReadOnly ? 'add' : 'remove'; + + this._element.classList[action](this.readOnlyClass); + + if(this.isEditable) { + this.stop(); + } + this._readOnly = makeReadOnly; + } + }, + _isEditable : { + value : false + }, + isEditable : { + get : function() { + return this._isEditable; + }, + set: function(makeEditable) { + if(this._readOnly && makeEditable) { return false; } + this._isEditable = makeEditable; + } + }, + _isDirty : { + value: false + }, + isDirty : { + get : function() { + return this._isDirty; + }, + set : function(setDirty) { + if(setDirty) { + this._isDirty = true; + this._sendEvent('dirty'); + } else { + this._isDirty = false; + } + } + }, + value : { + get: function() { + return this._element.textContent; + }, + set: function(str) { + this._element.textContent = str; + } + }, + + ///// Pre Edit Value + ///// Value stored when editing starts + ///// Useful for reverting to previous value + + _preEditValue : { + value : null + }, + start : { + value: function() { + if(!this._readOnly) { + this._isEditable = this._element.contentEditable = true; + this._element.classList.add(this.editingClass); + + ///// Save the preEditValue + this._preEditValue = this.value; + + if(this.selectOnStart) { + this.selectAll(); + } + + if(this.stopOnBlur) { + console.log('adding mousedown event listener'); + ///// Simulate blur on editable node by listening to the doc + document.addEventListener('mouseup', this, false); + } + + this._sendEvent('start'); + } + + } + }, + stop : { + value: function() { + this._isEditable = this._element.contentEditable = false; + this._element.classList.remove(this.editingClass); + + this._sendEvent('stop'); + + ///// if value is different than pre-edit val, call onchange method + if(this._preEditValue !== this.value) { + this._sendEvent('change'); + } + } + }, + selectAll : { + value : function() { + var range = document.createRange(), + sel = window.getSelection(); + + sel.removeAllRanges(); + range.selectNodeContents(this._element); + sel.addRange(range); + } + }, + setCursor : { + value : function(position) { + var index = position, + range, node, sel; + + ///// argument can be "end" or an index + if(typeof position === 'string' && position === 'end') { + index = this.value.length; + } + + sel = window.getSelection(); + sel.removeAllRanges(); + //debugger; + node = this._getFirstTextNode(); + range = document.createRange(); + range.setStart(node, index); + range.setEnd(node, index); + sel.addRange(range); + } + }, + blur : { + value : function() { + if(this._hint) { + this.accept(); + } + this.stop(); + document.removeEventListener('mouseup', this, false); + this._sendEvent('blur'); + } + }, + + /* -------------------- User Event Handling -------------------- */ + + handleKeydown : { + value : function(e) { + var k = e.keyCode; + console.log('keyCode: ' + k); + } + }, + ///// Text input has changed values + handleInput : { + value : function(e) { + if(!this.isDirty) { + this.isDirty = true; + } + + this._sendEvent('input'); + } + }, + handleMouseup : { + value : function(e) { + console.log('handle mouse down'); + ///// Listen for simulated blur event + if(this.stopOnBlur && e._event.target !== this._element) { + this.blur(); + } + } + }, + handleEvent : { + value : function(e) { + console.log("event type : " + e._event.type); + ///// If configured, start on specified event + if(e._event.type === this.startOnEvent) { + this.start(); + } + } + }, + _sendEvent : { + value : function(type) { + var evt = document.createEvent("CustomEvent"); + evt.initCustomEvent(type, true, true); + this.dispatchEvent(evt); + } + }, + + /* -------------------- CONFIG -------------------- */ + + editingClass : { + value : 'editable' + }, + readOnlyClass : { + value : 'readOnly' + }, + selectOnStart : { + value : true + }, + startOnEvent : { + value : 'dblclick' + }, + stopOnBlur : { + value : true + }, + keyActions : { + value : { + stop : [27,9,13,186], + revert : [27], + backsp : [8] + } + } + +}); \ No newline at end of file diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js new file mode 100644 index 00000000..79813c92 --- /dev/null +++ b/js/components/hintable.reel/hintable.js @@ -0,0 +1,360 @@ +/* ComputedStyleSubPanel.js */ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component, + Editable = require("js/components/editable.reel").Editable; + + +/* + +EDITABLE - Methods +- startEdit +- stopEdit +- value +- +- _suggest +- _suggestNext +- _suggestPrev +- _clearSuggest +- _accept +- _revert +- _setCaret + +*/ + + +exports.Hintable = Montage.create(Editable, { + inheritsFrom : { value : Editable }, + _matchIndex : { value : 0 }, + matches : { value : [] }, + + _hint : { value : null }, + hint : { + get : function() { + return this._hint; + }, + set : function(hint) { + hint = hint || ''; + + ///// Set the hint element's text + this._getFirstTextNode(this.hintElement).textContent = hint; + ///// if hintElement was removed from the DOM, the object still + ///// exists, so it needs to be re-appended + if(this.hintElement.parentNode === null) { + this._element.appendChild(this.hintElement); + } + + this._hint = hint; + } + }, + + _hintElement : { value : null }, + hintElement : { + get : function() { + if(!this._hintElement) { + /// Remove the phantom "
" element that is generated when + /// content editable element is empty + this._children(this._element, function(item) { + return item.nodeName === 'BR'; + }).forEach(function(item) { + this._element.removeChild(item); + }, this); + + this._hintElement = document.createElement('span'); + this._hintElement.classList.add(this.hintClass); + + this._element.appendChild(this._hintElement); + } + + return this._hintElement; + }, + set : function(el) { + this._hintElement = el; + } + }, + + _getHintDifference : { + value : function() { + if(!this.matches[this._matchIndex]) { + debugger; + } + return this.matches[this._matchIndex].substr(this.value.length); + } + }, + + hintNext : { + value : function(e) { + if(e) { e.preventDefault(); } + console.log('next1'); + + if(this._matchIndex < this.matches.length - 1) { + console.log('next'); + ++this._matchIndex; + this.hint = this._getHintDifference(); + } + } + }, + hintPrev : { + value : function(e) { + if(e) { e.preventDefault(); } + console.log('prev1'); + if(this._matchIndex !== 0) { + console.log('prev'); + --this._matchIndex; + this.hint = this._getHintDifference(); + } + } + }, + + accept : { + value: function(e, preserveCaretPosition) { + if(e) { + e.preventDefault(); + } + var fullText = this._hint; + this.hint = null; + this.value += fullText; + + if(!preserveCaretPosition) { + this.setCursor('end'); + } + + this._sendEvent('accept'); + } + }, + revert : { + value : function(e, forceRevert) { + this.hint = null; + + if(this.isEditable || forceRevert) { + /// revert to old value + this.value = (this._preEditValue); + this._sendEvent('revert'); + console.log('reverting'); + + } + } + }, + value : { + get: function() { + return this._getFirstTextNode().textContent; + }, + set: function(str) { + var node = this._getFirstTextNode(); + node.textContent = str; + } + }, + + handleKeydown : { + value : function handleKeydown(e) { + var k = e.keyCode, + isCaretAtEnd, selection, text; + + this._super(arguments); + + if(k === 39) { + selection = window.getSelection(); + text = selection.baseNode.textContent; + isCaretAtEnd = (selection.anchorOffset === text.length); + } + + if(this.hint && isCaretAtEnd) { + ///// Advance the cursor + this.hint = this.hint.substr(0, 1); + this.accept(e); + this.handleInput(); + } + + this._execKeyAction(e); + } + }, + ///// Text input has changed values + handleInput : { + value : function handleInput(e) { + this._super(arguments); + + var val = this.value, + matches, hint; + console.log('val = "' + val + '"'); + //// Handle auto-suggest if configured + if(this.hints instanceof Array) { + + if(val.length > 0) { // content is not empty + + this._matchIndex = 0; + this.matches = this.hints.filter(function(h) { + return h.indexOf(val) === 0; + }).sort(); + + ///// If there are no matches, or the new value doesn't match all the + ///// previous matches, then get new list of matches + if(!this.matches.length || !this._matchesAll(val)) { + } + + if(this.matches.length) { // match(es) found + if(this.matches[this._matchIndex] !== val) { + // Suggest the matched hint, subtracting the typed-in string + // Only if the hint is not was the user has typed already + this.hint = this._getHintDifference(); + } else { + this.hint = null; + } + } else { // no matches found + this.hint = null; + } + } else { // no suggestion for empty string + this.hint = null; + } + + } + } + }, + handleBackspace : { + value : function(e) { + this.matches.length = 0; + } + }, + _matchesAll : { + value : function(value) { + return this.matches.every(function(match) { + return match.indexOf(value) === 0; + }, this); + } + }, + _execKeyAction : { + value : function(e) { + var key = e.keyCode, + keys = this.keyActions; + + if(this.hint) { + if( keys.hint.revert.indexOf(key) !== -1 ) { this.revert(e); } + if( keys.hint.accept.indexOf(key) !== -1 ) { this.accept(e); } + if( keys.hint.stop.indexOf(key) !== -1 ) { this.stop(e); } + if( keys.hint.next.indexOf(key) !== -1 ) { this.hintNext(e); } + if( keys.hint.prev.indexOf(key) !== -1 ) { this.hintPrev(e); } + if( keys.hint.backsp.indexOf(key) !== -1 ) { this.handleBackspace(e); } + } else { + if(keys.noHint.revert.indexOf(key) !== -1) { this.revert(e); } + if(keys.noHint.stop.indexOf(key) !== -1) { this.stop(e); } + //if( keys.hint.next.indexOf(key) !== -1 ) { this.handleDown(e); } + //if( keys.hint.prev.indexOf(key) !== -1 ) { this.handleUp(e); } + //if( keys.hint.backsp.indexOf(key) !== -1 ) { this.backspace(e); } + } + } + }, + + /* --------------- Utils --------------- */ + + _children : { + value : function(el, filter) { + var f = filter || function(item) { + return item.nodeType === 1; + }; + return this._toArray(el.childNodes).filter(f); + } + }, + _toArray : { + value : function(arrayLikeObj) { + return Array.prototype.slice.call(arrayLikeObj); + } + }, + _getFirstTextNode : { + value : function(el) { + ///// optional el argument specified container element + var e = el || this._element, + nodes = e.childNodes, node; + + if(nodes.length) { + for(var i=0; i" element that is generated when +// /// content editable element is empty +// this._children(this._element, function(item) { +// return item.nodeName === 'BR'; +// }).forEach(function(item) { +// this._element.removeChild(item); +// }, this); +// +// this.hintElement = document.createElement('span'); +// this.hintElement.classList.add(this.suggestClass); +// this.hintElement.appendChild(document.createTextNode(hint)); +// this._element.appendChild(this.hintElement); +// } +// +// this._hint = hint; +// } +// }, \ No newline at end of file diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js index 9782d9d1..ead7c764 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.js +++ b/js/components/layout/bread-crumb.reel/bread-crumb.js @@ -1,13 +1,8 @@ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component; +var Montage = require("montage/core/core").Montage +var Component = require("montage/ui/component").Component -exports.Breadcrumb = Montage.create(Component, { +var Breadcrumb = exports.Breadcrumb = Montage.create(Component, { _container:{ value:null @@ -16,10 +11,12 @@ exports.Breadcrumb = Montage.create(Component, { container: { set: function(value) { - if(this._container !== value) { - this._container = value; - this.createContainerElements(); - } + if(this._container !== value) { + this._container = value; + this.createContainerElements(); + } + + }, get: function() { return this._container; @@ -28,83 +25,132 @@ exports.Breadcrumb = Montage.create(Component, { containerElements: { value: [] + }, + deserializedFromTemplate : { value: function() { this.eventManager.addEventListener( "appLoaded", this, false); - this.eventManager.addEventListener( "openDocument", this, false); this.eventManager.addEventListener( "breadCrumbTrail", this, false); - } + }, + enumerable : false }, handleAppLoaded : { value: function() { + Object.defineBinding(this, "container", { boundObject: this.application.ninja, boundObjectPropertyPath: "currentSelectedContainer", oneway: false }); + + } + }, + + prepareForDraw: { + value: function() { + + } + }, + + draw: { + value: function() { + + } + }, + + didDraw:{ + value:function(){ } }, createContainerElements: { value: function() { + var parentNode; while(this.containerElements.pop()){ // To empty the array to get the new parentNode of the new currentLevel } - if(this.container.id === "UserContent") { + if(this.container.id === "UserContent"){ + this.containerElements.push({selected:false,element:this.container}); - } else { - parentNode = this.container; - while(parentNode.id !== "UserContent") { + } + else{ + + parentNode= this.container; + + while(parentNode.id!=="UserContent"){ + this.containerElements.unshift ({selected:false,element:parentNode}); - parentNode = parentNode.parentNode; + parentNode=parentNode.parentNode; + } - this.containerElements.unshift({selected:false,element:parentNode}); + this.containerElements.unshift({selected:false,element:parentNode}); } - NJevent('layerBinding',this.container); + NJevent('layerBinding',{selected:false ,element:this.container}) + + } }, - handleBreadCrumbTrail: { + handleBreadCrumbTrail: { value: function(event) { - var newLength, revaluatedLength, tmpvalue, i=0; + + var newLength,revaluatedLength,tmpvalue + var i=0; + if(event.detail.setFlag){ + this.application.ninja.currentSelectedContainer = event.detail.element; + return; + } newLength = this.containerElements.length; - while(i < newLength ) { - if(this.containerElements[i].selected){ - tmpvalue = i ; - break; - } + while(i < newLength ){ + + if(this.containerElements[i].selected){ + + tmpvalue = i ; + break; + + } i++; } - for(i = newLength -1 ; i >= 1 ; i--) { - if(tmpvalue!==i) { + + + for(i = newLength -1 ; i >= 1 ; i--){ + + if(tmpvalue!==i){ + this.containerElements.pop(); - } else { + } + + else{ + break; } + } revaluatedLength = this.containerElements.length; this.application.ninja.currentSelectedContainer = this.containerElements[revaluatedLength-1].element; + } } }); + diff --git a/js/components/package.json b/js/components/package.json deleted file mode 100755 index f3a6f0e0..00000000 --- a/js/components/package.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "directories": { - "lib": "../../" - }, - "mappings": { - "montage": "../../node_modules/montage/" - } -} \ No newline at end of file diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css index d581c6c3..6aa61812 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css @@ -5,29 +5,33 @@ */ .optionsTextTool { - display: -webkit-box; - -webkit-box-orient:horizontal; - -webkit-box-align: stretch; - padding: 5px; + padding: 6px; } - -.optionsTextTool > * { - -webkit-box-flex:0; +.optionsTextTool .btnGroup { + padding: 0px 8px; } -.optionsTextTool .button { - width: auto; - +.optionsTextTool > *, .optionsTextTool .btnGroup > * { + float:left; } -.optionsTextTool .hottextunit { - padding-top:5px; +.optionsTextTool button { + width: auto; + padding: 4px 8px !important; + margin-left:4px; } .optionsTextTool .label, .optionsTextTool .hottextunit { - float:none; font-size:11px; } +.optionsTextTool .fontSelection { + width:100px; +} +.optionsTextTool .fontColor { + width: 20px; + height: 18px; + margin: 2px 6px; +} \ No newline at end of file diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html index fb57c06d..7ded1236 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -33,8 +33,8 @@ "alignCenter": {"@": "alignCenter"}, "alignRight": {"@": "alignRight"}, "alignJustify": {"@": "alignJustify"}, - "indentRight": {"@": "indentRight"}, - "indentLeft": {"@": "indentLeft"}, + "indent": {"@": "indent"}, + "outdent": {"@": "outdent"}, "numberedList": {"@": "numberedList"}, "bulletedList": {"@": "bulletedList"} } @@ -57,8 +57,16 @@ "module": "js/components/combobox.reel", "name": "Combobox", "properties": { - "element": {"#": "fontSelection"} - } + "element": {"#": "fontSelection"}, + "identifier": "fontSelection" + }, + "listeners": [ + { + "type": "change", + "listener": {"@": "owner"} + } + ] + }, "fontSettings": { "module": "js/components/button.reel", @@ -69,131 +77,226 @@ }, "fontSize": { - "module": "js/components/hottextunit.reel", - "name": "HotTextUnit", + "module": "js/components/combobox.reel", + "name": "Combobox", "properties": { - "element": {"#": "fontSize"} - } - }, + "element": {"#": "fontSize"}, + "identifier": "fontSize" + }, + "listeners": [ + { + "type": "change", + "listener": {"@": "owner"} + } + ] - "fontColor": { - "module": "js/components/button.reel", - "name": "Button", - "properties": { - "element": {"#": "fontColor"} - } }, + "btnBold": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "btnBold"}, - "_isToggleButton": true - } + "pressedClass": "active", + "preventFocus": true, + "identifier": "btnBold", + "label": "B" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "btnItalic": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "btnItalic"}, - "_isToggleButton": true - } + "pressedClass": "active", + "preventFocus": true, + "identifier": "btnItalic", + "label": "I" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "btnUnderline": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "btnUnderline"}, - "_isToggleButton": true - } + "pressedClass": "active", + "preventFocus": true, + "identifier": "btnUnderline", + "label": "U" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "btnStrikethrough": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { "element": {"#": "btnStrikethrough"}, - "_isToggleButton": true - } + "pressedClass": "active", + "preventFocus": true, + "identifier": "btnStrikethrough", + "label": "S" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, - "txtLink": { - "module": "js/components/textfield.reel", - "name": "TextField", - "properties": { - "element": {"#": "txtLink"} - } - }, - "linkTarget": { - "module": "js/components/combobox.reel", - "name": "Combobox", - "properties": { - "element": {"#": "linkTarget"} - } - }, - + "alignLeft": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { - "element": {"#": "alignLeft"} - } + "element": {"#": "alignLeft"}, + "pressedClass": "active", + "preventFocus": true, + "identifier": "alignLeft", + "label": "Left" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "alignCenter": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { - "element": {"#": "alignCenter"} - } + "element": {"#": "alignCenter"}, + "pressedClass": "active", + "preventFocus": true, + "identifier": "alignCenter", + "label": "Center" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "alignRight": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { - "element": {"#": "alignRight"} - } + "element": {"#": "alignRight"}, + "pressedClass": "active", + "preventFocus": true, + "identifier": "alignRight", + "label": "Right" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "alignJustify": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { - "element": {"#": "alignJustify"} - } + "element": {"#": "alignJustify"}, + "pressedClass": "active", + "preventFocus": true, + "identifier": "alignJustify", + "label": "Justify" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, - "indentRight": { - "module": "js/components/button.reel", + "indent": { + "module": "montage/ui/button.reel", "name": "Button", "properties": { - "element": {"#": "indentRight"} - } + "element": {"#": "indent"}, + "pressedClass": "active", + "preventFocus": true, + "identifier": "outdent", + "label": ">>" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, - "indentLeft": { - "module": "js/components/button.reel", + "outdent": { + "module": "montage/ui/button.reel", "name": "Button", "properties": { - "element": {"#": "indentLeft"} - } + "element": {"#": "outdent"}, + "pressedClass": "active", + "preventFocus": true, + "identifier": "<<", + "label": "<<" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "bulletedList": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { - "element": {"#": "bulletedList"} - } + "element": {"#": "bulletedList"}, + "pressedClass": "active", + "preventFocus": true, + "identifier": "bulletedList", + "label": "• • •" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] }, "numberedList": { - "module": "js/components/button.reel", - "name": "Button", + "module": "montage/ui/toggle-button.reel", + "name": "ToggleButton", "properties": { - "element": {"#": "numberedList"} - } - }, - "fontColor": { - "module" : "js/components/ui/color-chip.reel", - "name" : "ColorChip", - "properties" : { - "element" : {"#": "fontColor"}, - "mode": "chip" - } - } + "element": {"#": "numberedList"}, + "pressedClass": "active", + "preventFocus": true, + "identifier": "numberedList", + "label": "1 2 3" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"} + } + ] + } } @@ -202,33 +305,36 @@
- - - - + + + + - - + + - - - - - - - - -
- - - +
+
+ + + + +
+
+ + + + +
+
+ + +
+
+ +
- - - - -
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js index 313693b1..55274322 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -25,26 +25,25 @@ exports.TextProperties = Montage.create(ToolProperties, { alignCenter: {value: null}, alignRight: {value: null}, alignJustify: {value: null}, - indentRight: {value: null}, - indentLeft: {value: null}, + indent: {value: null}, + outdent: {value: null}, numberedList: {value: null}, bulletedList: {value: null}, prepareForDraw: { value: function() { - this.linkTarget.items = ["Target","_blank","_self","_parent", "_top"]; - this.fontSettings.label = "Settings"; - this.btnBold.label = "Bold"; - this.btnItalic.label = "Italic"; - this.btnUnderline.label = "Underline"; - this.btnStrikethrough.label = "Strikethrough"; - this.alignLeft.label = "Left"; - this.alignCenter.label = "Center"; - this.alignRight.label = "Right"; - this.alignJustify.label = "Justify"; + this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; + this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; + this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; } }, - + + handleEditorSelect: { + value: function(e) { + this.application.ninja.stage.textTool.updateStates(); + } + }, + _subPrepare: { value: function() { //this.divElement.addEventListener("click", this, false); @@ -54,6 +53,217 @@ exports.TextProperties = Montage.create(ToolProperties, { handleClick: { value: function(event) { // this.selectedElement = event._event.target.id; + + } + }, + + handleBtnBoldAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("bold"); + } + }, + + handleBtnItalicAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("italic"); + } + }, + + handleBtnUnderlineAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("underline"); + } + }, + + handleBtnStrikethroughAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("strikethrough"); + } + }, + + handleAlignLeftAction: { + value: function(e) { + //this.alignLeft.value = false; + this.alignCenter.value = false; + this.alignRight.value = false; + this.alignJustify.value = false; + this.application.ninja.stage.textTool.doAction("justifyleft"); + } + }, + + handleAlignCenterAction: { + value: function(e) { + this.alignLeft.value = false; + //this.alignCenter.value = false; + this.alignRight.value = false; + this.alignJustify.value = false; + this.application.ninja.stage.textTool.doAction("justifycenter"); + } + }, + + handleAlignRightAction: { + value: function(e) { + this.alignLeft.value = false; + this.alignCenter.value = false; + //this.alignRight.value = false; + this.alignJustify.value = false; + this.application.ninja.stage.textTool.doAction("justifyright"); + } + }, + + handleAlignJustifyAction: { + value: function(e) { + this.alignLeft.value = false; + this.alignCenter.value = false; + this.alignRight.value = false; + //this.alignJustify.value = false; + this.application.ninja.stage.textTool.doAction("justifyfull"); + } + }, + + handleIndentAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("