Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(75)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: elements/designer-stage/designer-stage.html

Issue 881243003: Add designer-stage (Closed) Base URL: https://github.com/PolymerLabs/designer2.git@master
Patch Set: Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« elements/designer-stage/demo.html ('K') | « elements/designer-stage/demo.html ('k') | elements/designer-stage/frame.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!--
2 Copyright 2015 The Polymer Authors. All rights reserved.
3 Use of this source code is governed by a BSD-style
4 license that can be found in the LICENSE file.
5 -->
6 <!doctype html>
7 <html>
8 <head>
9 <link rel="import" href="../../../polymer/polymer.html">
10 <link rel="import" href="../../../neoprene/components/x-elements/x-template/ x-template.html">
11 <link rel="import" href="../designer-selection/designer-selection.html">
imac 2015/02/05 01:54:07 I think you forgot to include this in the patch
justinfagnani 2015/02/05 22:15:45 It's in the other CL
12 </head>
13 <body>
imac 2015/02/05 01:54:06 IMO going w/ the `html`-less and `body`-less style
justinfagnani 2015/02/05 22:15:45 Done.
14
15 <dom-module id="designer-stage">
16 <style>
17 designer-stage {
18 display: block;
19 box-sizing: border-box;
20 }
21 designer-stage > iframe {
22 position: absolute;
23 top: 0;
24 left: 0;
25 width: 100%;
26 height: 100%;
27 border: none;
28 box-sizing: border-box;
29 background: gray;
30 }
31 designer-stage > #glass {
32 position: absolute;
33 top: 0;
34 left: 0;
35 width: 100%;
36 height: 100%;
37 z-index: 100;
38 }
39 designer-stage > designer-selection {
40 position: absolute;
41 z-index: 101;
42 }
imac 2015/02/05 01:54:07 You may want pointer-events: none; on this guy (bu
justinfagnani 2015/02/05 22:15:45 no, the selector needs events.
43 </style>
44 <template>
45 <designer-selection id="selection"></designer-selection>
46 <div id="glass" on-mousedown="_onMouseDown"></div>
47 <!--
48 Note: src is main document relative, and only works in the demo
49 because it's in the same directory as this file. Need to solve this.
50 -->
51 <iframe id="frame" src="frame.html" sandbox="allow-scripts"></iframe>
52 </template>
53 </dom-module>
54 <script>
55 Polymer({
56 is: 'designer-stage',
57
58 created: function() {
59 this.token = null;
60 },
61
62 ready: function() {
63 window.addEventListener('message', this._onMessage.bind(this));
64 this.$.selection.addEventListener('designer-selection-resize',
65 this._onSelectionResize.bind(this));
66 var frame = this.$.frame;
67 var token = this.token = this._generateToken();
68 frame.onload = function() {
imac 2015/02/05 01:54:06 Hey, use `addEventListener` here! I don't have a r
imac 2015/02/05 01:54:07 Seems like there's a potential race here too: coul
justinfagnani 2015/02/05 22:15:45 Done.
justinfagnani 2015/02/05 22:15:45 In that case I'm unsure how to know the content is
imac 2015/02/06 20:29:49 Hmm, could post a message to it and hope for a res
justinfagnani 2015/02/06 23:49:42 I'll test in polyfill land. I suspect the setup an
69 frame.contentWindow.postMessage({
70 message_type: 'setToken',
71 token: token
72 }, '*');
73 };
imac 2015/02/05 01:54:06 Don't forget to handle the `error` event!
justinfagnani 2015/02/05 22:15:45 Done.
74 },
75
76 _generateToken: function() {
77 var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01 23456789";
78 var token = '';
79 for (var i = 0; i < 16; i++) {
80 token += alphabet.charAt(Math.floor(Math.random() * alphabet.length) );
81 }
82 return token;
83 },
imac 2015/02/05 01:54:06 Are you aiming for a UUID here, or just something
justinfagnani 2015/02/05 22:15:45 Just reasonably unique. I can use crypto soon I gu
84
85 _onMessage: function(e) {
86 if (e.data.token != this.token) {
87 throw new Error('Invalid token');
imac 2015/02/05 01:54:07 Stick the name of the token in that error message
justinfagnani 2015/02/05 22:15:45 Done.
88 }
89
90 switch (e.data.message_type) {
91 case 'updateSelector':
92 this._updateSelector(e);
93 break;
94 case 'seletedElement':
95 this._selectedElement(e);
96 break;
97 }
imac 2015/02/05 01:54:06 As this grows, consider moving to a lookup table
justinfagnani 2015/02/05 22:15:45 Acknowledged.
98 },
99
100 _updateSelector: function(e) {
101 var bounds = e.data.bounds;
102 var style = this.$.selection.style;
103 if (bounds == null) {
104 style.display = 'none';
105 } else {
106 style.display = 'block';
107 style.top = bounds.top;
108 style.left = bounds.left;
109 style.width = bounds.width;
110 style.height = bounds.height;
imac 2015/02/05 01:54:07 Probably want to clamp these to stay within the st
justinfagnani 2015/02/05 22:15:44 This is just a very rough start, I also need to va
111 }
112 },
113
114 _selectedElement: function(e) {
115 var data = e.data;
116 var bounds = data.bounds;
imac 2015/02/05 01:54:07 `data` can be null here
justinfagnani 2015/02/05 22:15:45 I'm going to trust messages from myself for now, e
117 var selection = this.$.selection;
118 var style = selection.style;
119 if (data.position == 'static') {
120 selection.directions = ResizeDirection.width_height;
imac 2015/02/05 01:54:07 Where is `ResizeDirection` coming from?
justinfagnani 2015/02/05 22:15:45 Loaded with designer-selection. I'll modularize so
121 } else if (data.position == 'static') {
122 selection.directions = ResizeDirection.all_directions;
123 }
124 // TODO: factor out common code with _updateSelector.
125 // Possibly implement message batching or extension.
imac 2015/02/05 01:54:07 Damn right you'll factor that out!
justinfagnani 2015/02/05 22:15:45 Acknowledged! :)
126 if (bounds == null) {
127 style.display = 'none';
128 } else {
129 style.display = 'block';
130 style.top = bounds.top;
131 style.left = bounds.left;
132 style.width = bounds.width;
133 style.height = bounds.height;
134 }
135 },
136
137 _onSelectionResize: function(e) {
138 var frame = this.$.frame;
139
140 frame.contentWindow.postMessage({
141 message_type: 'resizeElement',
142 bounds: e.detail
143 }, '*');
imac 2015/02/05 01:54:06 Might be good to use an actual origin. What if an
justinfagnani 2015/02/05 22:15:45 I'm not sure what origin to put, since a sandboxed
imac 2015/02/06 20:29:49 Oh, sandboxed iframes prevent navigation? Neat!
justinfagnani 2015/02/06 23:49:42 And popups, pointer-locks and a few other things..
144
145 },
146
147 _onMouseDown: function(e) {
148 var frame = this.$.frame;
149
150 frame.contentWindow.postMessage({
151 message_type: 'selectElement',
imac 2015/02/05 01:54:07 IMO you should do the dreaded ##ms debounce here,
justinfagnani 2015/02/05 22:15:45 What wrong with selecting on every click?
imac 2015/02/06 20:29:49 That works too! I was expecting the selection visu
justinfagnani 2015/02/06 23:49:43 Acknowledged.
152 x: e.clientX,
153 y: e.clientY
imac 2015/02/05 01:54:07 You should probably translate these relative to `f
justinfagnani 2015/02/05 22:15:45 Adding todo. I need some test where client bounds
154 }, "*");
155 }
156
157 });
158 </script>
159 </body>
160 </html>
OLDNEW
« elements/designer-stage/demo.html ('K') | « elements/designer-stage/demo.html ('k') | elements/designer-stage/frame.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698