├── .gitignore ├── LICENSE ├── NOTICE ├── README.md ├── background.js ├── contentscript.js ├── devtools.html ├── images ├── icon-128-complex.png ├── icon_2876.svg └── icon_39925.svg ├── js ├── Controller.js ├── EventManager.js ├── Model.js ├── View.js ├── main.js └── templates.js ├── lib └── css-shapes-editor │ ├── .gitignore │ ├── .jshintrc │ ├── LICENSE.md │ ├── README.md │ └── dist │ └── CSSShapesEditor-min.js ├── manifest.json ├── package.json ├── screenshot.jpg ├── sidebar.html ├── templates └── property.handlebars ├── third-party ├── handlebars.runtime-v2.0.0.js └── helpers.js └── update-shapes-editor-lib.sh /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | lib/css-shapes-editor/* 3 | !lib/css-shapes-editor/dist/CSSShapesEditor-min.js 4 | !lib/css-shapes-editor/README.md 5 | !lib/css-shapes-editor/LICENSE.md 6 | node_modules 7 | chrome-css-shapes-editor.zip 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2014 Adobe Systems Incorporated. All rights reserved. 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | 15 | Apache License 16 | Version 2.0, January 2004 17 | http://www.apache.org/licenses/ 18 | 19 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 20 | 21 | 1. Definitions. 22 | 23 | "License" shall mean the terms and conditions for use, reproduction, 24 | and distribution as defined by Sections 1 through 9 of this document. 25 | 26 | "Licensor" shall mean the copyright owner or entity authorized by 27 | the copyright owner that is granting the License. 28 | 29 | "Legal Entity" shall mean the union of the acting entity and all 30 | other entities that control, are controlled by, or are under common 31 | control with that entity. For the purposes of this definition, 32 | "control" means (i) the power, direct or indirect, to cause the 33 | direction or management of such entity, whether by contract or 34 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 35 | outstanding shares, or (iii) beneficial ownership of such entity. 36 | 37 | "You" (or "Your") shall mean an individual or Legal Entity 38 | exercising permissions granted by this License. 39 | 40 | "Source" form shall mean the preferred form for making modifications, 41 | including but not limited to software source code, documentation 42 | source, and configuration files. 43 | 44 | "Object" form shall mean any form resulting from mechanical 45 | transformation or translation of a Source form, including but 46 | not limited to compiled object code, generated documentation, 47 | and conversions to other media types. 48 | 49 | "Work" shall mean the work of authorship, whether in Source or 50 | Object form, made available under the License, as indicated by a 51 | copyright notice that is included in or attached to the work 52 | (an example is provided in the Appendix below). 53 | 54 | "Derivative Works" shall mean any work, whether in Source or Object 55 | form, that is based on (or derived from) the Work and for which the 56 | editorial revisions, annotations, elaborations, or other modifications 57 | represent, as a whole, an original work of authorship. For the purposes 58 | of this License, Derivative Works shall not include works that remain 59 | separable from, or merely link (or bind by name) to the interfaces of, 60 | the Work and Derivative Works thereof. 61 | 62 | "Contribution" shall mean any work of authorship, including 63 | the original version of the Work and any modifications or additions 64 | to that Work or Derivative Works thereof, that is intentionally 65 | submitted to Licensor for inclusion in the Work by the copyright owner 66 | or by an individual or Legal Entity authorized to submit on behalf of 67 | the copyright owner. For the purposes of this definition, "submitted" 68 | means any form of electronic, verbal, or written communication sent 69 | to the Licensor or its representatives, including but not limited to 70 | communication on electronic mailing lists, source code control systems, 71 | and issue tracking systems that are managed by, or on behalf of, the 72 | Licensor for the purpose of discussing and improving the Work, but 73 | excluding communication that is conspicuously marked or otherwise 74 | designated in writing by the copyright owner as "Not a Contribution." 75 | 76 | "Contributor" shall mean Licensor and any individual or Legal Entity 77 | on behalf of whom a Contribution has been received by Licensor and 78 | subsequently incorporated within the Work. 79 | 80 | 2. Grant of Copyright License. Subject to the terms and conditions of 81 | this License, each Contributor hereby grants to You a perpetual, 82 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 83 | copyright license to reproduce, prepare Derivative Works of, 84 | publicly display, publicly perform, sublicense, and distribute the 85 | Work and such Derivative Works in Source or Object form. 86 | 87 | 3. Grant of Patent License. Subject to the terms and conditions of 88 | this License, each Contributor hereby grants to You a perpetual, 89 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 90 | (except as stated in this section) patent license to make, have made, 91 | use, offer to sell, sell, import, and otherwise transfer the Work, 92 | where such license applies only to those patent claims licensable 93 | by such Contributor that are necessarily infringed by their 94 | Contribution(s) alone or by combination of their Contribution(s) 95 | with the Work to which such Contribution(s) was submitted. If You 96 | institute patent litigation against any entity (including a 97 | cross-claim or counterclaim in a lawsuit) alleging that the Work 98 | or a Contribution incorporated within the Work constitutes direct 99 | or contributory patent infringement, then any patent licenses 100 | granted to You under this License for that Work shall terminate 101 | as of the date such litigation is filed. 102 | 103 | 4. Redistribution. You may reproduce and distribute copies of the 104 | Work or Derivative Works thereof in any medium, with or without 105 | modifications, and in Source or Object form, provided that You 106 | meet the following conditions: 107 | 108 | (a) You must give any other recipients of the Work or 109 | Derivative Works a copy of this License; and 110 | 111 | (b) You must cause any modified files to carry prominent notices 112 | stating that You changed the files; and 113 | 114 | (c) You must retain, in the Source form of any Derivative Works 115 | that You distribute, all copyright, patent, trademark, and 116 | attribution notices from the Source form of the Work, 117 | excluding those notices that do not pertain to any part of 118 | the Derivative Works; and 119 | 120 | (d) If the Work includes a "NOTICE" text file as part of its 121 | distribution, then any Derivative Works that You distribute must 122 | include a readable copy of the attribution notices contained 123 | within such NOTICE file, excluding those notices that do not 124 | pertain to any part of the Derivative Works, in at least one 125 | of the following places: within a NOTICE text file distributed 126 | as part of the Derivative Works; within the Source form or 127 | documentation, if provided along with the Derivative Works; or, 128 | within a display generated by the Derivative Works, if and 129 | wherever such third-party notices normally appear. The contents 130 | of the NOTICE file are for informational purposes only and 131 | do not modify the License. You may add Your own attribution 132 | notices within Derivative Works that You distribute, alongside 133 | or as an addendum to the NOTICE text from the Work, provided 134 | that such additional attribution notices cannot be construed 135 | as modifying the License. 136 | 137 | You may add Your own copyright statement to Your modifications and 138 | may provide additional or different license terms and conditions 139 | for use, reproduction, or distribution of Your modifications, or 140 | for any such Derivative Works as a whole, provided Your use, 141 | reproduction, and distribution of the Work otherwise complies with 142 | the conditions stated in this License. 143 | 144 | 5. Submission of Contributions. Unless You explicitly state otherwise, 145 | any Contribution intentionally submitted for inclusion in the Work 146 | by You to the Licensor shall be under the terms and conditions of 147 | this License, without any additional terms or conditions. 148 | Notwithstanding the above, nothing herein shall supersede or modify 149 | the terms of any separate license agreement you may have executed 150 | with Licensor regarding such Contributions. 151 | 152 | 6. Trademarks. This License does not grant permission to use the trade 153 | names, trademarks, service marks, or product names of the Licensor, 154 | except as required for reasonable and customary use in describing the 155 | origin of the Work and reproducing the content of the NOTICE file. 156 | 157 | 7. Disclaimer of Warranty. Unless required by applicable law or 158 | agreed to in writing, Licensor provides the Work (and each 159 | Contributor provides its Contributions) on an "AS IS" BASIS, 160 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 161 | implied, including, without limitation, any warranties or conditions 162 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 163 | PARTICULAR PURPOSE. You are solely responsible for determining the 164 | appropriateness of using or redistributing the Work and assume any 165 | risks associated with Your exercise of permissions under this License. 166 | 167 | 8. Limitation of Liability. In no event and under no legal theory, 168 | whether in tort (including negligence), contract, or otherwise, 169 | unless required by applicable law (such as deliberate and grossly 170 | negligent acts) or agreed to in writing, shall any Contributor be 171 | liable to You for damages, including any direct, indirect, special, 172 | incidental, or consequential damages of any character arising as a 173 | result of this License or out of the use or inability to use the 174 | Work (including but not limited to damages for loss of goodwill, 175 | work stoppage, computer failure or malfunction, or any and all 176 | other commercial damages or losses), even if such Contributor 177 | has been advised of the possibility of such damages. 178 | 179 | 9. Accepting Warranty or Additional Liability. While redistributing 180 | the Work or Derivative Works thereof, You may choose to offer, 181 | and charge a fee for, acceptance of support, warranty, indemnity, 182 | or other liability obligations and/or rights consistent with this 183 | License. However, in accepting such obligations, You may act only 184 | on Your own behalf and on Your sole responsibility, not on behalf 185 | of any other Contributor, and only if You agree to indemnify, 186 | defend, and hold each Contributor harmless for any liability 187 | incurred by, or claims asserted against, such Contributor by reason 188 | of your accepting any such warranty or additional liability. 189 | 190 | END OF TERMS AND CONDITIONS 191 | -------------------------------------------------------------------------------- /NOTICE: -------------------------------------------------------------------------------- 1 | CSS Shapes Editor extension for Google Chrome DevTools 2 | 3 | Copyright 2014 Adobe Systems Incorporated. 4 | 5 | This software is licensed under the Apache License, Version 2.0 (see LICENSE file). 6 | It uses the following third party libraries that may have licenses differing from 7 | that of the CSS Shapes Editor DevTools extension itself. 8 | 9 | - underscore (http://underscorejs.org/) 10 | 11 | Copyright (c) 2009-2014 Jeremy Ashkenas, DocumentCloud and Investigative 12 | Reporters & Editors. 13 | 14 | MIT License: 15 | https://github.com/jashkenas/underscore/blob/master/LICENSE 16 | 17 | - helpers.js from TodoMVC (http://todomvc.com/) 18 | 19 | Copyright (c) Addy Osmani, Sindre Sorhus, Pascal Hartig, Stephen Sawchuk. 20 | 21 | MIT License: 22 | https://github.com/tastejs/todomvc/blob/gh-pages/license.md 23 | 24 | - CSS Shapes Editor library (https://github.com/adobe-webplatform/css-shapes-editor) 25 | 26 | Copyright (c) 2014 Adobe Systems Incorporated. 27 | 28 | Apache License, Version 2.0: 29 | https://github.com/adobe-webplatform/css-shapes-editor/blob/master/LICENSE.md 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## CSS Shapes Editor for Chrome DevTools 2 | 3 | Chrome DevTools extension for live on-screen editing of CSS Shapes property values. 4 | Uses the [CSS Shape Editor library](https://github.com/adobe-webplatform/css-shapes-editor). 5 | 6 | ![Screenshot](./screenshot.jpg) 7 | 8 | ### Demo 9 | 10 | https://www.youtube.com/watch?v=zdWsBZiGiZc 11 | 12 | ### How to install 13 | 14 | __Simple__ 15 | 16 | *Google Chrome* 17 | 1. Open Google Chrome (min version 37, check `chrome://version/`) 18 | 2. [Install extension from Chrome Web Store](https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp) 19 | 20 | *Opera browser* 21 | 1. Open Opera (min version 24, check `opera://about`) 22 | 2. [Install extension from Opera add-ons](https://addons.opera.com/en/extensions/details/css-shapes-editor/) registry. 23 | 24 | 25 | __From source__ 26 | 1. Clone this repository. 27 | 2. Open Google Chrome (min version 37, check `chrome://version/` or [download Canary](https://www.google.co.uk/intl/en/chrome/browser/canary.html)) 28 | - Navigate to `chrome://extensions` 29 | - Toggle on "Developer mode" checkbox 30 | - Click "Load unpacked extension" 31 | - Select the cloned repository folder 32 | 33 | 34 | ### How to use 35 | 36 | - Launch DevTools (_View > Develop > Developer Tools_) 37 | - Switch to _Elements_ panel 38 | - Look for the new _Shapes_ sidebar next to _Styles_, _Event Listeners_, etc. 39 | - In the _Shapes_ sidebar: 40 | - click "create" and select a shape type to add 41 | - an interactive editor appears on top of the selected element 42 | - click "edit" to turn on editor and adjust an existing shape 43 | - click "edit" again to remove the editor 44 | - **tip**: hold the _Shift_ key and click "edit" to convert the shape coordinate units 45 | 46 | 47 | ### Sample content 48 | 49 | Use with the [CSS Shapes Espresso demo](https://oslego.github.io/css-shapes-espresso) ([source](https://github.com/oslego/css-shapes-espresso)), or learn [how to create](http://alistapart.com/article/css-shapes-101) your own sample. 50 | 51 | 52 | ### Known limitations 53 | 54 | - Manually editing code in the _Shapes_ sidebar, like in _Styles_, is not yet available. 55 | - There is no interactive editor for `inset()` shape function. Only `polygon()`, `circle()` and `ellipse()` are supported. 56 | 57 | 58 | ### Credits 59 | 60 | - [CSS Shapes Editor library](https://github.com/adobe-webplatform/css-shapes-editor) 61 | - [Underscore](https://github.com/jashkenas/underscore) 62 | - helpers & insight from [TodoMVC](https://github.com/tastejs/todomvc) 63 | - Icons: 64 | - [Cursor](http://thenounproject.com/term/cursor/39925/) by Danny Sturgess from The Noun Project 65 | - [Plus](http://thenounproject.com/term/plus/2876/) by P.J. Onori from The Noun Project 66 | -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | /* 16 | Relay messages between in-page content script and devtools extension 17 | because the two are not allowed to communicate to each other. 18 | */ 19 | 20 | // extension key, as published on Chrome web store 21 | var key = "nenndldnbcncjmeacmnondmkkfedmgmp", 22 | devtoolsPort, 23 | pagePort; 24 | 25 | chrome.runtime.onConnect.addListener(function(port) { 26 | 27 | if (port.name == key + "page"){ 28 | pagePort = port; 29 | pagePort.onMessage.addListener(function(data){ 30 | devtoolsPort.postMessage(data); 31 | }); 32 | } 33 | 34 | if (port.name == key + "devtools"){ 35 | devtoolsPort = port; 36 | 37 | devtoolsPort.onMessage.addListener(function(data){ 38 | 39 | if (data.type === "inject"){ 40 | chrome.tabs.executeScript(data.tabId, {file: './lib/css-shapes-editor/dist/CSSShapesEditor-min.js'}); 41 | chrome.tabs.executeScript(data.tabId, {file: './contentscript.js'}); 42 | } else { 43 | pagePort.postMessage(data); 44 | } 45 | 46 | }); 47 | 48 | devtoolsPort.onDisconnect.addListener(function(e){ 49 | // remove any editors existing on the inspected page 50 | pagePort.postMessage({type: 'teardown'}); 51 | }); 52 | } 53 | }); 54 | -------------------------------------------------------------------------------- /contentscript.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | var port, timeout, 16 | delay = 100, 17 | editors = {}, 18 | onShapeChange; 19 | 20 | // extension key, as published on Chrome web store 21 | var key = "nenndldnbcncjmeacmnondmkkfedmgmp"; 22 | 23 | // unit types for converting shape coordinates 24 | // `null` causes editor to use original input units 25 | var units = ["em", "%", "px", "rem", "vw", "vh", "in", "cm", "mm", "pt", "pc", null]; 26 | 27 | function setup(el, property, value){ 28 | var options = {}, 29 | editor; 30 | 31 | switch (property) { 32 | case "shape-inside": 33 | case "-webkit-shape-inside": 34 | options.defaultRefBox = "content-box"; 35 | break; 36 | case "clip-path": 37 | case "-webkit-clip-path": 38 | options.defaultRefBox = "border-box"; 39 | break; 40 | default: 41 | options.defaultRefBox = "margin-box"; 42 | } 43 | 44 | editor = new CSSShapesEditor(el, value, options); 45 | 46 | // copy of varlid targets for unit conversion; will be cycled through and mutated. 47 | editor.units = units.slice(); 48 | // coversion target unit; `null` causes editor to use original input units 49 | editor.targetUnit = null; 50 | 51 | port = port || chrome.runtime.connect({name: key + "page"}); 52 | port.onMessage.addListener(handleMessage); 53 | 54 | // intentionally expose shape change handler 55 | onShapeChange = function onShapeChange(prop){ 56 | 57 | var message = { 58 | type: 'update', 59 | property: property, 60 | value: editor.getCSSValue(editor.targetUnit) 61 | }; 62 | 63 | editor.target.style[property] = message.value; 64 | 65 | // throttle messages to extension 66 | if (!timeout){ 67 | timeout = window.setTimeout(function(){ 68 | port.postMessage(message); 69 | window.clearTimeout(timeout); 70 | timeout = undefined; 71 | }, delay); 72 | } 73 | }; 74 | 75 | editor.on('shapechange', onShapeChange); 76 | 77 | editor.on('ready', onShapeChange); 78 | 79 | editors[property] = editor; 80 | } 81 | 82 | function remove(property){ 83 | if (!editors[property]){ 84 | return; 85 | } 86 | 87 | editors[property].off('shapechange'); 88 | editors[property].off('ready'); 89 | editors[property].remove(); 90 | editors[property] = null; 91 | delete editors[property]; 92 | } 93 | 94 | function convert(property){ 95 | if (!editors[property]){ 96 | return; 97 | } 98 | 99 | var editor = editors[property]; 100 | 101 | // set the editor's target output value; used as unit in editor.getCSSValue(unit) 102 | editor.targetUnit = editor.units[0]; 103 | 104 | // mutate units array; move first index to the end; on next call, units[0] will be current second item 105 | editor.units.splice(editor.units.length, 0, editor.units.shift()); 106 | 107 | // simulate "shapechange" to sync converted units to DevTools sidebar 108 | onShapeChange.call(editor, property); 109 | } 110 | 111 | /* 112 | Handlers for incoming data to port.onMessage 113 | 114 | @param {Object} msg Data payload from incoming message. 115 | Must have at least a 'type' key with a string value. 116 | 117 | @example handleMessage({type: 'teardown'}); 118 | */ 119 | function handleMessage(msg){ 120 | if (!msg.type){ 121 | return; 122 | } 123 | 124 | var handlers = []; 125 | 126 | // `teardown` is called when the user closes DevTools window 127 | // use this opportunity to clean-up editors if the user hadn't closed them 128 | handlers['teardown'] = function(){ 129 | Object.keys(editors).forEach(function(property){ 130 | remove(property); 131 | }); 132 | }; 133 | 134 | handlers[msg.type] && handlers[msg.type].call(); 135 | } 136 | -------------------------------------------------------------------------------- /devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /images/icon-128-complex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslego/chrome-css-shapes-editor/ed5dba21d43b25d573e2c90fd3a5dd55e67af780/images/icon-128-complex.png -------------------------------------------------------------------------------- /images/icon_2876.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /images/icon_39925.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /js/Controller.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | (function(window){ 16 | 'use strict'; 17 | 18 | /** 19 | * Takes a model and view and acts as the controller between them 20 | * 21 | * @constructor 22 | * @param {object} model The model instance 23 | * @param {object} view The view instance 24 | */ 25 | function Controller(model, view){ 26 | var self = this; 27 | self.view = view; 28 | 29 | self.view.bind('toggleEditor', function(editor){ 30 | self.onToggleEditor(editor.property, editor.enabled); 31 | }); 32 | 33 | self.view.bind('convertShape', function(editor){ 34 | self.trigger('convertShape', editor); 35 | }); 36 | 37 | self.view.bind('createShape', self.onCreateShape.bind(this)); 38 | 39 | self.setModel(model); 40 | } 41 | 42 | Controller.prototype = new EventManager(); 43 | 44 | Controller.prototype.onToggleEditor = function(property, enabled){ 45 | var self = this; 46 | 47 | self.model.read(property, function(data){ 48 | data.enabled = enabled; 49 | self.model.update(property, data); 50 | 51 | self.trigger('editorStateChange', data); 52 | }); 53 | }; 54 | 55 | Controller.prototype.onUpdateModel = function(data){ 56 | this.view.render("updateValue", data); 57 | }; 58 | 59 | Controller.prototype.onCreateShape = function(editor){ 60 | var silent = true; // do not trigger 'update' event 61 | var payload = { 62 | value: editor.value, 63 | enabled: editor.enabled, 64 | property: editor.property 65 | }; 66 | 67 | this.model.update(editor.property, payload, silent); 68 | }; 69 | 70 | /* 71 | Loads and initializes the property list view 72 | or the support warning view if none of the properties are supported. 73 | */ 74 | Controller.prototype.setView = function(){ 75 | var self = this; 76 | self.model.readAll(function(data){ 77 | var props = Object.keys(data); 78 | if (props.length){ 79 | self.view.render('showProperties', data); 80 | } 81 | else{ 82 | self.view.render('showSupportWarning', data); 83 | } 84 | }); 85 | }; 86 | 87 | /* 88 | Loads model and listens to its 'update' events. 89 | Replace any existing model. 90 | */ 91 | Controller.prototype.setModel = function(model){ 92 | 93 | if (this.model){ 94 | this.model.off('update'); // unbind old event handlers 95 | this.model = null; // release the old model for garbage collecting 96 | } 97 | 98 | this.model = model; 99 | this.model.on('update', this.onUpdateModel.bind(this)); 100 | }; 101 | 102 | // Export to window 103 | window.app = window.app || {}; 104 | window.app.Controller = Controller; 105 | })(window); 106 | -------------------------------------------------------------------------------- /js/EventManager.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | (function(window){ 16 | 'use strict'; 17 | 18 | /* 19 | @constructor 20 | Lightweight event manager class to be combined with other objects. 21 | Basic API: 22 | on(): attach an event handler with an optional scope (default to 'this'); 23 | trigger(): trigger handlers for an event with arbitrary data with the given optional scope 24 | */ 25 | function EventManager(){ 26 | this.handlers = {}; 27 | } 28 | 29 | EventManager.prototype.on = function(event, handler, context){ 30 | if (this.handlers[event] === undefined){ 31 | this.handlers[event] = []; 32 | } 33 | 34 | this.handlers[event].push({ 35 | "fn": handler, 36 | "context": context || this 37 | }); 38 | }; 39 | 40 | EventManager.prototype.off = function(event, fn){ 41 | var handlers = this.handlers[event]; 42 | 43 | if (!handlers || !handlers.length){ 44 | return; 45 | } 46 | 47 | // delete a specific handler; 48 | if (fn && typeof fn === 'function'){ 49 | handlers.forEach(function(handler, index){ 50 | if (handler.fn === fn){ 51 | handlers.splice(index, 1); 52 | } 53 | }); 54 | return; 55 | } 56 | 57 | // delete all handlers for the event 58 | delete this.handlers[event]; 59 | }; 60 | 61 | 62 | EventManager.prototype.trigger = function(event, data){ 63 | var handlers = this.handlers[event]; 64 | 65 | if (!handlers || !handlers.length){ 66 | return; 67 | } 68 | 69 | handlers.forEach(function(handler){ 70 | handler.fn.call(handler.context, data); 71 | }); 72 | }; 73 | 74 | window.EventManager = EventManager; 75 | })(window); 76 | -------------------------------------------------------------------------------- /js/Model.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | (function(window){ 16 | 'use strict'; 17 | 18 | /** 19 | * Creates a new Model instance and hooks up the storage. 20 | * 21 | * @constructor 22 | * @param {object} storage A reference to the client side storage class 23 | */ 24 | function Model(storage){ 25 | this.storage = (storage || {}); 26 | } 27 | 28 | Model.prototype = new EventManager(); 29 | 30 | Model.prototype.read = function(id, callback){ 31 | callback = callback || function(){}; 32 | callback(this.storage[id]); 33 | }; 34 | 35 | Model.prototype.readAll = function(callback){ 36 | callback = callback || function(){}; 37 | callback(this.storage); 38 | }; 39 | 40 | Model.prototype.update = function(id, data, silent){ 41 | var oldData = this.storage[id] || {}; 42 | 43 | this.storage[id] = window.extend(oldData, data); 44 | 45 | // prevent triggering message? 46 | silent = !!silent || false; 47 | if (silent){ 48 | return; 49 | } 50 | 51 | this.trigger('update', this.storage[id]); 52 | }; 53 | 54 | Model.prototype.remove = function(id, callback){ 55 | callback = callback || function(){}; 56 | delete this.storage[id]; 57 | 58 | callback(this.storage); 59 | }; 60 | 61 | // Export to window 62 | window.app = window.app || {}; 63 | window.app.Model = Model; 64 | })(window); 65 | -------------------------------------------------------------------------------- /js/View.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | /*global qs, qsa, $parent, $events, _ */ 16 | 17 | (function(window){ 18 | 'use strict'; 19 | 20 | /** 21 | * View that abstracts away the browser's DOM. 22 | * It has two main entry points: 23 | * 24 | * - bind(eventName, handler) 25 | * Takes an application event and registers the handler 26 | * - render(command, dataObject) 27 | * Renders the given command with the options 28 | */ 29 | function View(root){ 30 | var _qs = window.qs, 31 | _qsa = window.qsa, 32 | _delegate = window.$events.delegate, 33 | _undelegate = window.$events.undelegate; 34 | 35 | root.qs = window.qs.bind(root.document); 36 | root.qsa = window.qsa.bind(root.document); 37 | 38 | // re-scope helpers to sidebar 'window' context 39 | window.qs = function(selector, scope){ return _qs(selector, scope || root.document);}; 40 | window.qsa = function(selector, scope){ return _qsa(selector, scope || root.document);}; 41 | window.delegate = function(selector, event, handler){ return _delegate(selector, event, handler, root);}; 42 | window.undelegate = function(selector, event, handler){ return _undelegate(selector, event, handler, root);}; 43 | 44 | this.root = root; 45 | this.$properties = qs('.properties'); 46 | this.$support = qs('.js-support'); 47 | 48 | this.init(); 49 | } 50 | 51 | View.prototype.init = function(){ 52 | var self = this; 53 | 54 | // any click that propagates up to the document should close the active 'create' menus 55 | this.root.document.addEventListener('click', this.closeActiveMenus); 56 | 57 | delegate('.js-action--create', 'click', function(e){ 58 | // prevent the catch-all document.addEventListener to react 59 | e.stopImmediatePropagation(); 60 | e.target.classList.toggle('js-active'); 61 | self.closeActiveMenus(e.target); 62 | }); 63 | }; 64 | 65 | View.prototype.teardown = function(){ 66 | 67 | // remove all event listeners 68 | undelegate(); 69 | 70 | // remove catch-all listener 71 | this.root.document.removeEventListener('click', this.closeActiveMenus); 72 | 73 | // cleanup page html 74 | this.render('empty'); 75 | }; 76 | 77 | View.prototype.closeActiveMenus = function(ignore){ 78 | 79 | var actives = qsa('.js-action--create.js-active'); 80 | 81 | Array.prototype.forEach.call(actives, function(item){ 82 | if (ignore && ignore == item){ 83 | return; 84 | } 85 | 86 | item.classList.remove('js-active'); 87 | }); 88 | }; 89 | 90 | View.prototype.render = function(viewCmd, data){ 91 | var self = this; 92 | var viewCommands = { 93 | showProperties: function(){ 94 | var attrs = data, 95 | html = ''; 96 | 97 | Object.keys(attrs).forEach(function(key){ 98 | html += Handlebars.templates.property(attrs[key]); 99 | }); 100 | 101 | self.$properties.innerHTML = html; 102 | 103 | // toggle off support warning, in case it was ever on. 104 | self.$support.style.display = 'none'; 105 | }, 106 | 107 | updateValue: function(){ 108 | var property = data.property, 109 | value = data.value; 110 | 111 | var el = qs('#'+property + ">.value"); 112 | el.textContent = value; 113 | }, 114 | 115 | empty: function(){ 116 | self.$properties.innerHTML = ''; 117 | }, 118 | 119 | showSupportWarning: function(){ 120 | self.$support.style.display = 'block'; 121 | } 122 | }; 123 | 124 | viewCommands[viewCmd](); 125 | }; 126 | 127 | /* 128 | Finds elements in the active state, class="js-active", 129 | and simulates a click to toggle to their inactive state. 130 | 131 | @param {String} filter Selector used to filter active elements 132 | */ 133 | View.prototype.toggleOffActive = function(filter){ 134 | var selector = (typeof filter == 'string' && filter.length) ? filter + '.js-active' : '.js-active'; 135 | var actives = qsa(selector); 136 | 137 | Array.prototype.forEach.call(actives, function(active){ 138 | // fake click triggers 'toggleEditor' and informs Controller.js 139 | active.dispatchEvent(new MouseEvent('click')); 140 | }); 141 | }; 142 | 143 | View.prototype.bind = function(event, handler){ 144 | var self = this; 145 | var events = { 146 | 147 | 'toggleEditor': function(){ 148 | 149 | delegate('.js-action--edit', 'click', function(e){ 150 | var target = e.target, 151 | isActive = target.classList.contains('js-active'); 152 | 153 | if (isActive && e.shiftKey){ 154 | // bail-out; handled by 'convertShape' 155 | return; 156 | } 157 | 158 | // turn off other editors 159 | if (isActive === false){ 160 | self.toggleOffActive('.js-action--edit'); 161 | } 162 | 163 | handler({ 164 | property: $parent(target, 'li').id, 165 | enabled: !isActive // toggling the state 166 | }); 167 | 168 | target.classList.toggle('js-active'); 169 | 170 | }); 171 | }, 172 | 173 | 'convertShape': function(){ 174 | delegate('.js-action--edit', 'click', function(e){ 175 | var target = e.target, 176 | isActive = target.classList.contains('js-active'); 177 | 178 | if (isActive && e.shiftKey){ 179 | handler({ 180 | property: $parent(target, 'li').id, 181 | enabled: isActive 182 | }); 183 | } 184 | }); 185 | }, 186 | 187 | 'createShape': function(e){ 188 | delegate('[data-shape]', 'click', function(e){ 189 | var target = e.target, 190 | parent = $parent(target, 'li'), 191 | property = parent.id, 192 | value = target.dataset.shape, 193 | createButton = qs('.js-action--create', parent), 194 | editButton = qs('.js-action--edit', parent), 195 | wasActive = editButton.classList.contains('js-active'); 196 | 197 | handler({ 198 | property: property, 199 | value: value, 200 | enabled: false 201 | }); 202 | 203 | editButton.removeAttribute('disabled'); 204 | 205 | // turns on editor if not yet on; turns it off if on, and removes inline editor 206 | editButton.dispatchEvent(new MouseEvent('click')); 207 | 208 | // toggle editor back on for the new shape 209 | // TODO: clarify this worklow ("create new shape while editor is on") 210 | if (wasActive){ 211 | window.setTimeout(function(){ 212 | editButton.dispatchEvent(new MouseEvent('click')); 213 | }, 0); 214 | } 215 | }); 216 | } 217 | }; 218 | 219 | events[event](); 220 | }; 221 | 222 | // Export to window 223 | window.app = window.app || {}; 224 | window.app.View = View; 225 | }(window)); 226 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | /*jslint evil:true*/ 16 | /*global app */ 17 | (function () { 18 | 'use strict'; 19 | 20 | // Supported CSS properties that accept shape values. 21 | // NOTE: unprefixed clip-path applies only to SVG; use -webkit- prefix for SVG & HTML. 22 | var CSS_PROPERTIES = ['shape-outside', 'shape-inside', '-webkit-clip-path']; 23 | 24 | // DOM equivalent of CSS properties used to query getComputedStyle() result. 25 | var DOM_PROPERTIES = CSS_PROPERTIES.map(window.toDOMProperty); 26 | 27 | // extension instance 28 | var ext; 29 | 30 | // extension key, as published on Chrome web store 31 | var key = "nenndldnbcncjmeacmnondmkkfedmgmp"; 32 | 33 | // messaging port to background page (background.js) 34 | var port = chrome.runtime.connect({name: key + "devtools"}); 35 | 36 | function Extension(root){ 37 | var self = this; 38 | 39 | if (!root){ 40 | throw new Error('Missing root window for View'); 41 | } 42 | 43 | self.getSelectedElementStyles().then(function(data){ 44 | self.view = new app.View(root); 45 | self.model = new app.Model(data); 46 | self.controller = new app.Controller(self.model, self.view); 47 | self.controller.on('editorStateChange', function(editor){ 48 | self.onEditorStateChange.call(self, editor); 49 | }); 50 | self.controller.on('convertShape', function(editor){ 51 | self.convert.call(self, editor); 52 | }); 53 | self.controller.setView(); 54 | }); 55 | 56 | // store a reference to the 'this'-bound event handler so we can 57 | // release it with removeListener() in Extension.teardown() 58 | // oh, JavaScript! 59 | self.boundSelectedElementChange = function(scope){ 60 | return function(){ 61 | scope.onSelectedElementChange.call(scope); 62 | }; 63 | }(self); 64 | 65 | chrome.devtools.panels.elements.onSelectionChanged.addListener(self.boundSelectedElementChange); 66 | } 67 | 68 | Extension.prototype.teardown = function(){ 69 | if (this.activeEditor){ 70 | this.removeEditor(this.activeEditor); 71 | } 72 | 73 | this.view.teardown(); 74 | this.view = null; 75 | this.model = null; 76 | this.controller.off('editorStateChange'); 77 | this.controller.off('convertShape'); 78 | this.controller = null; 79 | 80 | chrome.devtools.panels.elements.onSelectionChanged.removeListener(this.boundSelectedElementChange); 81 | }; 82 | 83 | Extension.prototype.onSelectedElementChange = function(){ 84 | var self = this; 85 | 86 | if (this.activeEditor){ 87 | this.removeEditor(this.activeEditor); 88 | } 89 | 90 | self.getSelectedElementStyles().then(function(data){ 91 | self.controller.setModel(new app.Model(data)); 92 | self.controller.setView(); 93 | }); 94 | }; 95 | 96 | Extension.prototype.onEditorStateChange = function(editor){ 97 | if (editor.enabled){ 98 | this.setupEditor(editor); 99 | } else { 100 | this.removeEditor(editor); 101 | } 102 | }; 103 | 104 | Extension.prototype.setupEditor = function(editor){ 105 | chrome.devtools.inspectedWindow.eval('setup($0, "'+ editor.property.toString() +'", "'+ editor.value.toString() +'")', { useContentScriptContext: true }); 106 | this.activeEditor = editor; 107 | }; 108 | 109 | Extension.prototype.removeEditor = function(editor){ 110 | chrome.devtools.inspectedWindow.eval('remove("'+ editor.property.toString() +'")', { useContentScriptContext: true }); 111 | this.activeEditor = null; 112 | }; 113 | 114 | Extension.prototype.convert = function(editor){ 115 | chrome.devtools.inspectedWindow.eval('convert("'+ editor.property.toString() +'")', { useContentScriptContext: true }); 116 | }; 117 | 118 | /* 119 | Returns a Promise that resolves with the CSS Shapes properties 120 | from the computed style of the currently selected element($0). 121 | 122 | @see CSS_PROPETIES 123 | @return {Promise} 124 | */ 125 | Extension.prototype.getSelectedElementStyles = function(){ 126 | return new Promise(function(resolve, reject){ 127 | 128 | function extractStyles(style){ 129 | var data = {}; 130 | 131 | style = JSON.parse(style); 132 | 133 | CSS_PROPERTIES.forEach(function(prop, index){ 134 | var domProp = DOM_PROPERTIES[index]; 135 | 136 | /* 137 | 1. If the property isn't supported it won't show up in the computed styles. 138 | 2. Sometimes (!), when switching between elements, the computed style obj is filled with blanks. 139 | The browser will do its thing, then trigger another chrome.devtools.panels.elements.onSelectionChanged 140 | event shortly after, and then the computed style object is sane. That's the reason for the second condition. 141 | */ 142 | if (!style || !style[domProp] || style[domProp] === ""){ 143 | return; 144 | } 145 | data[prop] = { 146 | property: prop, 147 | value: style[domProp], 148 | // TODO: move check to model? 149 | editable: /^\s*(polygon|circle|ellipse)\s*\(/.test(style[domProp]) 150 | }; 151 | }); 152 | 153 | resolve(data); 154 | } 155 | 156 | chrome.devtools.inspectedWindow.eval("JSON.stringify(window.getComputedStyle($0, null))", extractStyles); 157 | }); 158 | }; 159 | 160 | function handleMessage(msg){ 161 | if (!ext){ 162 | return; 163 | } 164 | 165 | switch (msg.type){ 166 | case "update": 167 | ext.model.update(msg.property, { value: msg.value }); 168 | break; 169 | 170 | case "remove": 171 | ext.model.update(msg.property, { enabled: false }); 172 | break; 173 | } 174 | } 175 | 176 | document.addEventListener('DOMContentLoaded', function(){ 177 | chrome.devtools.panels.elements.createSidebarPane("Shapes", 178 | function(sidebar){ 179 | 180 | sidebar.setPage('sidebar.html'); 181 | 182 | sidebar.onShown.addListener(function(contentWindow){ 183 | ext = new Extension(contentWindow); 184 | port.onMessage.addListener(handleMessage); 185 | 186 | // signal to background to inject content scipts 187 | port.postMessage({ 188 | type: "inject", 189 | tabId: chrome.devtools.inspectedWindow.tabId, 190 | }); 191 | }); 192 | 193 | sidebar.onHidden.addListener(function(){ 194 | ext.teardown(); 195 | ext = undefined; 196 | port.onMessage.removeListener(handleMessage); 197 | }); 198 | }); 199 | 200 | }); 201 | 202 | })(); 203 | -------------------------------------------------------------------------------- /js/templates.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {}; 3 | templates['property'] = template({"1":function(depth0,helpers,partials,data) { 4 | return " disabled "; 5 | },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) { 6 | var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "
  • \n " 9 | + escapeExpression(((helper = (helper = helpers.property || (depth0 != null ? depth0.property : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"property","hash":{},"data":data}) : helper))) 10 | + ":\n
    \n \n
    \n " 14 | + escapeExpression(((helper = (helper = helpers.value || (depth0 != null ? depth0.value : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"value","hash":{},"data":data}) : helper))) 15 | + ";\n
    • \n"; 16 | },"useData":true}); 17 | })(); -------------------------------------------------------------------------------- /lib/css-shapes-editor/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist/CSSShapesEditor.js 4 | dist/css-shapes-editor.js 5 | ./test/.DS_Store 6 | private 7 | -------------------------------------------------------------------------------- /lib/css-shapes-editor/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "bitwise" : true, 3 | "curly" : true, 4 | "eqeqeq" : true, 5 | "forin" : true, 6 | "immed" : true, 7 | "latedef" : true, 8 | "newcap" : true, 9 | "noarg" : true, 10 | "noempty" : true, 11 | "nonew" : true, 12 | "plusplus" : true, 13 | "regexp" : true, 14 | "undef" : true, 15 | "strict" : true, 16 | "trailing" : false, 17 | 18 | "asi" : false, 19 | "boss" : false, 20 | "debug" : false, 21 | "eqnull" : false, 22 | "es5" : false, 23 | "esnext" : false, 24 | "evil" : false, 25 | "expr" : false, 26 | "funcscope" : false, 27 | "globalstrict" : false, 28 | "iterator" : false, 29 | "lastsemic" : false, 30 | "laxbreak" : false, 31 | "laxcomma" : false, 32 | "loopfunc" : false, 33 | "multistr" : false, 34 | "onecase" : false, 35 | "proto" : false, 36 | "regexdash" : false, 37 | "scripturl" : false, 38 | "smarttabs" : false, 39 | "shadow" : false, 40 | "sub" : false, 41 | "supernew" : false, 42 | "validthis" : false, 43 | 44 | "browser" : true, 45 | "couch" : false, 46 | "devel" : false, 47 | "dojo" : false, 48 | "jquery" : false, 49 | "mootools" : false, 50 | "node" : false, 51 | "nonstandard" : false, 52 | "prototypejs" : false, 53 | "rhino" : false, 54 | "wsh" : false, 55 | 56 | "nomen" : false, 57 | "onevar" : false, 58 | "passfail" : false, 59 | "white" : false, 60 | 61 | "maxerr" : 100, 62 | "predef" : [ 63 | ], 64 | "indent" : 4, 65 | "globals" : [ 66 | "require", 67 | "define", 68 | "brackets", 69 | "$", 70 | "PathUtils", 71 | "window", 72 | "navigator", 73 | "Mustache" 74 | ] 75 | } -------------------------------------------------------------------------------- /lib/css-shapes-editor/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright 2014 Adobe Systems Incorporated. All rights reserved. 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | 15 | Apache License 16 | Version 2.0, January 2004 17 | http://www.apache.org/licenses/ 18 | 19 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 20 | 21 | 1. Definitions. 22 | 23 | "License" shall mean the terms and conditions for use, reproduction, 24 | and distribution as defined by Sections 1 through 9 of this document. 25 | 26 | "Licensor" shall mean the copyright owner or entity authorized by 27 | the copyright owner that is granting the License. 28 | 29 | "Legal Entity" shall mean the union of the acting entity and all 30 | other entities that control, are controlled by, or are under common 31 | control with that entity. For the purposes of this definition, 32 | "control" means (i) the power, direct or indirect, to cause the 33 | direction or management of such entity, whether by contract or 34 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 35 | outstanding shares, or (iii) beneficial ownership of such entity. 36 | 37 | "You" (or "Your") shall mean an individual or Legal Entity 38 | exercising permissions granted by this License. 39 | 40 | "Source" form shall mean the preferred form for making modifications, 41 | including but not limited to software source code, documentation 42 | source, and configuration files. 43 | 44 | "Object" form shall mean any form resulting from mechanical 45 | transformation or translation of a Source form, including but 46 | not limited to compiled object code, generated documentation, 47 | and conversions to other media types. 48 | 49 | "Work" shall mean the work of authorship, whether in Source or 50 | Object form, made available under the License, as indicated by a 51 | copyright notice that is included in or attached to the work 52 | (an example is provided in the Appendix below). 53 | 54 | "Derivative Works" shall mean any work, whether in Source or Object 55 | form, that is based on (or derived from) the Work and for which the 56 | editorial revisions, annotations, elaborations, or other 57 | modifications 58 | represent, as a whole, an original work of authorship. For the 59 | purposes 60 | of this License, Derivative Works shall not include works that remain 61 | separable from, or merely link (or bind by name) to the interfaces 62 | of, 63 | the Work and Derivative Works thereof. 64 | 65 | "Contribution" shall mean any work of authorship, including 66 | the original version of the Work and any modifications or additions 67 | to that Work or Derivative Works thereof, that is intentionally 68 | submitted to Licensor for inclusion in the Work by the copyright 69 | owner 70 | or by an individual or Legal Entity authorized to submit on behalf of 71 | the copyright owner. For the purposes of this definition, "submitted" 72 | means any form of electronic, verbal, or written communication sent 73 | to the Licensor or its representatives, including but not limited to 74 | communication on electronic mailing lists, source code control 75 | systems, 76 | and issue tracking systems that are managed by, or on behalf of, the 77 | Licensor for the purpose of discussing and improving the Work, but 78 | excluding communication that is conspicuously marked or otherwise 79 | designated in writing by the copyright owner as "Not a Contribution." 80 | 81 | "Contributor" shall mean Licensor and any individual or Legal Entity 82 | on behalf of whom a Contribution has been received by Licensor and 83 | subsequently incorporated within the Work. 84 | 85 | 2. Grant of Copyright License. Subject to the terms and conditions of 86 | this License, each Contributor hereby grants to You a perpetual, 87 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 88 | copyright license to reproduce, prepare Derivative Works of, 89 | publicly display, publicly perform, sublicense, and distribute the 90 | Work and such Derivative Works in Source or Object form. 91 | 92 | 3. Grant of Patent License. Subject to the terms and conditions of 93 | this License, each Contributor hereby grants to You a perpetual, 94 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 95 | (except as stated in this section) patent license to make, have made, 96 | use, offer to sell, sell, import, and otherwise transfer the Work, 97 | where such license applies only to those patent claims licensable 98 | by such Contributor that are necessarily infringed by their 99 | Contribution(s) alone or by combination of their Contribution(s) 100 | with the Work to which such Contribution(s) was submitted. If You 101 | institute patent litigation against any entity (including a 102 | cross-claim or counterclaim in a lawsuit) alleging that the Work 103 | or a Contribution incorporated within the Work constitutes direct 104 | or contributory patent infringement, then any patent licenses 105 | granted to You under this License for that Work shall terminate 106 | as of the date such litigation is filed. 107 | 108 | 4. Redistribution. You may reproduce and distribute copies of the 109 | Work or Derivative Works thereof in any medium, with or without 110 | modifications, and in Source or Object form, provided that You 111 | meet the following conditions: 112 | 113 | (a) You must give any other recipients of the Work or 114 | Derivative Works a copy of this License; and 115 | 116 | (b) You must cause any modified files to carry prominent notices 117 | stating that You changed the files; and 118 | 119 | (c) You must retain, in the Source form of any Derivative Works 120 | that You distribute, all copyright, patent, trademark, and 121 | attribution notices from the Source form of the Work, 122 | excluding those notices that do not pertain to any part of 123 | the Derivative Works; and 124 | 125 | (d) If the Work includes a "NOTICE" text file as part of its 126 | distribution, then any Derivative Works that You distribute must 127 | include a readable copy of the attribution notices contained 128 | within such NOTICE file, excluding those notices that do not 129 | pertain to any part of the Derivative Works, in at least one 130 | of the following places: within a NOTICE text file distributed 131 | as part of the Derivative Works; within the Source form or 132 | documentation, if provided along with the Derivative Works; or, 133 | within a display generated by the Derivative Works, if and 134 | wherever such third-party notices normally appear. The contents 135 | of the NOTICE file are for informational purposes only and 136 | do not modify the License. You may add Your own attribution 137 | notices within Derivative Works that You distribute, alongside 138 | or as an addendum to the NOTICE text from the Work, provided 139 | that such additional attribution notices cannot be construed 140 | as modifying the License. 141 | 142 | You may add Your own copyright statement to Your modifications and 143 | may provide additional or different license terms and conditions 144 | for use, reproduction, or distribution of Your modifications, or 145 | for any such Derivative Works as a whole, provided Your use, 146 | reproduction, and distribution of the Work otherwise complies with 147 | the conditions stated in this License. 148 | 149 | 5. Submission of Contributions. Unless You explicitly state otherwise, 150 | any Contribution intentionally submitted for inclusion in the Work 151 | by You to the Licensor shall be under the terms and conditions of 152 | this License, without any additional terms or conditions. 153 | Notwithstanding the above, nothing herein shall supersede or modify 154 | the terms of any separate license agreement you may have executed 155 | with Licensor regarding such Contributions. 156 | 157 | 6. Trademarks. This License does not grant permission to use the trade 158 | names, trademarks, service marks, or product names of the Licensor, 159 | except as required for reasonable and customary use in describing the 160 | origin of the Work and reproducing the content of the NOTICE file. 161 | 162 | 7. Disclaimer of Warranty. Unless required by applicable law or 163 | agreed to in writing, Licensor provides the Work (and each 164 | Contributor provides its Contributions) on an "AS IS" BASIS, 165 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 166 | implied, including, without limitation, any warranties or conditions 167 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 168 | PARTICULAR PURPOSE. You are solely responsible for determining the 169 | appropriateness of using or redistributing the Work and assume any 170 | risks associated with Your exercise of permissions under this 171 | License. 172 | 173 | 8. Limitation of Liability. In no event and under no legal theory, 174 | whether in tort (including negligence), contract, or otherwise, 175 | unless required by applicable law (such as deliberate and grossly 176 | negligent acts) or agreed to in writing, shall any Contributor be 177 | liable to You for damages, including any direct, indirect, special, 178 | incidental, or consequential damages of any character arising as a 179 | result of this License or out of the use or inability to use the 180 | Work (including but not limited to damages for loss of goodwill, 181 | work stoppage, computer failure or malfunction, or any and all 182 | other commercial damages or losses), even if such Contributor 183 | has been advised of the possibility of such damages. 184 | 185 | 9. Accepting Warranty or Additional Liability. While redistributing 186 | the Work or Derivative Works thereof, You may choose to offer, 187 | and charge a fee for, acceptance of support, warranty, indemnity, 188 | or other liability obligations and/or rights consistent with this 189 | License. However, in accepting such obligations, You may act only 190 | on Your own behalf and on Your sole responsibility, not on behalf 191 | of any other Contributor, and only if You agree to indemnify, 192 | defend, and hold each Contributor harmless for any liability 193 | incurred by, or claims asserted against, such Contributor by reason 194 | of your accepting any such warranty or additional liability. 195 | 196 | END OF TERMS AND CONDITIONS 197 | 198 | APPENDIX: How to apply the Apache License to your work. 199 | 200 | To apply the Apache License to your work, attach the following 201 | boilerplate notice, with the fields enclosed by brackets "[]" 202 | replaced with your own identifying information. (Don't include 203 | the brackets!) The text should be enclosed in the appropriate 204 | comment syntax for the file format. We also recommend that a 205 | file or class name and description of purpose be included on the 206 | same "printed page" as the copyright notice for easier 207 | identification within third-party archives. 208 | 209 | Copyright [yyyy] [name of copyright owner] 210 | 211 | Licensed under the Apache License, Version 2.0 (the "License"); 212 | you may not use this file except in compliance with the License. 213 | You may obtain a copy of the License at 214 | 215 | http://www.apache.org/licenses/LICENSE-2.0 216 | 217 | Unless required by applicable law or agreed to in writing, software 218 | distributed under the License is distributed on an "AS IS" BASIS, 219 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 220 | See the License for the specific language governing permissions and 221 | limitations under the License. 222 | -------------------------------------------------------------------------------- /lib/css-shapes-editor/README.md: -------------------------------------------------------------------------------- 1 | # CSS Shapes Editor 2 | 3 | JavaScript library for interactive editing of CSS Shapes values right in the browser. It works functional values like `polygon()`, `circle()` and `ellipse()`. 4 | 5 | ## Demo 6 | 7 | See the `demo/` folder for examples. 8 | 9 | ## Basic usage 10 | 11 | Load `dist/CSSShapesEditor.js` into the page: 12 | 13 | ```js 14 | 15 | ``` 16 | 17 | Setup the editor to edit a CSS shape value of an element. An interactive editor for the shape is drawn on top of the element. 18 | 19 | ```js 20 | var element = document.querySelector('#element'); 21 | var shape = window.getComputedStyle(element)['shape-outside']; 22 | var editor = CSSShapesEditor(element, shape); 23 | 24 | editor.on('shapechange', function(){ 25 | // update the CSS shape value on the element 26 | element.style['shape-outside'] = editor.getCSSValue(); 27 | }) 28 | ``` 29 | 30 | 31 | Supported shape values: 32 | 33 | - `polygon()` 34 | - `circle()` 35 | - `ellipse()` 36 | 37 | Create a new shape from scratch by passing a shape declaration with no coordinates. 38 | 39 | ```js 40 | var editor = CSSShapesEditor(element, 'polygon()'); 41 | ``` 42 | 43 | ## Events 44 | 45 | The `"ready"` event is dispatched after the editor was initialized 46 | 47 | ```js 48 | editor.on('ready', function(){ 49 | // editor is ready to work with 50 | }) 51 | ``` 52 | 53 | The `"shapechange"` event is dispatched after the shape was changed in the editor 54 | 55 | ```js 56 | editor.on('shapechange', function(){ 57 | // update the CSS shape value on the element 58 | element.style['shape-outside'] = editor.getCSSValue(); 59 | }) 60 | ``` 61 | 62 | The `"removed"` event is dispatched after the editor has been turned off and removed by using `editor.remove()`. 63 | 64 | ```js 65 | editor.on('removed', function(){ 66 | // editor is gone; do other clean-up 67 | }) 68 | ``` 69 | 70 | ## API 71 | 72 | Get the CSS shape value as a string to use in a stylesheet: 73 | 74 | ```js 75 | editor.getCSSValue() 76 | ``` 77 | 78 | Get the CSS shape value as a string with coordinates converted to a specific unit type: 79 | 80 | ```js 81 | editor.getCSSValue('%') 82 | // supported values: ["px", "in", "cm", "mm", "pt", "pc", "em", "rem", "vw", "vh", "%"] 83 | 84 | ``` 85 | 86 | Programmatically update the shape editor with a new shape value: 87 | 88 | ```js 89 | editor.update("circle(50% at center)") 90 | ``` 91 | 92 | Toggle the free-transform editor (scale, move, rotate) for the shape: 93 | 94 | ```js 95 | editor.toggleFreeTransform(); 96 | ``` 97 | 98 | Turn off editor and remove if from the page. **Unsaved changes will be lost.** 99 | 100 | ```js 101 | editor.remove() 102 | ``` 103 | 104 | ## Contributing 105 | 106 | Your system needs: 107 | 108 | - [Node.JS](http://nodejs.org/) 109 | - [Grunt](http://gruntjs.com/) 110 | 111 | ### Setup dev environment 112 | 113 | Install dependencies: 114 | 115 | $ npm install 116 | 117 | ### Build 118 | 119 | Edit source in the `src/` directory. Build with Grunt: 120 | 121 | $ grunt build 122 | 123 | Build output goes into `dist/`. Do not edit source in `dist/`, it gets replaced automatically by the Grunt build process. 124 | 125 | ### Test 126 | 127 | Add tests to `test/spec/`. Run tests with [Testem](https://github.com/airportyh/testem): 128 | 129 | $ testem 130 | 131 | Testem uses the configuration found in `testem.json` 132 | 133 | ## License 134 | 135 | Apache 2.0. See [LICENSE.md](./LICENSE.md) 136 | 137 | ## Thanks 138 | 139 | The work of many people has contributed, both directly and indirectly, to building the CSS Shapes Editor library: 140 | 141 | - [Razvan Caliman](https://github.com/oslego) 142 | - [Bear Travis](https://github.com/betravis) 143 | - [François Remy](https://github.com/FremyCompany) 144 | - [Laurence Mclister](https://github.com/lmclister) 145 | - [Hans Muller](https://github.com/hansmuller) 146 | - [Lawrence Hsu](https://github.com/larz0) 147 | - [Dmitry Baranovskiy](https://github.com/DmitryBaranovskiy) for creating [Snap.svg](http://snapsvg.io/) 148 | - [Elbert Alias](https://github.com/elbertf) for creating [Raphael.FreeTransform ](https://github.com/ElbertF/Raphael.FreeTransform) 149 | 150 | and many, many others. Thank you! 151 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "CSS Shapes Editor", 4 | "version": "1.3.0", 5 | "author": "Razvan Caliman ", 6 | "minimum_chrome_version": "37.0.0", 7 | "description": "Interactive editor for CSS Shapes.", 8 | "devtools_page": "devtools.html", 9 | "icons": { 10 | "128": "images/icon-128-complex.png" 11 | }, 12 | "background": { 13 | "scripts": ["background.js"] 14 | }, 15 | "permissions": [""], 16 | "content_security_policy": "script-src 'self' ; object-src 'self'" 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chrome-css-shapes-editor", 3 | "version": "1.3.0", 4 | "description": "Interactive editor for CSS Shapes", 5 | "main": "background.js", 6 | "scripts": { 7 | "build:templates": "handlebars templates/*.handlebars -f js/templates.js", 8 | "build": "npm run build:templates", 9 | "release": "zip -r chrome-css-shapes-editor.zip . --exclude *.git* node_modules\\* templates\\* update-shapes-editor-lib.sh screenshot.jpg README.md package.json" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/oslego/chrome-css-shapes-editor.git" 14 | }, 15 | "keywords": [ 16 | "css", 17 | "shapes", 18 | "editor" 19 | ], 20 | "author": "Razvan Caliman ", 21 | "license": "Apache 2.0", 22 | "bugs": { 23 | "url": "https://github.com/oslego/chrome-css-shapes-editor/issues" 24 | }, 25 | "homepage": "https://github.com/oslego/chrome-css-shapes-editor", 26 | "devDependencies": { 27 | "handlebars": "^2.0.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslego/chrome-css-shapes-editor/ed5dba21d43b25d573e2c90fd3a5dd55e67af780/screenshot.jpg -------------------------------------------------------------------------------- /sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 121 | 122 | 123 | 124 |
    125 | It looks like this browser does not support CSS Shapes.
    126 | Learn about feature support. 127 |
    128 | 129 |
      130 | 131 |
    132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /templates/property.handlebars: -------------------------------------------------------------------------------- 1 |
  • 2 | {{ property }}: 3 |
    4 | 9 |
    10 | {{ value }}; 11 |
    • 12 | -------------------------------------------------------------------------------- /third-party/handlebars.runtime-v2.0.0.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | handlebars v2.0.0 4 | 5 | Copyright (C) 2011-2014 by Yehuda Katz 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in 15 | all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 23 | THE SOFTWARE. 24 | 25 | @license 26 | */ 27 | /* exported Handlebars */ 28 | (function (root, factory) { 29 | if (typeof define === 'function' && define.amd) { 30 | define([], factory); 31 | } else if (typeof exports === 'object') { 32 | module.exports = factory(); 33 | } else { 34 | root.Handlebars = root.Handlebars || factory(); 35 | } 36 | }(this, function () { 37 | // handlebars/safe-string.js 38 | var __module3__ = (function() { 39 | "use strict"; 40 | var __exports__; 41 | // Build out our basic SafeString type 42 | function SafeString(string) { 43 | this.string = string; 44 | } 45 | 46 | SafeString.prototype.toString = function() { 47 | return "" + this.string; 48 | }; 49 | 50 | __exports__ = SafeString; 51 | return __exports__; 52 | })(); 53 | 54 | // handlebars/utils.js 55 | var __module2__ = (function(__dependency1__) { 56 | "use strict"; 57 | var __exports__ = {}; 58 | /*jshint -W004 */ 59 | var SafeString = __dependency1__; 60 | 61 | var escape = { 62 | "&": "&", 63 | "<": "<", 64 | ">": ">", 65 | '"': """, 66 | "'": "'", 67 | "`": "`" 68 | }; 69 | 70 | var badChars = /[&<>"'`]/g; 71 | var possible = /[&<>"'`]/; 72 | 73 | function escapeChar(chr) { 74 | return escape[chr]; 75 | } 76 | 77 | function extend(obj /* , ...source */) { 78 | for (var i = 1; i < arguments.length; i++) { 79 | for (var key in arguments[i]) { 80 | if (Object.prototype.hasOwnProperty.call(arguments[i], key)) { 81 | obj[key] = arguments[i][key]; 82 | } 83 | } 84 | } 85 | 86 | return obj; 87 | } 88 | 89 | __exports__.extend = extend;var toString = Object.prototype.toString; 90 | __exports__.toString = toString; 91 | // Sourced from lodash 92 | // https://github.com/bestiejs/lodash/blob/master/LICENSE.txt 93 | var isFunction = function(value) { 94 | return typeof value === 'function'; 95 | }; 96 | // fallback for older versions of Chrome and Safari 97 | /* istanbul ignore next */ 98 | if (isFunction(/x/)) { 99 | isFunction = function(value) { 100 | return typeof value === 'function' && toString.call(value) === '[object Function]'; 101 | }; 102 | } 103 | var isFunction; 104 | __exports__.isFunction = isFunction; 105 | /* istanbul ignore next */ 106 | var isArray = Array.isArray || function(value) { 107 | return (value && typeof value === 'object') ? toString.call(value) === '[object Array]' : false; 108 | }; 109 | __exports__.isArray = isArray; 110 | 111 | function escapeExpression(string) { 112 | // don't escape SafeStrings, since they're already safe 113 | if (string instanceof SafeString) { 114 | return string.toString(); 115 | } else if (string == null) { 116 | return ""; 117 | } else if (!string) { 118 | return string + ''; 119 | } 120 | 121 | // Force a string conversion as this will be done by the append regardless and 122 | // the regex test will do this transparently behind the scenes, causing issues if 123 | // an object's to string has escaped characters in it. 124 | string = "" + string; 125 | 126 | if(!possible.test(string)) { return string; } 127 | return string.replace(badChars, escapeChar); 128 | } 129 | 130 | __exports__.escapeExpression = escapeExpression;function isEmpty(value) { 131 | if (!value && value !== 0) { 132 | return true; 133 | } else if (isArray(value) && value.length === 0) { 134 | return true; 135 | } else { 136 | return false; 137 | } 138 | } 139 | 140 | __exports__.isEmpty = isEmpty;function appendContextPath(contextPath, id) { 141 | return (contextPath ? contextPath + '.' : '') + id; 142 | } 143 | 144 | __exports__.appendContextPath = appendContextPath; 145 | return __exports__; 146 | })(__module3__); 147 | 148 | // handlebars/exception.js 149 | var __module4__ = (function() { 150 | "use strict"; 151 | var __exports__; 152 | 153 | var errorProps = ['description', 'fileName', 'lineNumber', 'message', 'name', 'number', 'stack']; 154 | 155 | function Exception(message, node) { 156 | var line; 157 | if (node && node.firstLine) { 158 | line = node.firstLine; 159 | 160 | message += ' - ' + line + ':' + node.firstColumn; 161 | } 162 | 163 | var tmp = Error.prototype.constructor.call(this, message); 164 | 165 | // Unfortunately errors are not enumerable in Chrome (at least), so `for prop in tmp` doesn't work. 166 | for (var idx = 0; idx < errorProps.length; idx++) { 167 | this[errorProps[idx]] = tmp[errorProps[idx]]; 168 | } 169 | 170 | if (line) { 171 | this.lineNumber = line; 172 | this.column = node.firstColumn; 173 | } 174 | } 175 | 176 | Exception.prototype = new Error(); 177 | 178 | __exports__ = Exception; 179 | return __exports__; 180 | })(); 181 | 182 | // handlebars/base.js 183 | var __module1__ = (function(__dependency1__, __dependency2__) { 184 | "use strict"; 185 | var __exports__ = {}; 186 | var Utils = __dependency1__; 187 | var Exception = __dependency2__; 188 | 189 | var VERSION = "2.0.0"; 190 | __exports__.VERSION = VERSION;var COMPILER_REVISION = 6; 191 | __exports__.COMPILER_REVISION = COMPILER_REVISION; 192 | var REVISION_CHANGES = { 193 | 1: '<= 1.0.rc.2', // 1.0.rc.2 is actually rev2 but doesn't report it 194 | 2: '== 1.0.0-rc.3', 195 | 3: '== 1.0.0-rc.4', 196 | 4: '== 1.x.x', 197 | 5: '== 2.0.0-alpha.x', 198 | 6: '>= 2.0.0-beta.1' 199 | }; 200 | __exports__.REVISION_CHANGES = REVISION_CHANGES; 201 | var isArray = Utils.isArray, 202 | isFunction = Utils.isFunction, 203 | toString = Utils.toString, 204 | objectType = '[object Object]'; 205 | 206 | function HandlebarsEnvironment(helpers, partials) { 207 | this.helpers = helpers || {}; 208 | this.partials = partials || {}; 209 | 210 | registerDefaultHelpers(this); 211 | } 212 | 213 | __exports__.HandlebarsEnvironment = HandlebarsEnvironment;HandlebarsEnvironment.prototype = { 214 | constructor: HandlebarsEnvironment, 215 | 216 | logger: logger, 217 | log: log, 218 | 219 | registerHelper: function(name, fn) { 220 | if (toString.call(name) === objectType) { 221 | if (fn) { throw new Exception('Arg not supported with multiple helpers'); } 222 | Utils.extend(this.helpers, name); 223 | } else { 224 | this.helpers[name] = fn; 225 | } 226 | }, 227 | unregisterHelper: function(name) { 228 | delete this.helpers[name]; 229 | }, 230 | 231 | registerPartial: function(name, partial) { 232 | if (toString.call(name) === objectType) { 233 | Utils.extend(this.partials, name); 234 | } else { 235 | this.partials[name] = partial; 236 | } 237 | }, 238 | unregisterPartial: function(name) { 239 | delete this.partials[name]; 240 | } 241 | }; 242 | 243 | function registerDefaultHelpers(instance) { 244 | instance.registerHelper('helperMissing', function(/* [args, ]options */) { 245 | if(arguments.length === 1) { 246 | // A missing field in a {{foo}} constuct. 247 | return undefined; 248 | } else { 249 | // Someone is actually trying to call something, blow up. 250 | throw new Exception("Missing helper: '" + arguments[arguments.length-1].name + "'"); 251 | } 252 | }); 253 | 254 | instance.registerHelper('blockHelperMissing', function(context, options) { 255 | var inverse = options.inverse, 256 | fn = options.fn; 257 | 258 | if(context === true) { 259 | return fn(this); 260 | } else if(context === false || context == null) { 261 | return inverse(this); 262 | } else if (isArray(context)) { 263 | if(context.length > 0) { 264 | if (options.ids) { 265 | options.ids = [options.name]; 266 | } 267 | 268 | return instance.helpers.each(context, options); 269 | } else { 270 | return inverse(this); 271 | } 272 | } else { 273 | if (options.data && options.ids) { 274 | var data = createFrame(options.data); 275 | data.contextPath = Utils.appendContextPath(options.data.contextPath, options.name); 276 | options = {data: data}; 277 | } 278 | 279 | return fn(context, options); 280 | } 281 | }); 282 | 283 | instance.registerHelper('each', function(context, options) { 284 | if (!options) { 285 | throw new Exception('Must pass iterator to #each'); 286 | } 287 | 288 | var fn = options.fn, inverse = options.inverse; 289 | var i = 0, ret = "", data; 290 | 291 | var contextPath; 292 | if (options.data && options.ids) { 293 | contextPath = Utils.appendContextPath(options.data.contextPath, options.ids[0]) + '.'; 294 | } 295 | 296 | if (isFunction(context)) { context = context.call(this); } 297 | 298 | if (options.data) { 299 | data = createFrame(options.data); 300 | } 301 | 302 | if(context && typeof context === 'object') { 303 | if (isArray(context)) { 304 | for(var j = context.length; i= 0; 29 | 30 | if (hasMatch) { 31 | entry.handler.call(targetElement, event); 32 | } 33 | }); 34 | } 35 | 36 | return { 37 | delegate: function (selector, event, handler, scope) { 38 | scope = scope || window; 39 | 40 | if (!eventRegistry[event]) { 41 | eventRegistry[event] = []; 42 | scope.document.documentElement.addEventListener(event, dispatchEvent, true); 43 | } 44 | 45 | eventRegistry[event].push({ 46 | selector: selector, 47 | handler: handler 48 | }); 49 | }, 50 | 51 | undelegate: function (selector, event, handler, scope){ 52 | scope = scope || window; 53 | 54 | // remove listeners for everything; 55 | if (!selector && !event && !handler){ 56 | var events = Object.keys(eventRegistry); 57 | events.forEach(function(event){ 58 | scope.document.documentElement.removeEventListener(event, dispatchEvent, true); 59 | delete eventRegistry[event]; 60 | }); 61 | } 62 | 63 | // TODO implement per-case undelegation 64 | } 65 | }; 66 | }()); 67 | 68 | // Find the element's parent with the given tag name: 69 | // $parent(qs('a'), 'div'); 70 | window.$parent = function (element, tagName) { 71 | if (!element.parentNode) { 72 | return; 73 | } 74 | if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase()) { 75 | return element.parentNode; 76 | } 77 | return window.$parent(element.parentNode, tagName); 78 | }; 79 | 80 | /* 81 | Takes a CSS property string and returns a DOM property string. 82 | @example: -webkit-shape-inside -> webkitShapeInside 83 | */ 84 | window.toDOMProperty = function(str){ 85 | if (typeof str !== 'string'){ 86 | return; 87 | } 88 | 89 | while(str.charAt(0) == '-'){ 90 | str = str.substr(1); 91 | } 92 | 93 | str = str.replace(/-(\w)/gi, function(match, group, index){ 94 | return group.toUpperCase(); 95 | }); 96 | 97 | return str; 98 | }; 99 | 100 | 101 | // Allow for looping on nodes by chaining: 102 | // qsa('.foo').forEach(function () {}) 103 | NodeList.prototype.forEach = Array.prototype.forEach; 104 | 105 | window.extend = function(obj){ 106 | var arr = []; 107 | var each = arr.forEach; 108 | var slice = arr.slice; 109 | 110 | each.call(slice.call(arguments, 1), function(source) { 111 | if (source) { 112 | for (var prop in source) { 113 | obj[prop] = source[prop]; 114 | } 115 | } 116 | }); 117 | 118 | return obj; 119 | } 120 | })(window); 121 | -------------------------------------------------------------------------------- /update-shapes-editor-lib.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | git subtree pull --prefix lib/css-shapes-editor git@github.com:adobe-webplatform/css-shapes-editor.git master --squash 3 | --------------------------------------------------------------------------------