| Index: elements/designer-stage/frame.html
|
| diff --git a/elements/designer-stage/frame.html b/elements/designer-stage/frame.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..6674a1ef6b272fc8058f37cdc10fa1083898478b
|
| --- /dev/null
|
| +++ b/elements/designer-stage/frame.html
|
| @@ -0,0 +1,118 @@
|
| +<!--
|
| + Copyright 2015 The Polymer Authors. All rights reserved.
|
| + Use of this source code is governed by a BSD-style
|
| + license that can be found in the LICENSE file.
|
| +-->
|
| +<!doctype html>
|
| +<html>
|
| + <head>
|
| + <!--
|
| + TODO: remove style
|
| + -->
|
| + <style>
|
| + body {
|
| + position: relative;
|
| + margin: 0;
|
| + padding: 0;
|
| + }
|
| + #foo {
|
| + position: absolute;
|
| + background: #faa;
|
| + box-sizing: border-box;
|
| + }
|
| + .static {
|
| + height: 100px;
|
| + background: blue;
|
| + border: solid 1px black;
|
| + box-sizing: border-box;
|
| + }
|
| + </style>
|
| + </head>
|
| + <body>
|
| + <!--
|
| + TODO: remove content
|
| +
|
| + This is only here for demo / development until there's a way to load content into the frame.
|
| + -->
|
| + <div class="static"></div>
|
| + <div class="static"></div>
|
| + <div id="foo" style="top: 100px; left: 100px; height: 100px;width: 400px;">Hello Designer</div>
|
| + <div id="foo" style="top: 300px; left: 100px; height: 100px;width: 400px;">Hello Designer</div>
|
| + <script>
|
| + (function() {
|
| + currentElement = null;
|
| + token = null;
|
| +
|
| + window.addEventListener("message", function(e) {
|
| + switch (e.data.message_type) {
|
| + case 'setToken':
|
| + setToken(e);
|
| + break;
|
| + case 'selectElement':
|
| + selectElement(e);
|
| + break;
|
| + case 'resizeElement':
|
| + resizeElement(e);
|
| + break;
|
| + }
|
| + });
|
| +
|
| + function setToken(e) {
|
| + if (token != null) {
|
| + throw new Error('token already set');
|
| + }
|
| + token = e.data.token;
|
| + }
|
| +
|
| + function sendUpdateSelector(receiver, bounds) {
|
| + receiver.postMessage({
|
| + message_type: 'updateSelector',
|
| + token: token,
|
| + bounds: {
|
| + left: bounds.left,
|
| + top: bounds.top,
|
| + width: bounds.width,
|
| + height: bounds.height
|
| + }
|
| + }, '*');
|
| + }
|
| +
|
| + function sendSelectedElement(receiver, element) {
|
| + var style = window.getComputedStyle(element);
|
| + var bounds = element.getBoundingClientRect();
|
| + receiver.postMessage({
|
| + message_type: 'seletedElement',
|
| + token: token,
|
| + tagName: element.tagName,
|
| + display: style.display,
|
| + position: style.position,
|
| + bounds: {
|
| + left: bounds.left,
|
| + top: bounds.top,
|
| + width: bounds.width,
|
| + height: bounds.height
|
| + }
|
| + }, '*');
|
| + }
|
| +
|
| + function selectElement(e) {
|
| + var data = e.data;
|
| + currentElement = document.elementFromPoint(data.x, data.y);
|
| + var bounds = currentElement.getBoundingClientRect();
|
| + sendSelectedElement(e.source, currentElement);
|
| + }
|
| +
|
| + function resizeElement(e) {
|
| + if (currentElement != null) {
|
| + var bounds = e.data.bounds;
|
| + currentElement.style.top = bounds.top + 'px';
|
| + currentElement.style.left = bounds.left + 'px';
|
| + currentElement.style.height = bounds.height + 'px';
|
| + currentElement.style.width = bounds.width + 'px';
|
| + sendUpdateSelector(e.source, bounds);
|
| + }
|
| + }
|
| + })();
|
| + </script>
|
| + </body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 881243003:
Add designer-stage (Closed)
Base URL: https://github.com/PolymerLabs/designer2.git@master