From f3dc624fa464a79fd8e8cec1ddd16ed2109bda23 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 10 Feb 2012 16:05:27 -0800 Subject: Revert "Merge from /joseeight/ninja-internal/tree/FileIO" This reverts commit c48eeb01bd726895dc577d8b843b2a75883eee07. 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 1331 -> 0 bytes .../Timeline/Layer.reel/images/icon-collapsed.png | Bin 325 -> 0 bytes js/panels/Timeline/Layer.reel/images/icon-eye.png | Bin 550 -> 0 bytes js/panels/Timeline/Layer.reel/images/icon-lock.png | Bin 475 -> 0 bytes .../Timeline/Layer.reel/images/icon-minus.png | Bin 161 -> 0 bytes js/panels/Timeline/Layer.reel/images/icon-open.png | Bin 323 -> 0 bytes js/panels/Timeline/Layer.reel/images/icon-plus.png | Bin 230 -> 0 bytes .../Timeline/Layer.reel/images/lock_closed.png | Bin 1208 -> 0 bytes js/panels/Timeline/Layer.reel/images/lock_open.png | Bin 1186 -> 0 bytes .../Layer.reel/images/panelDisclosureIcon.png | Bin 3028 -> 0 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 1076 -> 0 bytes .../Timeline/TimelinePanel.reel/images/play.png | Bin 1190 -> 0 bytes .../TimelinePanel.reel/images/play_next.png | Bin 1185 -> 0 bytes .../TimelinePanel.reel/images/play_prev.png | Bin 1199 -> 0 bytes .../Timeline/TimelinePanel.reel/images/plus.png | Bin 1133 -> 0 bytes .../TimelinePanel.reel/images/timetick.jpg | Bin 737 -> 0 bytes .../Timeline/TimelinePanel.reel/images/trash.png | Bin 1154 -> 0 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 724 -> 0 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 724 -> 0 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, 989 insertions(+), 9791 deletions(-) delete mode 100644 js/components/editable.reel/editable.js delete mode 100644 js/components/hintable.reel/hintable.js create mode 100755 js/components/package.json delete mode 100755 js/controllers/document-controller.js create mode 100755 js/helper-classes/Utils.js create mode 100755 js/io/document/document-controller.js delete mode 100644 js/panels/Timeline/Collapser.js delete mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.html delete mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.js delete mode 100644 js/panels/Timeline/Keyframe.reel/css/Keyframe.css delete mode 100644 js/panels/Timeline/Layer.reel/Layer.html delete mode 100644 js/panels/Timeline/Layer.reel/Layer.js delete mode 100644 js/panels/Timeline/Layer.reel/css/Layer.css delete mode 100644 js/panels/Timeline/Layer.reel/images/eye.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-collapsed.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-eye.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-lock.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-minus.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-open.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-plus.png delete mode 100644 js/panels/Timeline/Layer.reel/images/lock_closed.png delete mode 100644 js/panels/Timeline/Layer.reel/images/lock_open.png delete mode 100644 js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png delete mode 100644 js/panels/Timeline/Layer.reel/scss/Layer.scss delete mode 100644 js/panels/Timeline/Layer.reel/scss/config.rb delete mode 100644 js/panels/Timeline/Span.reel/Span.html delete mode 100644 js/panels/Timeline/Span.reel/Span.js delete mode 100644 js/panels/Timeline/Span.reel/css/Span.css delete mode 100644 js/panels/Timeline/Style.reel/Style.html delete mode 100644 js/panels/Timeline/Style.reel/Style.js delete mode 100644 js/panels/Timeline/Style.reel/css/Style.css delete mode 100644 js/panels/Timeline/Style.reel/scss/Style.scss delete mode 100644 js/panels/Timeline/Style.reel/scss/config.rb create mode 100755 js/panels/Timeline/TimelineController.js create mode 100755 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css delete mode 100644 js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/pause.png delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play.png delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_next.png delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_prev.png delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/plus.png delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/trash.png delete mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html delete mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js delete mode 100644 js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css delete mode 100644 js/panels/Timeline/TimelineTrack.reel/images/gridline.jpg delete mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss delete mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/config.rb delete mode 100644 js/panels/Timeline/Track.reel/Track.html delete mode 100644 js/panels/Timeline/Track.reel/Track.js delete mode 100644 js/panels/Timeline/Track.reel/css/Track.css delete mode 100644 js/panels/Timeline/Track.reel/images/gridline.jpg delete mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html delete mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js delete mode 100644 js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css delete mode 100644 js/panels/Timeline/Tween.reel/Tween.html delete mode 100644 js/panels/Timeline/Tween.reel/Tween.js delete mode 100644 js/panels/Timeline/Tween.reel/css/Tween.css delete mode 100644 node_modules/labs/rich-text-editor.reel/rich-text-editor.css delete mode 100644 node_modules/labs/rich-text-editor.reel/rich-text-editor.html delete mode 100644 node_modules/labs/rich-text-editor.reel/rich-text-editor.js delete mode 100644 node_modules/labs/rich-text-editor.reel/rich-text-resizer.js delete mode 100644 node_modules/labs/rich-text-editor.reel/rich-text-sanitizer.js delete mode 100644 node_modules/labs/rich-text-editor.reel/shortcut-manager.js diff --git a/css/ninja.css b/css/ninja.css index 48590fc8..a9a23d24 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, button.nj-skinned.active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); } +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; height: 150px; min-height: 80px; max-height: 50%; overflow: auto; } +#bottomPanelContainer { background: transparent; min-height: 80px; max-height: 50%; overflow: auto; } .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; } @@ -164,6 +164,8 @@ 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; } @@ -210,10 +212,6 @@ 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; } @@ -238,7 +236,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #toolPropertiesPanel { height: 32px; margin: 0px; } -#timelinePanel { height: 100%; } +#timelinePanel { height: 116px; } .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 2d26c8b4..ce5ac1af 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 === true) + if(this._value) { 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 deleted file mode 100644 index 1d0ad776..00000000 --- a/js/components/editable.reel/editable.js +++ /dev/null @@ -1,250 +0,0 @@ -/* 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 deleted file mode 100644 index 79813c92..00000000 --- a/js/components/hintable.reel/hintable.js +++ /dev/null @@ -1,360 +0,0 @@ -/* 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 ead7c764..9782d9d1 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.js +++ b/js/components/layout/bread-crumb.reel/bread-crumb.js @@ -1,8 +1,13 @@ +/* + 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 -var Component = require("montage/ui/component").Component +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; -var Breadcrumb = exports.Breadcrumb = Montage.create(Component, { +exports.Breadcrumb = Montage.create(Component, { _container:{ value:null @@ -11,12 +16,10 @@ var Breadcrumb = 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; @@ -25,132 +28,83 @@ var Breadcrumb = 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; - } - else{ - - parentNode= this.container; - - while(parentNode.id!=="UserContent"){ - + 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',{selected:false ,element:this.container}) - - + NJevent('layerBinding',this.container); } }, - handleBreadCrumbTrail: { + handleBreadCrumbTrail: { value: function(event) { - - var newLength,revaluatedLength,tmpvalue - var i=0; - if(event.detail.setFlag){ - this.application.ninja.currentSelectedContainer = event.detail.element; - return; - } + var newLength, revaluatedLength, tmpvalue, i=0; 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 new file mode 100755 index 00000000..f3a6f0e0 --- /dev/null +++ b/js/components/package.json @@ -0,0 +1,8 @@ +{ + "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 6aa61812..d581c6c3 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css @@ -5,33 +5,29 @@ */ .optionsTextTool { - padding: 6px; + display: -webkit-box; + -webkit-box-orient:horizontal; + -webkit-box-align: stretch; + padding: 5px; } -.optionsTextTool .btnGroup { - padding: 0px 8px; -} -.optionsTextTool > *, .optionsTextTool .btnGroup > * { - float:left; +.optionsTextTool > * { + -webkit-box-flex:0; } -.optionsTextTool button { +.optionsTextTool .button { width: auto; - padding: 4px 8px !important; - margin-left:4px; + +} + +.optionsTextTool .hottextunit { + padding-top:5px; } .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 7ded1236..fb57c06d 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"}, - "indent": {"@": "indent"}, - "outdent": {"@": "outdent"}, + "indentRight": {"@": "indentRight"}, + "indentLeft": {"@": "indentLeft"}, "numberedList": {"@": "numberedList"}, "bulletedList": {"@": "bulletedList"} } @@ -57,16 +57,8 @@ "module": "js/components/combobox.reel", "name": "Combobox", "properties": { - "element": {"#": "fontSelection"}, - "identifier": "fontSelection" - }, - "listeners": [ - { - "type": "change", - "listener": {"@": "owner"} - } - ] - + "element": {"#": "fontSelection"} + } }, "fontSettings": { "module": "js/components/button.reel", @@ -77,226 +69,131 @@ }, "fontSize": { - "module": "js/components/combobox.reel", - "name": "Combobox", + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", "properties": { - "element": {"#": "fontSize"}, - "identifier": "fontSize" - }, - "listeners": [ - { - "type": "change", - "listener": {"@": "owner"} - } - ] + "element": {"#": "fontSize"} + } + }, + "fontColor": { + "module": "js/components/button.reel", + "name": "Button", + "properties": { + "element": {"#": "fontColor"} + } }, - "btnBold": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { "element": {"#": "btnBold"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "btnBold", - "label": "B" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "_isToggleButton": true + } }, "btnItalic": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { "element": {"#": "btnItalic"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "btnItalic", - "label": "I" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "_isToggleButton": true + } }, "btnUnderline": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { "element": {"#": "btnUnderline"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "btnUnderline", - "label": "U" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "_isToggleButton": true + } }, "btnStrikethrough": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { "element": {"#": "btnStrikethrough"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "btnStrikethrough", - "label": "S" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "_isToggleButton": true + } }, - + "txtLink": { + "module": "js/components/textfield.reel", + "name": "TextField", + "properties": { + "element": {"#": "txtLink"} + } + }, + "linkTarget": { + "module": "js/components/combobox.reel", + "name": "Combobox", + "properties": { + "element": {"#": "linkTarget"} + } + }, + "alignLeft": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "alignLeft"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "alignLeft", - "label": "Left" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "alignLeft"} + } }, "alignCenter": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "alignCenter"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "alignCenter", - "label": "Center" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "alignCenter"} + } }, "alignRight": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "alignRight"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "alignRight", - "label": "Right" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "alignRight"} + } }, "alignJustify": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "alignJustify"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "alignJustify", - "label": "Justify" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "alignJustify"} + } }, - "indent": { - "module": "montage/ui/button.reel", + "indentRight": { + "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "indent"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "outdent", - "label": ">>" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "indentRight"} + } }, - "outdent": { - "module": "montage/ui/button.reel", + "indentLeft": { + "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "outdent"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "<<", - "label": "<<" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "indentLeft"} + } }, "bulletedList": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "bulletedList"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "bulletedList", - "label": "• • •" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "bulletedList"} + } }, "numberedList": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "numberedList"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "numberedList", - "label": "1 2 3" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] - } + "element": {"#": "numberedList"} + } + }, + "fontColor": { + "module" : "js/components/ui/color-chip.reel", + "name" : "ColorChip", + "properties" : { + "element" : {"#": "fontColor"}, + "mode": "chip" + } + } } @@ -305,36 +202,33 @@
- - - - + + + + - - + + -
-
- - - - -
-
- - - - -
-
- - -
-
- - + + + + + + + + +
+ + +
+ + + + +
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 55274322..313693b1 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -25,25 +25,26 @@ exports.TextProperties = Montage.create(ToolProperties, { alignCenter: {value: null}, alignRight: {value: null}, alignJustify: {value: null}, - indent: {value: null}, - outdent: {value: null}, + indentRight: {value: null}, + indentLeft: {value: null}, numberedList: {value: null}, bulletedList: {value: null}, prepareForDraw: { value: function() { - 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"]; + 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"; } }, - - handleEditorSelect: { - value: function(e) { - this.application.ninja.stage.textTool.updateStates(); - } - }, - + _subPrepare: { value: function() { //this.divElement.addEventListener("click", this, false); @@ -53,217 +54,6 @@ 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("indent"); - } - }, - - handleOutdentAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("outdent"); - } - }, - - handleFontSizeChange: { - value: function(e) { - //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size. - for( var i = 0; i < this.fontSize.items.length; i++) { - if (this.fontSize.value === this.fontSize.items[i]) { - this.application.ninja.stage.textTool.doAction("fontsize", (i +1)); - break; - } - } - } - }, - - defineInitialProperties: { - value: function() { - if (!this.initialized) { - - //Setup Font Selection tool - this.fontColor = this.element.getElementsByClassName("fontColor")[0]; - this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80}; - this.application.ninja.colorController.addButton("chip", this.fontColor); - this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); - this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false); - - this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false); - - Object.defineBinding(this.btnBold, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.bold", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.btnItalic, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.italic", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.btnUnderline, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.underline", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.btnStrikethrough, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.strikethrough", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.alignLeft, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.justifyleft", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.alignCenter, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.justifycenter", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.alignRight, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.justifyright", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.alignJustify, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.justifyfull", - boundValueMutator: this.validatePressed, - oneway: true - }); - - this.initialized = true; - } - - } - }, - - validatePressed: { - value: function(val) { - if (val == "true") return true; else return false - } - }, - - initialized: { - value: false - }, - - handleFontSelectionChange: { - value: function() { - this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value); - this.application.ninja.stage.textTool.element.focus(); - } - }, - - handleNumberedListAction: { - value: function(e) { - //this.numberedList.value = false; - this.bulletedList.value = false; - this.application.ninja.stage.textTool.doAction("insertorderedlist"); - this.application.ninja.stage.textTool.element.focus(); - } - }, - - handleBulletedListAction: { - value: functi