From 3338548a250d717f9bc88758a5fdba719cfa08e6 Mon Sep 17 00:00:00 2001 From: "Scott J. Miles" Date: Fri, 4 Apr 2014 16:56:24 -0700 Subject: [PATCH] more spacifying and other non-semantic work --- .../designer-element/designer-element.html | 41 + elements/x-designable/x-designable.html | 893 +++++++++--------- elements/x-designer/x-designer.css | 41 + elements/x-designer/x-designer.html | 252 ++--- elements/x-inspector/x-inspector.css | 4 +- elements/x-inspector/x-inspector.html | 17 +- 6 files changed, 671 insertions(+), 577 deletions(-) create mode 100644 elements/x-designer/x-designer.css diff --git a/elements/designer-element/designer-element.html b/elements/designer-element/designer-element.html index 7ec06b2d..d1b21ca9 100644 --- a/elements/designer-element/designer-element.html +++ b/elements/designer-element/designer-element.html @@ -59,8 +59,14 @@ + + + + + + @@ -90,11 +96,13 @@ fileName: 'designer.html', githubUser: 'designer-polymer', githubToken: '77777d8808da580cd6134b7390b5fd306c66d1d6', + ready: function() { document.addEventListener('keydown', this.KeydownAndPromptForUnload.bind(this, window)); this.firstLoad = true; }, + designWindowLoaded: function() { this.$.frame.style.display = null; window.designWindow = this.$.frame.contentWindow; @@ -103,6 +111,7 @@ designWindow.document.addEventListener('keydown', this.KeydownAndPromptForUnload.bind(this, designWindow)); }, + KeydownAndPromptForUnload: function(w, e) { // backspace if (e.keyCode == 8) { @@ -114,6 +123,7 @@ }, 0); } }, + designerReady: function(event) { //console.log('designerReady'); this.designer = event.target; @@ -134,16 +144,28 @@ } }.bind(this)); }, + designChange: function(event) { this.$.inspector.sourceElement = this.designer.selected; this.$.inspector.update(); }, + deleteElement: function(event) { this.designer.deleteElement(); }, + + promoteElement: function(event) { + this.designer.promoteElement(); + }, + + demoteElement: function(event) { + this.designer.demoteElement(); + }, + selectParentElement: function(event) { this.designer.selectParentElement(); }, + selectedChanged: function() { if (this.selected == 'code') { this.designToCode(); @@ -154,6 +176,7 @@ this.codeToDesign(); } }, + // TODO(sorvell): probably should factor this code setup to be elsewhere prepareCode: function() { this.$.code.focus(); @@ -168,31 +191,39 @@ cm.execCommand('goLineStart'); } }, + get html() { return this.$.serializer.dumpElement(this.designer.$.canvas); }, + designToCode: function() { this.$.code.mirror.setValue(this.html); }, + codeToDesign: function() { this.pendingHtml = this.$.code.mirror.getValue(); this.reloadDesigner(); }, + reloadDesigner: function() { //this.$.frame.onload = this.designWindowLoaded.bind(this); designWindow.location.reload(); }, + fullscreenAction: function() { this.maximized = !this.maximized; }, + maximizedChanged: function() { this.designer.maximized = this.maximized; this.$.inspector.classList.toggle('maximized', this.maximized); }, + applyPropertyBinding: function(event, detail) { this.designer.applyPropertyBinding( detail.obj, detail.name, detail.path); }, + saveAction: function() { var options = {}; options[this.fileName] = {content: this.html}; @@ -202,17 +233,20 @@ this.$.github.save('designer', true, options); } }, + shareAction: function() { this.sharing = true; // must open window immediately so that it opens in a tab, not a window this.shareWindow = window.open(this.getGistUrl()); this.saveAction(); }, + share: function() { if (this.fileId && this.shareWindow) { this.shareWindow.location.href = this.getGistUrl(); } }, + loadRemoteContent: function() { var id = window.location.hash.replace('#', ''); if (id) { @@ -220,12 +254,14 @@ this.$.github.load(id); } }, + documentLoaded: function(event, detail) { var doc = detail && detail[this.fileName]; if (doc) { this.remoteHtml = doc.content; } }, + documentSaved: function(event, detail) { this.fileId = detail.id; if (this.sharing) { @@ -233,13 +269,16 @@ this.share(); } }, + remoteHtmlChanged: function() { //console.log(this.remoteHtml); this.loadHtml(this.remoteHtml); }, + loadHtml: function(html) { this.designer.loadHtml(html); }, + tokenChangeHandler: function() { this.$.github.cancel(); // make login work @@ -249,9 +288,11 @@ }); */ }, + getGistUrl: function() { return 'https://gist.github.com/' + this.githubUser + '/' + this.fileId; } + }); diff --git a/elements/x-designable/x-designable.html b/elements/x-designable/x-designable.html index a84044d4..339093d0 100644 --- a/elements/x-designable/x-designable.html +++ b/elements/x-designable/x-designable.html @@ -1,456 +1,497 @@ - - +})(); + + \ No newline at end of file diff --git a/elements/x-designer/x-designer.css b/elements/x-designer/x-designer.css new file mode 100644 index 00000000..46b74010 --- /dev/null +++ b/elements/x-designer/x-designer.css @@ -0,0 +1,41 @@ +:host { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + outline: 0; +} + +#canvas { + background-color: white; + -webkit-transition: left 0.4s; + transition: left 0.4s; + z-index: 1; +} + +#tools { + width: 284px; + z-index: 1; + box-shadow: 5px 0 8px rgba(0, 0, 0, 0.16); + transition: width 0.3s; +} + +#tools.maximized { + width: 0; +} + +#palette { + -webkit-transition: left 0.4s; + transition: left 0.4s; +} + +#tree { + height: 300px; + overflow: hidden; +} + +#canvas:not(.maximized) .selected-element { + outline: solid 10px rgba(72, 154, 254, 0.20); + outline-offset: -2px; +} \ No newline at end of file diff --git a/elements/x-designer/x-designer.html b/elements/x-designer/x-designer.html index e5ec742a..f941513f 100644 --- a/elements/x-designer/x-designer.html +++ b/elements/x-designer/x-designer.html @@ -6,156 +6,114 @@ - - + }, + + loadLinks: function(urls, callback) { + Polymer.import(urls, callback); + }, + + loadHtml: function(html) { + this.$.canvas.loadHtml(html); + }, + + applyPropertyBinding: function(obj, name, path) { + this.$.canvas.applyPropertyBinding(obj, name, path); + } + + }); + + + diff --git a/elements/x-inspector/x-inspector.css b/elements/x-inspector/x-inspector.css index 21efa62b..0207050d 100644 --- a/elements/x-inspector/x-inspector.css +++ b/elements/x-inspector/x-inspector.css @@ -19,14 +19,14 @@ license that can be found in the LICENSE file. #crumbList { display: inline-block; - width: 80%; + width: 60%; vertical-align: middle; overflow: hidden; float: left; font-size: 0.8em; } -#deleteIcon { +.fright { float: right; } diff --git a/elements/x-inspector/x-inspector.html b/elements/x-inspector/x-inspector.html index 410fb633..f25cf162 100644 --- a/elements/x-inspector/x-inspector.html +++ b/elements/x-inspector/x-inspector.html @@ -40,25 +40,36 @@ + \ No newline at end of file