2 |
5 |
10 |
--------------------------------------------------------------------------------
/propertysheet/DockedToolboxHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | $(document).on("click","#launch-toolbox",function(event){
13 | $("#docked-toolbox,#html-design-editor,#grid-settings-container").toggleClass('toolboxDocked');
14 | $(this).toggleClass('activated');
15 | event.preventDefault();
16 | event.stopPropagation();
17 | });
18 | });
--------------------------------------------------------------------------------
/InteractionModeHandler.js:
--------------------------------------------------------------------------------
1 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
2 | /*global define */
3 |
4 | define(function (require, exports, module) {
5 | "use strict";
6 |
7 | $(document).on("click","#interaction-mode", function(){
8 | $(this).toggleClass('activated');
9 | $("#html-design-editor").trigger("deselect.all");
10 | $("#info-overlay-plane,.eventListnerPane").toggleClass('deactivated');
11 | $("#designer-content-placeholder .horz-resizer .gripper").toggle();
12 | $("#designer-content-placeholder .vert-resizer .gripper").toggle();
13 | });
14 |
15 | });
16 |
--------------------------------------------------------------------------------
/controlhtml/prospective-parent-highlight.html:
--------------------------------------------------------------------------------
1 |
24 |
25 |
--------------------------------------------------------------------------------
/ResizeHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | require("resizer/BottomCenterResizer");
13 | require("resizer/BottomLeftResizer");
14 | require("resizer/BottomRightResizer");
15 | require("resizer/TopCenterResizer");
16 | require("resizer/TopLeftResizer");
17 | require("resizer/TopRightResizer");
18 | require("resizer/MiddleLeftResizer");
19 | require("resizer/MiddleRightResizer");
20 |
21 | });
--------------------------------------------------------------------------------
/editmodule/CopyContext.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var lastContext = null;
13 |
14 | $(document).on("copy-element","#html-design-editor", function(event){
15 | $("#html-design-editor").trigger("add-to-clipboard",["copyContext",lastContext]);
16 | });
17 |
18 | $(document).on("targetdom.contextmenu","#html-design-editor", function(e,elem,point){
19 | lastContext = elem;
20 | });
21 |
22 | });
--------------------------------------------------------------------------------
/propertysheet/GenericToolBoxHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var AppInit = brackets.getModule("utils/AppInit");
13 |
14 | AppInit.appReady(function () {
15 | $(".property-toolbox")
16 | .draggable({handle:'.propertyToolboxHeader',
17 | containment : '#info-overlay-plane'
18 | });
19 | $("#design-toolbox").show();
20 | });
21 |
22 | });
--------------------------------------------------------------------------------
/widgetprofiles/UIDGenerator.js:
--------------------------------------------------------------------------------
1 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
2 | /*global define, document, console, brackets, $, Mustache */
3 |
4 | define(function (require, exports, module) {
5 | "use strict";
6 |
7 | function _getID(){
8 | var date = new Date();
9 | var components = [
10 | date.getMonth(),
11 | date.getDate(),
12 | date.getHours(),
13 | date.getMinutes(),
14 | date.getSeconds(),
15 | date.getMilliseconds()
16 | ];
17 |
18 | var id = components.join("");
19 | return id;
20 | }
21 |
22 | exports.getID = _getID;
23 |
24 | });
--------------------------------------------------------------------------------
/widgetprofiles/html/widget-edit-context-template.html:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/toolboxhtml/cssPropertyTemplate.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/controlhtml/ruler-options-menu.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/propertysheet/WidgetToolboxHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | $(document).on("click","#widget-toolbox-anchor",function(event){
13 | $("#widget-toolbox").show();
14 | event.preventDefault();
15 | event.stopPropagation();
16 | });
17 |
18 | $(document).on("click","#widget-toolbox-close",function(event){
19 | $("#widget-toolbox").hide();
20 | event.preventDefault();
21 | event.stopPropagation();
22 | });
23 |
24 | });
--------------------------------------------------------------------------------
/toolboxhtml/cssNewPropertyTemplate.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/CommonUtils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 | */
4 |
5 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
6 | /*global define, document, console, brackets, $, Mustache */
7 |
8 | define(function (require, exports, module) {
9 | "use strict";
10 |
11 | //Function to check whether a file extension is a valid markup container
12 | function _isValidMarkupFile(extn){
13 | var valid = false;
14 | switch(extn){
15 | case 'html':
16 | case 'shtml':
17 | case 'xhtml':
18 | case 'htm': valid = true;
19 | }
20 |
21 | return valid;
22 | }
23 |
24 | // expose
25 | exports.isValidMarkupFile = _isValidMarkupFile;
26 |
27 | });
28 |
--------------------------------------------------------------------------------
/attribute/html/listAttributeTemplate.html:
--------------------------------------------------------------------------------
1 |
2 | id
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/attribute/html/attributeToolboxTemplate.html:
--------------------------------------------------------------------------------
1 |
12 |
16 |
17 |
--------------------------------------------------------------------------------
/propertysheet/GenericBorderToolBoxHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var AppInit = brackets.getModule("utils/AppInit");
13 | var lastSelectedRuleset = null;
14 |
15 | $(document).on("click","#generic-border-toolbox-anchor",function(event){
16 | $("#border-toolbox").show();
17 | $("#border-toolbox-anchor").click();
18 | event.preventDefault();
19 | event.stopPropagation();
20 | });
21 |
22 | $(document).on("click","#border-toolbox-close",function(event){
23 | $("#border-toolbox").hide();
24 | event.preventDefault();
25 | event.stopPropagation();
26 |
27 | });
28 |
29 | });
--------------------------------------------------------------------------------
/responsive/html/fluidGridTemplate.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/view/NetworkViewManager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | function _showNWPanel(){
13 | $("#nw-resource-url")[0].value = "";
14 | $("#network-resource-bar").show();
15 | }
16 |
17 | function _hideNWPanel(){
18 | $("#network-resource-bar").hide();
19 | }
20 |
21 | $(document).on("change","#nw-resource-url", function(){
22 | _hideNWPanel();
23 | $("#html-design-editor").trigger("open-nw-resource",[$(this).val()]);
24 | });
25 |
26 | $(document).on("targetdom.element.click","#html-design-editor", _hideNWPanel);
27 |
28 | $(document).on("click", "#close-nw-panel", _hideNWPanel);
29 |
30 | $(document).on("click", "#open-network-page", _showNWPanel);
31 | });
--------------------------------------------------------------------------------
/responsive/BrightColorPool.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 |
11 | var colorPool = [
12 | "rgba(67, 198, 219, 0.7)",
13 | "rgba(219, 88, 68, 0.7)",
14 | "rgba(21, 137, 255, 0.7)",
15 | "rgba(255, 138, 20, 0.7)",
16 | "rgba(226, 56, 236, 0.7)",
17 | "rgba(66, 237, 57, 0.7)",
18 | "rgba(232, 163, 23, 0.7)",
19 | "rgba(23, 93, 232, 0.7)",
20 | "rgba(89, 232, 23, 0.7)",
21 | "rgba(166, 23, 232, 0.7)",
22 | "rgba(0, 32, 194, 0.7)",
23 | "rgba(255, 36, 0, 0.7)"
24 | ];
25 |
26 | function _getColor(index){
27 | return colorPool[index % 12];
28 | }
29 |
30 | exports.getColor = _getColor;
31 | });
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 | Copyright (c) 2015, Cisco Systems, Inc., Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
3 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
4 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/stylemodule/CSSNodeFormatter.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | define(function (require, exports, module) {
7 | "use strict";
8 |
9 | var beautify_css = require('lib/beautify/beautify-css').css_beautify;
10 |
11 | var config = JSON.parse(require('text!lib/beautify/config/defaults.json'));
12 |
13 | function _formatCSSAsText(styleSheet,asMarkup){
14 | var styleText = [];
15 | for( var i in styleSheet.rules){
16 | if(styleSheet.rules[i].cssText){
17 | styleText.push(styleSheet.rules[i].cssText);
18 | }
19 | }
20 |
21 | if(!asMarkup){
22 | styleText = styleText.join('\n').split(';').join(';\n').split('{').join('\n{\n').split('}').join('\n}\n');
23 | styleText = beautify_css(styleText,config);
24 | } else {
25 | styleText = styleText.join('');
26 | styleText = styleText.split("\n").join("");
27 | }
28 |
29 | return styleText;
30 | }
31 |
32 | exports.formatCSSAsText = _formatCSSAsText;
33 | });
34 |
--------------------------------------------------------------------------------
/editmodule/EditClipBoard.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var lastSelectedElement;
13 | var clipBoardItem = null;
14 |
15 | $(document).on("element.selected","#html-design-editor",function(event,element){
16 | lastSelectedElement = element;
17 | });
18 |
19 | $(document).on("deselect.all","#html-design-editor",function(event){
20 | lastSelectedElement = null;
21 | });
22 |
23 | $(document).on("add-to-clipboard","#html-design-editor",function(event,context,item){
24 | clipBoardItem = item || lastSelectedElement;
25 | $("#html-design-editor").trigger("added-to-clipboard",[clipBoardItem,context]);
26 | });
27 |
28 | $(document).on("clear-clipboard","#html-design-editor",function(event,context){
29 | clipBoardItem = null;
30 | $("#html-design-editor").trigger("clipboard-cleared");
31 | });
32 |
33 | });
--------------------------------------------------------------------------------
/lib/jQuery-Knob/knob.jquery.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "knob",
3 | "title": "jQuery Knob",
4 | "description": "Nice, downward compatible, touchable, jQuery dial.",
5 | "keywords": [
6 | "dial",
7 | "button",
8 | "knob",
9 | "ui",
10 | "input"
11 | ],
12 | "version": "1.2.11",
13 | "author": {
14 | "name": "Anthony Terrien",
15 | "url": "https://github.com/aterrien"
16 | },
17 | "maintainers": [
18 | {
19 | "name": "Anthony Terrien",
20 | "email": "kontrol@anthonyterrien.com",
21 | "url": "http://anthonyterrien.com/knob"
22 | }
23 | ],
24 | "licenses": [
25 | {
26 | "type": "MIT",
27 | "url": "http://opensource.org/licenses/mit-license.php"
28 | }
29 | ],
30 | "bugs": "https://github.com/aterrien/jQuery-Knob/issues",
31 | "homepage": "https://github.com/aterrien/jQuery-Knob",
32 | "docs": "https://github.com/aterrien/jQuery-Knob",
33 | "download": "https://github.com/aterrien/jQuery-Knob/tags",
34 | "dependencies": {
35 | "jquery": ">=1.7.0"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/lib/jQuery-Knob/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013 Anthony Terrien
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/attribute/html/attributeTemplate.html:
--------------------------------------------------------------------------------
1 |
2 | id
3 |
4 |
5 |
9 |
10 |
--------------------------------------------------------------------------------
/DesignAreaSandboxingHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var AppInit = brackets.getModule("utils/AppInit"),
13 | CommandManager = brackets.getModule("command/CommandManager");
14 |
15 | var sandbox="allow-same-origin";
16 |
17 | function _toggleSanboxing(){
18 | var existing = $('#htmldesignerIframe').attr('sandbox');
19 | if(existing){
20 | $('#htmldesignerIframe').attr('sandbox',null);
21 | $('#sandbox-frame').attr('title','Enable Sandboxing');
22 | } else {
23 | $('#htmldesignerIframe').attr('sandbox',sandbox);
24 | $('#sandbox-frame').attr('title','Disable Sandboxing');
25 | }
26 | }
27 |
28 | $(document).on("click", "#sandbox-frame", _toggleSanboxing);
29 |
30 | AppInit.appReady(function () {
31 | CommandManager.register("Toggle Sandboxing", "toggle.design.sandboxing", _toggleSanboxing);
32 | });
33 |
34 | });
--------------------------------------------------------------------------------
/Commands.js:
--------------------------------------------------------------------------------
1 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
2 | /*global define */
3 |
4 | define(function (require, exports, module) {
5 | "use strict";
6 |
7 | // FILE
8 | exports.AD_ALIGN_LEFT = "appdesigner.alignLeft";
9 | exports.AD_ALIGN_RIGHT = "appdesigner.alignRight";
10 | exports.AD_ALIGN_TOP = "appdesigner.alignTop";
11 | exports.AD_ALIGN_BOTTOM = "appdesigner.alignBottom";
12 | exports.AD_ALIGN_MIDDLE = "appdesigner.alignMiddle";
13 | exports.AD_ALIGN_CENTER = "appdesigner.alignCenter";
14 |
15 | /*arrange*/
16 | exports.AD_BRING_FORWARD = "appdesigner.bringforward";
17 | exports.AD_SEND_BACKWARD = "appdesigner.sendbackward";
18 | exports.AD_BRING_FRONT = "appdesigner.bringfront";
19 | exports.AD_SEND_BACK = "appdesigner.sendback";
20 |
21 | /*preview*/
22 | exports.AD_SECTION_PREVIEW = "appdesigner.sectionpreview";
23 |
24 | /*stylePicker */
25 | exports.AD_STYLE_PICKER = "appdesigner.stylePicker";
26 |
27 | /* AD Design Editor */
28 | exports.AD_SHOW_HIDE_DESIGNEDITOR = "appdesigner.showhidedesigneditor";
29 | });
30 |
--------------------------------------------------------------------------------
/widgetprofiles/widgetTemplates/html/img.html:
--------------------------------------------------------------------------------
1 |
2 | 
--------------------------------------------------------------------------------
/stylemodule/CSSPersistenceManager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | define(function (require, exports, module) {
7 | "use strict";
8 |
9 | var FileUtils = brackets.getModule("file/FileUtils"),
10 | Commands = brackets.getModule("command/Commands"),
11 | CommandManager = brackets.getModule("command/CommandManager");
12 |
13 | var dirtyStyleDocs = {};
14 |
15 |
16 | function _saveStyleDocs(application){
17 | var count = 0;
18 | var dirtyDocs = dirtyStyleDocs[application];
19 | if(dirtyDocs){
20 | for(count = 0;count"+inputElement.outerHTML+selectString+"
";
25 | $(inputElement).replaceWith(wrapperDiv);
26 | $("#"+inputID).css('top',0).css('left',0);
27 | }
28 |
29 | AppInit.appReady(function () {
30 |
31 | var inputs = $("#generic-toolbox :text");
32 | console.log(inputs);
33 | /*for(var i in inputs){
34 | if($(inputs[i]).data("unit")){
35 | _appendUnitSelect(inputs[i]);
36 | }
37 | }*/
38 | _appendUnitSelect($("#bg-image-position-x")[0]);
39 |
40 | });
41 | });
--------------------------------------------------------------------------------
/resizer/MiddleLeftResizer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var startOffset = null;
13 | var layout = null;
14 |
15 | $(document).on("mousedown","#middle-left-control",function(event){
16 | startOffset = {x:event.clientX,y:event.clientY};
17 | $("#element-resize-plane").show();
18 | event.stopPropagation();
19 | layout.open();
20 | });
21 |
22 | $(document).on("mousemove","#element-resize-plane",function(event){
23 | if(startOffset){
24 | var xMov = startOffset.x - event.clientX;
25 | if(layout.xAxisAlignment === 'left'){
26 | layout.changeX(xMov);
27 | }
28 | layout.changeWidth(xMov);
29 | layout.refresh();
30 | startOffset = {x:event.clientX,y:event.clientY};
31 | event.stopPropagation();
32 | }
33 | });
34 |
35 | $(document).on("mouseleave mouseout mouseup ","#element-resize-plane",function(event){
36 | if(startOffset){
37 | startOffset = null;
38 | $("#element-resize-plane").hide();
39 | event.stopPropagation();
40 | layout.close();
41 | }
42 | });
43 |
44 | $(document).on("layout.decision","#html-design-editor", function(event,layoutObj){
45 | layout = layoutObj;
46 | });
47 |
48 | $(document).on("grouplayout.decision","#html-design-editor", function(event,layoutObj){
49 | layout = layoutObj;
50 | });
51 |
52 | });
--------------------------------------------------------------------------------
/resizer/MiddleRightResizer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var startOffset = null;
13 | var layout = null;
14 |
15 | $(document).on("mousedown","#middle-right-control",function(event){
16 | startOffset = {x:event.clientX,y:event.clientY};
17 | $("#element-resize-plane").show();
18 | event.stopPropagation();
19 | layout.open();
20 | });
21 |
22 | $(document).on("mousemove","#element-resize-plane",function(event){
23 | if(startOffset){
24 | var xMov = startOffset.x - event.clientX;
25 | if(layout.xAxisAlignment === 'right'){
26 | layout.changeX(xMov);
27 | }
28 | layout.changeWidth(0 - xMov);
29 | layout.refresh();
30 | startOffset = {x:event.clientX,y:event.clientY};
31 | event.stopPropagation();
32 | }
33 | });
34 |
35 | $(document).on("mouseleave mouseout mouseup ","#element-resize-plane",function(event){
36 | if(startOffset){
37 | startOffset = null;
38 | $("#element-resize-plane").hide();
39 | event.stopPropagation();
40 | layout.close();
41 | }
42 | });
43 |
44 | $(document).on("layout.decision","#html-design-editor", function(event,layoutObj){
45 | layout = layoutObj;
46 | });
47 |
48 | $(document).on("grouplayout.decision","#html-design-editor", function(event,layoutObj){
49 | layout = layoutObj;
50 | });
51 | });
--------------------------------------------------------------------------------
/resizer/BottomCenterResizer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var startOffset = null;
13 | var layout = null;
14 |
15 | $(document).on("mousedown","#bottom-center-control",function(event){
16 | startOffset = {x:event.clientX,y:event.clientY};
17 | $("#element-resize-plane").show();
18 | event.stopPropagation();
19 | layout.open();
20 | });
21 |
22 | $(document).on("mousemove","#element-resize-plane",function(event){
23 | if(startOffset){
24 | var yMov = startOffset.y - event.clientY;
25 | if(layout.yAxisAlignment === 'bottom'){
26 | layout.changeY(yMov);
27 | }
28 | layout.changeHeight(0 - yMov);
29 | layout.refresh();
30 | startOffset = {x:event.clientX,y:event.clientY};
31 | event.stopPropagation();
32 | }
33 | });
34 |
35 | $(document).on("mouseleave mouseout mouseup ","#element-resize-plane",function(event){
36 | if(startOffset){
37 | startOffset = null;
38 | $("#element-resize-plane").hide();
39 | event.stopPropagation();
40 | layout.close();
41 | }
42 | });
43 |
44 | $(document).on("layout.decision","#html-design-editor", function(event,layoutObj){
45 | layout = layoutObj;
46 | });
47 |
48 | $(document).on("grouplayout.decision","#html-design-editor", function(event,layoutObj){
49 | layout = layoutObj;
50 | });
51 |
52 | });
--------------------------------------------------------------------------------
/ElementDeleteHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var lastSelectedElement;
13 |
14 | $(document).on("element.selected","#html-design-editor",function(event,element){
15 | lastSelectedElement = element;
16 | });
17 |
18 | $(document).on("deselect.all","#html-design-editor",function(event){
19 | //lastSelectedElement = null;
20 | });
21 |
22 | $(document).on("multiselection.done","#html-design-editor", function(event,elements){
23 | lastSelectedElement = elements;
24 | });
25 |
26 | function _handleDelete(){
27 | if(lastSelectedElement){
28 | $("#html-design-editor")
29 | .trigger(
30 | "design.editor.event"
31 | ,['delete.element'
32 | ,{ element : lastSelectedElement},'html']
33 | );
34 | $("#html-design-editor").trigger('groupdeselect.all');
35 | $("#html-design-editor").trigger('deselect.all');
36 | }
37 | }
38 |
39 | $(document).on("delete-element","#html-design-editor", function(event){
40 | _handleDelete();
41 | });
42 |
43 | function _handleElementDeletion(event){
44 | if($("#html-design-template").is(':visible')){
45 | if(event.which === 46){
46 | if($("input:focus").length === 0 && $("textarea:focus").length === 0){
47 | _handleDelete();
48 | }
49 | }
50 | }
51 | }
52 |
53 | $(window).on('keydown',_handleElementDeletion);
54 |
55 |
56 | });
--------------------------------------------------------------------------------
/resizer/TopRightResizer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var startOffset = null;
13 | var layout = null;
14 |
15 | $(document).on("mousedown","#top-right-control",function(event){
16 | startOffset = {x:event.clientX,y:event.clientY};
17 | $("#element-resize-plane").show();
18 | event.stopPropagation();
19 | layout.open();
20 | });
21 |
22 | $(document).on("mousemove","#element-resize-plane",function(event){
23 | if(startOffset){
24 |
25 | var xMov = startOffset.x - event.clientX;
26 | var yMov = startOffset.y - event.clientY;
27 |
28 | if(layout.yAxisAlignment === 'top'){
29 | layout.changeY(yMov);
30 | }
31 | if(layout.xAxisAlignment === 'right'){
32 | layout.changeX(xMov);
33 | }
34 | layout.changeWidth(0 - xMov);
35 | layout.changeHeight(yMov);
36 | layout.refresh();
37 | startOffset = {x:event.clientX,y:event.clientY};
38 | event.stopPropagation();
39 | }
40 | });
41 |
42 | $(document).on("mouseleave mouseout mouseup ","#element-resize-plane",function(event){
43 | if(startOffset){
44 | startOffset = null;
45 | $("#element-resize-plane").hide();
46 | event.stopPropagation();
47 | layout.close();
48 | }
49 | });
50 |
51 | $(document).on("layout.decision","#html-design-editor", function(event,layoutObj){
52 | layout = layoutObj;
53 | });
54 |
55 | $(document).on("grouplayout.decision","#html-design-editor", function(event,layoutObj){
56 | layout = layoutObj;
57 | });
58 |
59 | });
--------------------------------------------------------------------------------
/ElementHrchyBreadcrumbHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var lastselectedElement = null;
13 | var breadCrumbItem = '
64 |
--------------------------------------------------------------------------------
/PreSelectionHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 | */
4 |
5 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
6 | /*global define, document, console, brackets, $, Mustache */
7 |
8 | define(function (require, exports, module) {
9 | "use strict";
10 |
11 | var isPreSelectionActivated = true;
12 | var preselectedElement = null;
13 | var lastSelectedElement = null;
14 |
15 | function _showPreControls(element){
16 | var boundingRect = element.getBoundingClientRect();
17 | $("#hover-outline").css("top",boundingRect.top+23);
18 | $("#hover-outline").css("left",boundingRect.left+23);
19 | $("#hover-outline").css("width",boundingRect.width);
20 | $("#hover-outline").css("height",boundingRect.height);
21 | $("#hover-outline").show();
22 | preselectedElement = element;
23 | }
24 |
25 | function _handlePreSelection(element){
26 | if(preselectedElement !== element){
27 | _handleDeselection();
28 | if(isPreSelectionActivated && element && element.tagName !== 'BODY' && element.tagName !== 'HTML' && lastSelectedElement!== element){
29 | _showPreControls(element);
30 | }
31 | }
32 | }
33 |
34 | function _handleDeselection(){
35 | $("#hover-outline").hide();
36 | preselectedElement = null;
37 | }
38 |
39 | $(document).on("panelResizeStart", "#designer-content-placeholder", function () {
40 | isPreSelectionActivated = false;
41 | });
42 |
43 | $(document).on("panelResizeEnd", "#designer-content-placeholder", function () {
44 | isPreSelectionActivated = true;
45 | });
46 |
47 | $(document).on("targetdom.element.mousemove copymousemove","#html-design-editor",function(event,element,point){
48 | _handlePreSelection(element);
49 | });
50 |
51 | $(document).on("mouseout","#scrollPlane",function(event){
52 | _handleDeselection();
53 | });
54 |
55 | $(document).on("targetdom.element.mouseout targetdom.element.mouseleave","#html-design-editor",function(){
56 | _handleDeselection();
57 | });
58 |
59 | $(document).on("element.selected","#html-design-editor",function(event,element){
60 | lastSelectedElement = element;
61 | _handleDeselection();
62 | });
63 |
64 | $(document).on("deselect.all","#html-design-editor",function(event,element){
65 | lastSelectedElement = null;
66 | _handleDeselection();
67 | });
68 |
69 | });
--------------------------------------------------------------------------------
/RotationHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var RAD2DEG = 180 / Math.PI;
13 | var elementToRotate = null;
14 | var mouseDown = false;
15 | var rotationEntryPoint = null;
16 | var rotationReferencePoint = null;
17 | var elementCenter = null;
18 |
19 | function _updateRotation(e,targetDOMElement,targetDOMEventPoint){
20 | if(mouseDown){
21 | console.warn(" rotation control 2");
22 | rotationReferencePoint = Math.atan2(elementCenter.centerY - targetDOMEventPoint.y, targetDOMEventPoint.x - elementCenter.centerX);
23 | var rotationAngle = (rotationEntryPoint - rotationReferencePoint) * RAD2DEG;
24 | $(elementToRotate).css('-webkit-transform','rotate('+rotationAngle+'deg)');
25 | $("#selection-outline").css('-webkit-transform','rotate('+rotationAngle+'deg)');
26 | }
27 | }
28 |
29 |
30 | function bindRotationHandler(element){
31 | elementToRotate = element;
32 | elementCenter = {centerX:0,centerY:0};
33 | elementCenter.centerX = $(elementToRotate).offset().left + $(elementToRotate).width()/2;
34 | elementCenter.centerY = $(elementToRotate).offset().top + $(elementToRotate).height()/2;
35 | $("#selection-outline").css('-webkit-transform',$(element).css('-webkit-transform'));
36 | }
37 |
38 | $(document).on('targetdom.element.mousemove',"#html-design-editor",_updateRotation);
39 |
40 | $(document).on('targetdom.element.mouseup',"#html-design-editor",function(event){
41 | rotationEntryPoint = null;
42 | mouseDown = false;
43 | });
44 |
45 | $(document).on('mousedown',"#element-rotation-control",function(event){
46 | mouseDown = true;
47 | rotationEntryPoint = Math.atan2(elementCenter.centerY - event.pageY, event.pageX - elementCenter.centerX);
48 | event.preventDefault();
49 | event.stopPropagation();
50 | });
51 |
52 | $(document).on('mouseup',".controlDiv",function(event){
53 | rotationEntryPoint = null;
54 | mouseDown = false;
55 | $("#html-design-editor").trigger('html.element.updated');
56 | event.preventDefault();
57 | event.stopPropagation();
58 | });
59 |
60 | exports.bindRotationHandler = bindRotationHandler;
61 |
62 | });
--------------------------------------------------------------------------------
/propertysheet/BackgroundGradientToolboxHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var AppInit = brackets.getModule("utils/AppInit");
13 | var lastSelectedRuleset = null;
14 |
15 | $(document).on("ruleset-wrapper.created ruleset-wrapper.refreshed","#html-design-editor",function(event,rulesetref){
16 | lastSelectedRuleset = rulesetref;
17 | });
18 |
19 | function _applyGradient(){
20 | var startColor = $("#gradient-start-color").val();
21 | var endColor = $("#gradient-end-color").val();
22 | var startPos = $("#start-position-input").val();
23 | var endPos = $("#end-position-input").val();
24 | var angle = $("#angle-input").val();
25 | if(startColor && endColor && startPos && endPos && angle){
26 | lastSelectedRuleset.css('background','linear-gradient('+angle+'deg, '+startColor+' '+startPos+'%, '+endColor+' '+endPos+'%)');
27 | lastSelectedRuleset.persist();
28 | }
29 | }
30 |
31 | AppInit.appReady(function () {
32 | $("#gradient-start-color").colorpicker().on('changeColor.colorpicker', function(event){
33 | _applyGradient();
34 | });
35 |
36 | $("#gradient-end-color").colorpicker().on('changeColor.colorpicker', function(event){
37 | _applyGradient();
38 | });
39 |
40 | $("#angle-input").knob({
41 | 'change' : function (v) {
42 | $("#angle-input").val(v).trigger('change');
43 | }
44 | });
45 |
46 | });
47 |
48 | $(document).on("input","#start-position-range-input",function(){
49 | $("#start-position-input").val(this.value);
50 | _applyGradient();
51 | });
52 |
53 | $(document).on("input","#end-position-range-input",function(){
54 | $("#end-position-input").val(this.value);
55 | _applyGradient();
56 | });
57 |
58 | $(document).on("input change","#angle-input",function(){
59 | _applyGradient();
60 | });
61 |
62 |
63 | //$(document).on("change","#gradient-start-color",_applyGradient);
64 | //$(document).on("change","#gradient-end-color",_applyGradient);
65 | $(document).on("change","#start-position-input",_applyGradient);
66 | $(document).on("change","#end-position-input",_applyGradient);
67 | $(document).on("change","#angle-input",_applyGradient);
68 |
69 | });
--------------------------------------------------------------------------------
/controlhtml/settingsTemplate.html:
--------------------------------------------------------------------------------
1 |
48 |
--------------------------------------------------------------------------------
/editmodule/CutContext.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var clipBoardItem = null;
13 | var lastContext = null;
14 |
15 | $(document).on("cut-element","#html-design-editor", function(event){
16 | $("#html-design-editor").trigger("add-to-clipboard",["cutContext",lastContext]);
17 | $("#html-design-editor").trigger("deselect.all");
18 | });
19 |
20 | $(document).on("added-to-clipboard","#html-design-editor", function(event,element,context){
21 | if(context === "cutContext"){
22 | clipBoardItem = element;
23 | _applyCutMaskPosition();
24 | $("#cut-mask").show();
25 | }
26 | });
27 |
28 | function _cancelCutContext(){
29 | clipBoardItem = null;
30 | $("#cut-mask").hide();
31 | $("#html-design-editor").trigger("clear-clipboard");
32 | }
33 |
34 | $(document).on("element.selected","#html-design-editor",function(event,element){
35 | if(clipBoardItem && (clipBoardItem === element || $(clipBoardItem).find(element).length > 0)){
36 | _cancelCutContext();
37 | }
38 | });
39 |
40 | $(document).on("element-cut-completed","#html-design-editor", function(event){
41 | clipBoardItem = null;
42 | $("#cut-mask").hide();
43 | $("#html-design-editor").trigger("clear-clipboard");
44 | });
45 |
46 | function _applyCutMaskPosition(){
47 | var asynchPromise = new $.Deferred();
48 | if(clipBoardItem){
49 | var boundingRect = clipBoardItem.getBoundingClientRect();
50 | $("#cut-mask").css("top",boundingRect.top);
51 | $("#cut-mask").css("left",boundingRect.left);
52 | $("#cut-mask").css("width",boundingRect.width-1);
53 | $("#cut-mask").css("height",boundingRect.height-1);
54 | }
55 | asynchPromise.resolve();
56 | return asynchPromise.promise();
57 | }
58 |
59 | $(document).on("targetdom.contextmenu","#html-design-editor", function(e,elem,point){
60 | lastContext = elem;
61 | });
62 |
63 | $(document).on('refresh.element.selection',"#html-design-editor",_applyCutMaskPosition);
64 |
65 | function _handleCutContextRetention(event){
66 | var ESC = 27;
67 | if(clipBoardItem && event.which === ESC && $("input:focus").length === 0){
68 | _cancelCutContext();
69 | }
70 |
71 | }
72 |
73 | $(window).on('keydown',_handleCutContextRetention);
74 |
75 | });
--------------------------------------------------------------------------------
/PersistenceManager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var FileUtils = brackets.getModule("file/FileUtils"),
13 | DocumentManager = brackets.getModule("document/DocumentManager");
14 |
15 | var isFragmentModeOn = false;
16 | var currentApplication = null;
17 |
18 | var beautify_html = require('lib/beautify/beautify-html').html_beautify;
19 |
20 | var CommonUtils = require("CommonUtils");
21 |
22 | var config = JSON.parse(require('text!lib/beautify/config/defaults.json'));
23 |
24 | function _isDOMSaveRequired(){
25 | var domSaveReqd = false;
26 | if(currentApplication && CommonUtils.isValidMarkupFile(FileUtils.getFileExtension(currentApplication))){
27 | domSaveReqd = true;
28 | }
29 | return domSaveReqd;
30 | }
31 |
32 | $(document).on('html.save.dom',"#html-design-editor",function(event, doc){
33 | var docText = '';
34 | if(_isDOMSaveRequired()){
35 | $("#html-design-editor").trigger('before.save.dom');
36 | if(doc){
37 | if(isFragmentModeOn === true){
38 | docText = $(document.getElementById('htmldesignerIframe').contentWindow.document).find("#ad-fragment-container")[0].innerHTML;
39 | } else {
40 | docText = document.getElementById('htmldesignerIframe').contentWindow.document.documentElement.innerHTML;
41 | }
42 | }
43 | var result = beautify_html(docText, config);
44 | doc.setText(result);
45 | $("#html-design-editor").trigger('after.save.dom');
46 | }
47 | });
48 |
49 | $(document).on('html.element.dropped html.element.updated html.element.removed',"#html-design-editor",function(){
50 | var currentDoc = DocumentManager.getCurrentDocument();
51 | $("#html-design-editor").trigger('html.save.dom',[currentDoc]);
52 | });
53 |
54 | $(document).on('fragmentDesignModeon',"#html-design-editor",function(){
55 | isFragmentModeOn = true;
56 | });
57 |
58 | /*$(document).on('design-dom-changed',"#html-design-editor",function(){
59 | isFragmentModeOn = false;
60 | });*/
61 |
62 | $(document).on("application.context","#html-design-editor", function(event,applicationKey){
63 | currentApplication = applicationKey;
64 | isFragmentModeOn = false;
65 | if(currentApplication){
66 | currentApplication = currentApplication.split('?')[0];
67 | }
68 | });
69 |
70 | });
--------------------------------------------------------------------------------
/widgetprofiles/ProfileTemplateEditHandler.js:
--------------------------------------------------------------------------------
1 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
2 | /*global define, document, console, brackets, $, Mustache */
3 |
4 | define(function (require, exports, module) {
5 | "use strict";
6 |
7 | var widgetContext = null;
8 |
9 | var PreferencesManager = brackets.getModule('preferences/PreferencesManager');
10 |
11 | // Extension config
12 | var _ExtensionID = "swmitra.html-designer";
13 |
14 | var _prefs = PreferencesManager.getExtensionPrefs(_ExtensionID);
15 | _prefs.definePreference('custom-template-path', 'string', "");
16 |
17 | $(document).on("contextmenu",".contextmenu-listner_create", function(event){
18 | if(_prefs.get('custom-template-path')){
19 | $("#widget-profile-context-menu-cont")
20 | .css('top',event.clientY - $("#html-design-template").offset().top + 23)
21 | .css('left',event.clientX - $("#html-design-template").offset().left + 23)
22 | .addClass('open')
23 | .show();
24 | }
25 | });
26 |
27 |
28 | $(document).on("click","#widget-profile-context-menu li a", function(event){
29 | $("#widget-profile-context-menu").trigger($(this).data('action'),[widgetContext]);
30 | _hideContextMenu();
31 | });
32 |
33 | $(document).on("contextmenu",".customTemplateShortcut", function(event){
34 | $("#widget-profile-edit-context-cont")
35 | .css('top',event.clientY - $("#html-design-template").offset().top+23)
36 | .css('left',event.clientX - $("#html-design-template").offset().left+23)
37 | .addClass('open')
38 | .show();
39 |
40 | widgetContext = $(this).attr('id').replace('ad-element-','');
41 | });
42 |
43 | $(document).on("click","#widget-profile-edit-context-menu li a", function(event){
44 | $("#widget-profile-context-menu").trigger($(this).data('action'),[widgetContext]);
45 | _hideContextMenu();
46 | });
47 |
48 |
49 | function _hideContextMenu(){
50 | $("#widget-profile-context-menu-cont")
51 | .removeClass('open')
52 | .hide();
53 |
54 | $("#widget-profile-edit-context-cont")
55 | .removeClass('open')
56 | .hide();
57 | }
58 |
59 | $(document).on("element.selected","#html-design-editor",function(event,element){
60 | _hideContextMenu();
61 | });
62 |
63 | $(document).on("multiselectarea.computed","#html-design-editor",function(event,unionArea){
64 | _hideContextMenu();
65 | });
66 |
67 | $(document).on("deselect.all","#html-design-editor",function(event){
68 | _hideContextMenu();
69 | });
70 |
71 | $(document).on("hide.contextmenu","#html-design-editor",function(event){
72 | _hideContextMenu();
73 | });
74 |
75 | });
--------------------------------------------------------------------------------
/toolboxhtml/keyframeSequenceToolbox.html:
--------------------------------------------------------------------------------
1 |
73 |
74 |
88 |
--------------------------------------------------------------------------------
/html/html-design-view.html:
--------------------------------------------------------------------------------
1 |
49 |
--------------------------------------------------------------------------------
/propertysheet/BackgroundImageToolboxHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var AppInit = brackets.getModule("utils/AppInit");
13 | var FileSystem = brackets.getModule("filesystem/FileSystem");
14 | var lastSelectedRuleset = null;
15 |
16 | $(document).on("ruleset-wrapper.created ruleset-wrapper.refreshed","#html-design-editor",function(event,rulesetref){
17 | lastSelectedRuleset = rulesetref;
18 | });
19 |
20 | $(document).on("click","#bg-toolbox-anchor",function(event){
21 | //$('.property-toolbox').trigger('hide');
22 | $("#background-image-editor").show();
23 | event.preventDefault();
24 | event.stopPropagation();
25 | });
26 |
27 | /*$(document).on("hide",".property-toolbox",function(event){
28 | $("#background-image-editor").hide();
29 | });*/
30 |
31 | $(document).on("click","#background-image-editor-close",function(event){
32 | $("#background-image-editor").hide();
33 | event.preventDefault();
34 | event.stopPropagation();
35 | });
36 |
37 | $(document).on("click", "#bg-button-browse", function(event){
38 | FileSystem.showOpenDialog(false, false, "Please Select file", '', null,
39 | function (err, files) {
40 | if (!err) {
41 | $("input#bg-image-url").val(files[0]);
42 | _applyBackground();
43 | } else {
44 | // result.reject();
45 | }
46 | });
47 |
48 | });
49 |
50 | function _applyBackground(){
51 | var bgImageURL = "url('" + $("#bg-image-url").val() + "')";
52 | var bgRepeat = $("#bg-repeat-menu-dropdown").find(":selected").text();
53 | var backgroundPosX = $("#bg-image-position-x").val();
54 | var backgroundPosY = $("#bg-image-position-y").val();
55 |
56 | if(bgImageURL && bgRepeat && backgroundPosX && backgroundPosY){
57 | lastSelectedRuleset.css("background",bgImageURL+' '+bgRepeat+' '+backgroundPosX+' '+backgroundPosY);
58 | lastSelectedRuleset.persist();
59 | }
60 | }
61 |
62 | AppInit.appReady(function () {
63 |
64 | });
65 |
66 | function _stopPropagation(event){
67 | event.preventDefault();
68 | event.stopPropagation();
69 | }
70 |
71 |
72 | $(document).on("change","#bg-image-position-x",_applyBackground);
73 | $(document).on("change","#bg-image-position-y",_applyBackground);
74 | $(document).on("change","#bg-repeat-menu-dropdown",_applyBackground);
75 | $(document).on("change","#bg-image-url",_applyBackground);
76 |
77 | $(document).on("click","#bg-image-position-x",_stopPropagation);
78 | $(document).on("click","#bg-image-position-y",_stopPropagation);
79 | $(document).on("click","#bg-repeat-menu-dropdown",_stopPropagation);
80 | $(document).on("click","#bg-image-url",_stopPropagation);
81 |
82 | });
--------------------------------------------------------------------------------
/ElementMarkupEditHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var AppInit = brackets.getModule("utils/AppInit");
13 | var Resizer = brackets.getModule("utils/Resizer");
14 | var CodeMirror = brackets.getModule("thirdparty/CodeMirror2/lib/codemirror");
15 | var lastSelectedElement;
16 | var initialContent = null;
17 | var markupEditor = null;
18 |
19 | $(document).on("element.selected","#html-design-editor",function(event,element){
20 | lastSelectedElement = element;
21 | initialContent = lastSelectedElement.innerHTML;
22 | markupEditor.off("change",_synchUpdate);
23 | markupEditor.getDoc().setValue(initialContent);
24 | markupEditor.refresh();
25 | markupEditor.on("change",_synchUpdate);
26 | });
27 |
28 | $(document).on("deselect.all","#html-design-editor",function(event){
29 | $("#markup-editor-container").hide();
30 | });
31 |
32 | function _handleEdit(){
33 | if(lastSelectedElement){
34 | $("#markup-editor-container").show();
35 | markupEditor.refresh();
36 | markupEditor.focus();
37 | }
38 | }
39 |
40 | function _synchUpdate(){
41 | lastSelectedElement = $(lastSelectedElement).html(markupEditor.getDoc().getValue())[0];
42 | }
43 |
44 | $(document).on("targetdom-dblclick","#html-design-editor", function(event){
45 | _handleEdit();
46 | });
47 |
48 | $(document).on("click","#markup-edit-confirm", function(event){
49 | _acceptEdit();
50 | });
51 |
52 | $(document).on("click","#markup-edit-cancel", function(event){
53 | _revertEdit();
54 | });
55 |
56 | function _acceptEdit(){
57 | $("#markup-editor-container").hide();
58 | initialContent = null;
59 | $("#html-design-editor").trigger('select.element',[lastSelectedElement]);
60 | $("#html-design-editor").trigger('html.element.updated');
61 | }
62 |
63 | function _revertEdit(){
64 | lastSelectedElement = $(lastSelectedElement).html(initialContent)[0];
65 | $("#markup-editor-container").hide();
66 | initialContent = null;
67 | $("#html-design-editor").trigger('select.element',[lastSelectedElement]);
68 | }
69 |
70 | AppInit.appReady(function () {
71 | markupEditor = CodeMirror.fromTextArea($('#markup-data-input')[0],{
72 | lineWrapping: true,
73 | lineNumbers: true,
74 | mode: "htmlmixed"
75 | });
76 | Resizer.makeResizable($("#markup-editor-container")[0]
77 | , Resizer.DIRECTION_HORIZONTAL
78 | , Resizer.POSITION_RIGHT
79 | , 100, false, undefined, false);
80 | Resizer.makeResizable($("#markup-editor-container")[0]
81 | , Resizer.DIRECTION_VERTICAL
82 | , Resizer.POSITION_BOTTOM
83 | , 140, false, undefined, false);
84 | });
85 |
86 | });
--------------------------------------------------------------------------------
/stylemodule/RuleSetUpdater.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var DocumentManager = brackets.getModule("document/DocumentManager");
13 |
14 | var CSSNodeFormatter = require('stylemodule/CSSNodeFormatter');
15 |
16 | var currentApplication = null;
17 |
18 | function _findAndUpdateLinkedSelectors(styleSheet, oldelementID, newElementID){
19 | var setCount,mediaCount, ruleSets, ruleSet,mediacount,mediaRule;
20 | var ref;
21 | ruleSets = styleSheet.rules;
22 | for (setCount = 0; setCount < ruleSets.length; setCount++) {
23 | ruleSet = ruleSets[setCount];
24 | if(ruleSet.cssRules && ruleSet.cssRules.length > 0 && ruleSet.cssText.indexOf(oldelementID)>=0){
25 | styleSheet.insertRule(ruleSet.cssText.split(oldelementID).join(newElementID), setCount);
26 | styleSheet.deleteRule(setCount+1);
27 | _witeStyleSheetFromDOMToDoc(styleSheet);
28 | } else if (ruleSet.selectorText && ruleSet.selectorText.indexOf(oldelementID)>=0) {
29 | styleSheet.insertRule(ruleSet.cssText.split(oldelementID).join(newElementID), setCount);
30 | styleSheet.deleteRule(setCount+1);
31 | _witeStyleSheetFromDOMToDoc(styleSheet);
32 | }
33 | }
34 | }
35 |
36 | function _cascadeUpdateInAllStyleSheets(oldelementID,newElementID){
37 | var styleSheets = document.getElementById('htmldesignerIframe').contentWindow.document.styleSheets;
38 | var sheetCount, styleSheet;
39 | var ref;
40 | for (sheetCount = 0; sheetCount < styleSheets.length ;sheetCount++) {
41 | styleSheet = document.getElementById('htmldesignerIframe').contentWindow.document.styleSheets[sheetCount];
42 | _findAndUpdateLinkedSelectors(styleSheet,oldelementID,newElementID);
43 | }
44 | }
45 |
46 | function _witeStyleSheetFromDOMToDoc(styleSheet){
47 | var styleText;
48 | if(styleSheet.href){
49 | DocumentManager.getDocumentForPath(styleSheet.href.replace(brackets.platform === 'mac' ? 'file://' : 'file:///' ,'').split('?')[0])
50 | .done(function (doc) {
51 | styleText = CSSNodeFormatter.formatCSSAsText(styleSheet,false);
52 | doc.setText(styleText);
53 | $("#html-design-editor").trigger("cssdoc.changed",[currentApplication,doc]);
54 | });
55 | } else {
56 | styleText = CSSNodeFormatter.formatCSSAsText(styleSheet,true);
57 | styleSheet.ownerNode.innerText = styleText;
58 | $("#html-design-editor").trigger('html.element.updated');
59 | }
60 | }
61 |
62 | $(document).on("id-attribute-update","#html-design-editor", function(event,oldelementID,newElementID){
63 | _cascadeUpdateInAllStyleSheets(oldelementID,newElementID);
64 | });
65 |
66 | $(document).on("application.context","#html-design-editor", function(event,applicationKey){
67 | currentApplication = applicationKey;
68 | });
69 |
70 | });
--------------------------------------------------------------------------------
/MultiSelectionDrawControl.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var AppInit = brackets.getModule("utils/AppInit");
13 |
14 | var SelectionUtility = require("SelectionUtility");
15 | var topLeftPoint,
16 | bottomRightPoint,
17 | $preMultiselectionArea;
18 |
19 | function _initMultiSelect(event,element,point){
20 | topLeftPoint = point;
21 | $preMultiselectionArea
22 | .css('left',point.x+23)
23 | .css('top',point.y+23)
24 | .css('width',0)
25 | .css('height',0)
26 | .show();
27 | $(window).on('keyup',_cleanUp);
28 | }
29 |
30 | function _drawMultiSelectRect(event,element,point){
31 | if(topLeftPoint){
32 | if(point.x < topLeftPoint.x){
33 | $preMultiselectionArea.css('left',point.x+23);
34 | $preMultiselectionArea.css('width', (topLeftPoint.x - point.x));
35 | } else {
36 | $preMultiselectionArea.css('width', (point.x - topLeftPoint.x));
37 | }
38 |
39 | if(point.y < topLeftPoint.y){
40 | $preMultiselectionArea.css('top',point.y+23);
41 | $preMultiselectionArea.css('height', (topLeftPoint.y - point.y));
42 | } else {
43 | $preMultiselectionArea.css('height', (point.y - topLeftPoint.y));
44 | }
45 | }
46 | }
47 |
48 | function _cleanUp(){
49 | if(event.which === 17){
50 | $preMultiselectionArea.hide();
51 | topLeftPoint = null;
52 | $(window).off('keyup',_cleanUp);
53 | }
54 | }
55 |
56 | function _doMultiSelect(event,element,point){
57 | bottomRightPoint = point;
58 |
59 | if(topLeftPoint && bottomRightPoint){
60 | //swap the points if drawn in reverse
61 | if(bottomRightPoint.x < topLeftPoint.x ){
62 | bottomRightPoint = topLeftPoint;
63 | topLeftPoint = point;
64 | }
65 |
66 | var content = $(document.getElementById('htmldesignerIframe').contentWindow.document.body).children();
67 | var elements = SelectionUtility.getElementInRect( content
68 | ,topLeftPoint.x,topLeftPoint.y
69 | ,bottomRightPoint.x,bottomRightPoint.y
70 | );
71 | $preMultiselectionArea.hide();
72 | if(elements.length > 0){
73 | $("#html-design-editor").trigger("multiselection.done",[elements]);
74 | }
75 | topLeftPoint = null;
76 | }
77 | }
78 |
79 | $(document).on("multiselectmousedown","#html-design-editor", _initMultiSelect);
80 |
81 | $(document).on("multiselectmousemove targetdom.element.mousemove","#html-design-editor", _drawMultiSelectRect);
82 |
83 | $(document).on("multiselectmouseup multiselectmouseout multiselectmouseleave targetdom.element.mouseup targetdom.element.mouseout targetdom.element.mouseleave","#html-design-editor",_doMultiSelect);
84 |
85 |
86 | AppInit.appReady(function () {
87 | $preMultiselectionArea = $(".preMultiSelectionArea");
88 | });
89 |
90 | });
--------------------------------------------------------------------------------
/toolboxhtml/cssToolboxTemplate.html:
--------------------------------------------------------------------------------
1 |
11 |
15 | Source
65 | ×
66 |
69 |
70 |
71 |
72 |
16 | css-target
17 |
19 |
20 | style-sheet
21 |
22 | Media
23 |
24 |
25 |
--------------------------------------------------------------------------------
/grid/GridOptionsManager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var RulerMenuTemplate = require("text!controlhtml/ruler-options-menu.html");
13 | var vGuide = '',
14 | hGuide = '';
15 |
16 | $('.hRule');
17 | $('.vRule');
18 |
19 | function _showContextMenu(){
20 | $("#designer-ruler-menu-cont")
21 | .addClass('open')
22 | .show();
23 | }
24 |
25 | function _hideContextMenu(){
26 | $("#designer-ruler-menu-cont")
27 | .removeClass('open')
28 | .hide();
29 | }
30 |
31 | function _hideGrid(element){
32 | $(".vGuide,.hGuide").hide();
33 | $(element).data('action','show-grid');
34 | $(element).html("Show Guides");
35 | }
36 |
37 | function _clearGrid(){
38 | $(".vGuide,.hGuide").remove();
39 | }
40 |
41 | function _showGrid(element){
42 | $(".vGuide,.hGuide").show();
43 | $(element).data('action','hide-grid');
44 | $(element).html("Hide Guides");
45 | }
46 |
47 | function _lockGrid(element){
48 | $(".vGuide,.hGuide").css('pointer-events','none');
49 | $(element).data('action','unlock-grid');
50 | $(element).html("Unlock Guides");
51 | }
52 |
53 | function _unlockGrid(element){
54 | $(".vGuide,.hGuide").css('pointer-events','all');
55 | $(element).data('action','lock-grid');
56 | $(element).html("Lock Guides");
57 | }
58 |
59 | $(document).on("dblclick",".vGuide,.hGuide", function(event){
60 | $(this).remove();
61 | });
62 |
63 | $(document).on("contextmenu",".corner", function(event){
64 | if($(".corner").find("#designer-ruler-menu-cont").length === 0){
65 | $(".corner").append(RulerMenuTemplate);
66 | }
67 | _showContextMenu();
68 | });
69 |
70 | $('html').click(function() {
71 | _hideContextMenu();
72 | });
73 |
74 | $(document).on("click",".hRule", function(event){
75 | var $vGuide = $(vGuide)
76 | .offset( {top:0,left:event.offsetX - 24})
77 | .appendTo($(".guidePlane"));
78 |
79 | $vGuide.draggable({axis:"x"});
80 | });
81 |
82 | $(document).on("click",".vRule", function(event){
83 | var $hGuide = $(hGuide)
84 | .offset( {top:event.offsetY - 24,left:0})
85 | .appendTo($(".guidePlane"));
86 |
87 | $hGuide.draggable({axis:"y"});
88 | });
89 |
90 | $(document).on("click","#designer-ruler-context-menu li a",function(event){
91 | var action = $(this).data('action');
92 | switch(action){
93 | case 'show-grid': _showGrid(this);break;
94 | case 'hide-grid': _hideGrid(this);break;
95 | case 'lock-grid': _lockGrid(this);break;
96 | case 'unlock-grid': _unlockGrid(this);break;
97 | case 'clear-grid': _clearGrid();break;
98 | default: $("#designer-ruler-context-menu").trigger(action,[this]);break;
99 | }
100 | _hideContextMenu();
101 | event.preventDefault();
102 | event.stopPropagation();
103 | });
104 | });
--------------------------------------------------------------------------------
/lib/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Colorpicker
3 | * http://mjolnic.github.io/bootstrap-colorpicker/
4 | *
5 | * Originally written by (c) 2012 Stefan Petre
6 | * Licensed under the Apache License v2.0
7 | * http://www.apache.org/licenses/LICENSE-2.0.txt
8 | *
9 | */.colorpicker-saturation{float:left;width:100px;height:100px;cursor:crosshair;background-image:url("../img/bootstrap-colorpicker/saturation.png")}.colorpicker-saturation i{position:absolute;top:0;left:0;display:block;width:5px;height:5px;margin:-4px 0 0 -4px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-saturation i b{display:block;width:5px;height:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-hue,.colorpicker-alpha{float:left;width:15px;height:100px;margin-bottom:4px;margin-left:4px;cursor:row-resize}.colorpicker-hue i,.colorpicker-alpha i{position:absolute;top:0;left:0;display:block;width:100%;height:1px;margin-top:-1px;background:#000;border-top:1px solid #fff}.colorpicker-hue{background-image:url("../img/bootstrap-colorpicker/hue.png")}.colorpicker-alpha{display:none;background-image:url("../img/bootstrap-colorpicker/alpha.png")}.colorpicker-saturation,.colorpicker-hue,.colorpicker-alpha{background-size:contain}.colorpicker{top:0;left:0;z-index:2500;min-width:130px;padding:4px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*zoom:1}.colorpicker:before,.colorpicker:after{display:table;line-height:0;content:""}.colorpicker:after{clear:both}.colorpicker:before{position:absolute;top:-7px;left:6px;display:inline-block;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-left:7px solid transparent;border-bottom-color:rgba(0,0,0,0.2);content:''}.colorpicker:after{position:absolute;top:-6px;left:7px;display:inline-block;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent;content:''}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-image:url("../img/bootstrap-colorpicker/alpha.png");background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-element .input-group-addon i,.colorpicker-element .add-on i{display:inline-block;width:16px;height:16px;vertical-align:text-top;cursor:pointer}.colorpicker.colorpicker-inline{position:relative;z-index:auto;display:inline-block;float:none}.colorpicker.colorpicker-horizontal{width:110px;height:auto;min-width:110px}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-hue,.colorpicker.colorpicker-horizontal .colorpicker-alpha{float:left;width:100px;height:15px;margin-bottom:4px;margin-left:0;cursor:col-resize}.colorpicker.colorpicker-horizontal .colorpicker-hue i,.colorpicker.colorpicker-horizontal .colorpicker-alpha i{position:absolute;top:0;left:0;display:block;width:1px;height:15px;margin-top:0;background:#fff;border:0}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url("../img/bootstrap-colorpicker/hue-horizontal.png")}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url("../img/bootstrap-colorpicker/alpha-horizontal.png")}.colorpicker.colorpicker-hidden{display:none}.colorpicker.colorpicker-visible{display:block}.colorpicker-inline.colorpicker-visible{display:inline-block}.colorpicker-right:before{right:6px;left:auto}.colorpicker-right:after{right:7px;left:auto}
--------------------------------------------------------------------------------
/DragHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var startOffset = null;
13 | var isDragged = false;
14 | var dragSourceArea = null;
15 | var layout = null;
16 |
17 |
18 | function _isPinInEventOnDragSource(point){
19 | if(dragSourceArea){
20 | if( point.x >= dragSourceArea.left && point.x <= dragSourceArea.right
21 | && point.y >= dragSourceArea.top && point.y <= dragSourceArea.bottom){
22 | return true;
23 | } else {
24 | return false;
25 | }
26 | } else {
27 | return false;
28 | }
29 | }
30 |
31 | function _initDrag(event,element,point){
32 | if(element && element.tagName !== 'BODY'){
33 | $("#html-design-editor").trigger("design.editor.drag.activated");
34 | if(_isPinInEventOnDragSource(point) || (layout && layout.boxModel && layout.boxModel.cssRuleSet.element === element)){
35 | startOffset = point;
36 | isDragged = false;
37 | $('.controlDiv').css('pointer-events','none');
38 | layout.open();
39 | } /*else {
40 | startOffset = point;
41 | isDragged = false;
42 | $('.controlDiv').css('pointer-events','none');
43 | $("#html-design-editor").trigger("select.element",[element]);
44 | setTimeout(function(){ layout.open();},50);
45 | }*/
46 | }
47 | }
48 |
49 | function _doDrag(event,element,point){
50 | if(startOffset){
51 | layout.changeX(startOffset.x - point.x);
52 | layout.changeY(startOffset.y - point.y);
53 | startOffset = point;
54 | layout.refresh();
55 | //dragSourceArea = element.getBoundingClientRect();
56 | isDragged = true;
57 | }
58 | }
59 |
60 | function _endDrag(event,element,point){
61 | if(startOffset){
62 | $("#html-design-editor").trigger("design.editor.drag.deactivated");
63 | $("#hover-outline").hide();
64 | startOffset = null;
65 | isDragged = false;
66 | $('.controlDiv').css('pointer-events','all');
67 | dragSourceArea = element.getBoundingClientRect();
68 | layout.close();
69 | }
70 | }
71 |
72 | $(document).on("layout.decision","#html-design-editor", function(event,layoutObj){
73 | layout = layoutObj;
74 | });
75 |
76 | $(document).on("grouplayout.decision","#html-design-editor", function(event,layoutObj){
77 | layout = layoutObj;
78 | });
79 |
80 | $(document).on("element.selected","#html-design-editor",function(event,element){
81 | dragSourceArea = element.getBoundingClientRect();
82 | });
83 |
84 | $(document).on("multiselectarea.computed","#html-design-editor",function(event,unionArea){
85 | dragSourceArea = unionArea;
86 | });
87 |
88 | $(document).on("targetdom.element.mousedown","#html-design-editor", _initDrag);
89 |
90 | $(document).on("targetdom.element.mousemove","#html-design-editor", _doDrag);
91 |
92 | $(document).on("targetdom.element.mouseup targetdom.element.mouseout targetdom.element.mouseleave","#html-design-editor",_endDrag);
93 | });
--------------------------------------------------------------------------------
/editmodule/PasteContext.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var CSSCloner = require("stylemodule/CSSRulesetCloneHandler");
13 | var IDGen = require("widgetprofiles/UIDGenerator");
14 |
15 | var clipBoardItem = null;
16 | var pasteLocation = null;
17 | var toBePastedIn = null;
18 | var currentLayout = null;
19 | var currentContext = null;
20 |
21 | var contextToFunctionMap = {};
22 |
23 | contextToFunctionMap.copyContext = function (){
24 | var decendents = $(clipBoardItem).find("[id]");
25 | if(clipBoardItem.id){
26 | decendents.push(clipBoardItem);
27 | }
28 | var newElementTemplate = clipBoardItem.outerHTML;
29 | var decendent = null;
30 | var newID = null;
31 | var idMap = {};
32 | for(var count=0;count
26 |
33 |
34 |
27 |
28 |
29 |
30 | 
31 |
32 |
31 |
18 |
19 | Columns
20 |
21 | Gutter Space
22 |
23 |
27 | Content Padding
28 |
29 |
33 |
34 |
35 | px
36 |
37 |
38 |
41 |
54 |
--------------------------------------------------------------------------------
/lib/jQuery-Knob/README.md:
--------------------------------------------------------------------------------
1 | jQuery Knob
2 | =============
3 |
4 | - canvas based ; no png or jpg sprites.
5 | - touch, mouse and mousewheel, keyboard events implemented.
6 | - downward compatible ; overloads an input element.
7 |
8 | Example
9 | -------
10 |
11 | ```html
12 |
13 |
14 |
19 | ```
20 |
21 | Options
22 | -------
23 |
24 | Options are provided as attributes 'data-option':
25 |
26 | ```html
27 |
28 | ```
29 |
30 | ... or in the "knob()" call :
31 |
32 | ```javascript
33 | $(".dial").knob({
34 | 'min':-50,
35 | 'max':50
36 | });
37 | ```
38 |
39 | The following options are supported :
40 |
41 | Behaviors :
42 | * min : min value | default=0.
43 | * max : max value | default=100.
44 | * step : step size | default=1.
45 | * angleOffset : starting angle in degrees | default=0.
46 | * angleArc : arc size in degrees | default=360.
47 | * stopper : stop at min & max on keydown/mousewheel | default=true.
48 | * readOnly : disable input and events | default=false.
49 | * rotation : direction of progression | default=clockwise.
50 |
51 | UI :
52 | * cursor : display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true" | default=gauge.
53 | * thickness : gauge thickness.
54 | * lineCap : gauge stroke endings. | default=butt, round=rounded line endings
55 | * width : dial width.
56 | * displayInput : default=true | false=hide input.
57 | * displayPrevious : default=false | true=displays the previous value with transparency.
58 | * fgColor : foreground color.
59 | * inputColor : input value (number) color.
60 | * font : font family.
61 | * fontWeight : font weight.
62 | * bgColor : background color.
63 |
64 | Hooks
65 | -------
66 |
67 | ```html
68 |
73 | ```
74 |
75 | * 'release' : executed on release
76 |
77 | Parameters :
78 | + value : int, current value
79 |
80 | * 'change' : executed at each change of the value
81 |
82 | Parameters :
83 | + value : int, current value
84 |
85 | * 'draw' : when drawing the canvas
86 |
87 | Context :
88 | - this.g : canvas context 2D (see Canvas documentation)
89 | - this.$ : jQuery wrapped element
90 | - this.o : options
91 | - this.i : input
92 | - ... console.log(this);
93 |
94 | * 'cancel' : triggered on [esc] keydown
95 |
96 | * 'format' : allows to format output (add unit %, ms ...)
97 |
98 | The scope (this) of each hook function is the current Knob instance (refer to the demo code).
99 |
100 | Example
101 | -------
102 |
103 | ```html
104 |
105 |
106 |
111 | ```
112 |
113 | Dynamically configure
114 | -------
115 |
116 | ```html
117 |
129 | ```
130 |
131 | Set the value
132 | -------
133 |
134 | ```html
135 |
140 | ```
141 |
142 | Supported browser
143 | -------
144 |
145 | Tested on Chrome, Safari, Firefox, IE>=8.0 (IE8.0 with excanvas).
146 |
147 | 
148 |
--------------------------------------------------------------------------------
/stylemodule/StylesheetManager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var AppInit = brackets.getModule("utils/AppInit");
13 | var FileSystem = brackets.getModule("filesystem/FileSystem");
14 | var ProjectManager = brackets.getModule("project/ProjectManager");
15 |
16 | function _findStyleSheets() {
17 | var styleSheets = document.getElementById('htmldesignerIframe').contentWindow.document.styleSheets;
18 | var sheetCount, setCount, styleSheet;
19 | var toBeReturned = [];
20 | for (sheetCount = 0; sheetCount < styleSheets.length ; sheetCount++) {
21 | styleSheet = document.getElementById('htmldesignerIframe').contentWindow.document.styleSheets[sheetCount];
22 | if(styleSheet.href){
23 | toBeReturned.push(styleSheet);
24 | }
25 | }
26 | return toBeReturned;
27 | }
28 |
29 | $(document).on("design-dom-changed","#html-design-editor",function(){
30 | setTimeout(function(){
31 | $("#html-design-editor").trigger("stylesheets-in-dom",[_findStyleSheets()]);
32 | },1000);
33 | });
34 |
35 | $(document).on("click",".refresh-stylesheet",function(){
36 | $("#html-design-editor").trigger("stylesheets-in-dom",[_findStyleSheets()]);
37 | });
38 |
39 | $(document).on("click",".edit-stylesheet",function(event){
40 | var asynchPromise = new $.Deferred();
41 | $("#html-design-editor").trigger("css-file-select-requested",[$('.stylesheet-list.shortcut').val(),null]);
42 | asynchPromise.resolve();
43 | return asynchPromise.promise();
44 | });
45 |
46 | $(document).on("click",".delete-stylesheet",function(event){
47 | var asynchPromise = new $.Deferred();
48 | var styleSheets = document.getElementById('htmldesignerIframe').contentWindow.document.styleSheets;
49 | var sheetCount, setCount, styleSheet;
50 | var toBeReturned = [];
51 | for (sheetCount = 0; sheetCount < styleSheets.length ; sheetCount++) {
52 | styleSheet = document.getElementById('htmldesignerIframe').contentWindow.document.styleSheets[sheetCount];
53 | if(styleSheet.href === $('.stylesheet-list').val()){
54 | $(styleSheet.ownerNode).remove();
55 | $("#html-design-editor").trigger('html.element.updated');
56 | $("#html-design-editor").trigger("design-dom-changed");
57 | }
58 | }
59 | asynchPromise.resolve();
60 | return asynchPromise.promise();
61 | });
62 |
63 | function _createNewStyleSheet(cssPath){
64 | var stylePath = cssPath.replace(ProjectManager.getProjectRoot()._path,"");
65 | var styleNode = document.getElementById('htmldesignerIframe').contentWindow.document.createElement('LINK');
66 | styleNode = $(styleNode).appendTo(document.getElementById('htmldesignerIframe').contentWindow.document.head)[0];
67 | styleNode.href = stylePath;
68 | styleNode.rel = "stylesheet";
69 | $("#html-design-editor").trigger('html.element.updated');
70 | $("#html-design-editor").trigger("design-dom-changed");
71 | }
72 |
73 | $(document).on("click",".create-new-stylesheet",function(){
74 | FileSystem.showOpenDialog(false, false, "Please Select CSS file", '', null,
75 | function (err, files) {
76 | if (!err) {
77 | _createNewStyleSheet(files[0]);
78 | } else {
79 | // result.reject();
80 | }
81 | });
82 | });
83 |
84 | });
--------------------------------------------------------------------------------
/DistributionHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | var layout,
13 | reference,
14 | referenceElement;
15 |
16 |
17 | function _distributeHorizontally(){
18 | if(layout){
19 | layout.open();
20 | layout.distributeHorizontally(reference,$("#distribute-horz-input").val(),null);
21 | layout.refresh();
22 | layout.close();
23 | $("#html-design-editor").trigger("groupReselect");
24 | }
25 | }
26 |
27 | function _distributeVertically(){
28 | if(layout){
29 | layout.open();
30 | layout.distributeVertically(reference,$("#distribute-vert-input").val(),null);
31 | layout.refresh();
32 | layout.close();
33 | $("#html-design-editor").trigger("groupReselect");
34 | }
35 | }
36 |
37 | function _normalizeHeight(){
38 | if(layout){
39 | layout.open();
40 | var height = 0;
41 | if(referenceElement){
42 | height = referenceElement.getBoundingClientRect().height;
43 | } else {
44 | height = $("#normalize-height-input").val() || (reference.bottom - reference.top);
45 | }
46 | layout.changeHeightTo(height);
47 | layout.refresh();
48 | layout.close();
49 | $("#html-design-editor").trigger("groupReselect");
50 | }
51 | }
52 |
53 | function _normalizeWidth(){
54 | if(layout){
55 | layout.open();
56 | var width = 0;
57 | if(referenceElement){
58 | width = referenceElement.getBoundingClientRect().width;
59 | } else {
60 | width = $("#normalize-width-input").val() || (reference.right - reference.left);
61 | }
62 | layout.changeWidthTo(width);
63 | layout.refresh();
64 | layout.close();
65 | $("#html-design-editor").trigger("groupReselect");
66 | }
67 | }
68 |
69 | $(document).on("grouplayout.decision","#html-design-editor", function(event,layoutObj){
70 | layout = layoutObj;
71 | });
72 |
73 | $(document).on("groupreference.selected","#html-design-editor", function(event,referenceObj){
74 | referenceElement = referenceObj;
75 | });
76 |
77 | $(document).on("multiselectarea.computed","#html-design-editor",function(event,unionArea){
78 | reference = unionArea;
79 | $("#distribute-horz-input").val("");
80 | $("#distribute-vert-input").val("");
81 | $("#normalize-width-input").val("");
82 | $("#normalize-height-input").val("");
83 | });
84 |
85 | $(document).on('element.selected',"#html-design-editor",function(){
86 | reference = null;
87 | referenceElement = null;
88 | });
89 |
90 | $(document).on('deselect.all',"#html-design-editor",function(){
91 | reference = null;
92 | referenceElement = null;
93 | });
94 |
95 | $(document).on('click',"#distribute-horz",function(){
96 | _distributeHorizontally();
97 | });
98 |
99 | $(document).on('click',"#distribute-vert",function(){
100 | _distributeVertically();
101 | });
102 |
103 | $(document).on('click',"#normalize-height",function(){
104 | _normalizeHeight();
105 | });
106 |
107 | $(document).on('click',"#normalize-width",function(){
108 | _normalizeWidth();
109 | });
110 |
111 | });
--------------------------------------------------------------------------------
/toolboxhtml/multiselectionToolboxTemplate.html:
--------------------------------------------------------------------------------
1 |
38 |
39 |
40 |
41 |
42 | Breakpoint
43 |
47 |
48 |
49 |
53 |
42 | 
47 | 
48 | 
49 |
50 | 
51 | 
52 | 
53 |
54 |
--------------------------------------------------------------------------------
/view/ViewPresentationPresets.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | function _applyDesignMajorPreset(){
13 | $("#designer-content-placeholder").css('height','calc(100% - 4px)');
14 | $("#designer-content-placeholder").css('width','calc(50% - 15px)');
15 |
16 | $("#styles-editor-container").css('top','50%');
17 | $("#styles-editor-container").css('left','50%');
18 | $("#styles-editor-container").css('height','calc(50% - 24px)');
19 | $("#styles-editor-container").css('width','50%');
20 |
21 | $("#source-editor-container").css('top','0px');
22 | $("#source-editor-container").css('left','50%');
23 | $("#source-editor-container").css('height','calc(50% - 24px)');
24 | $("#source-editor-container").css('width','50%');
25 | }
26 |
27 | function _applySourceMajorPreset(){
28 | $("#designer-content-placeholder").css('height','calc(50% - 15px)');
29 | $("#designer-content-placeholder").css('width','calc(50% - 15px)');
30 |
31 | $("#styles-editor-container").css('top','50%');
32 | $("#styles-editor-container").css('left','0%');
33 | $("#styles-editor-container").css('height','calc(50% - 24px)');
34 | $("#styles-editor-container").css('width','50%');
35 |
36 | $("#source-editor-container").css('top','0px');
37 | $("#source-editor-container").css('left','50%');
38 | $("#source-editor-container").css('height','calc(100% - 24px)');
39 | $("#source-editor-container").css('width','50%');
40 | }
41 |
42 | function _applyStylesMajorPreset(){
43 | $("#designer-content-placeholder").css('height','calc(50% - 15px)');
44 | $("#designer-content-placeholder").css('width','calc(50% - 15px)');
45 |
46 | $("#source-editor-container").css('top','50%');
47 | $("#source-editor-container").css('left','0%');
48 | $("#source-editor-container").css('height','calc(50% - 24px)');
49 | $("#source-editor-container").css('width','50%');
50 |
51 | $("#styles-editor-container").css('top','0px');
52 | $("#styles-editor-container").css('left','50%');
53 | $("#styles-editor-container").css('height','calc(100% - 24px)');
54 | $("#styles-editor-container").css('width','50%');
55 | }
56 |
57 | function _applyDesignAndStylesSplit(){
58 | $("#designer-content-placeholder").css('height','calc(100% - 4px)');
59 | $("#designer-content-placeholder").css('width','calc(50% - 15px)');
60 |
61 | $("#styles-editor-container").css('top','0px');
62 | $("#styles-editor-container").css('left','50%');
63 | $("#styles-editor-container").css('height','calc(100% - 24px)');
64 | $("#styles-editor-container").css('width','50%');
65 | }
66 |
67 | function _applyDesignAndSourceSplit(){
68 | $("#designer-content-placeholder").css('height','calc(100% - 4px)');
69 | $("#designer-content-placeholder").css('width','calc(50% - 15px)');
70 |
71 | $("#source-editor-container").css('top','0px');
72 | $("#source-editor-container").css('left','50%');
73 | $("#source-editor-container").css('height','calc(100% - 24px)');
74 | $("#source-editor-container").css('width','50%');
75 | }
76 |
77 | exports.applyDesignMajorPreset = _applyDesignMajorPreset;
78 | exports.applySourceMajorPreset = _applySourceMajorPreset;
79 | exports.applyStylesMajorPreset = _applyStylesMajorPreset;
80 |
81 | exports.applyDesignAndStylesSplit = _applyDesignAndStylesSplit;
82 | exports.applyDesignAndSourceSplit = _applyDesignAndSourceSplit;
83 | });
--------------------------------------------------------------------------------
/BoxModelCreator.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Swagatam Mitra
3 |
4 | */
5 |
6 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
7 | /*global define, document, console, brackets, $, Mustache */
8 |
9 | define(function (require, exports, module) {
10 | "use strict";
11 |
12 | /*Box Model
13 | {
14 | position : { left: null, right: null, top: null, bottom: null },
15 | margin : { left: null, right: null, top: null, bottom: null },
16 | border : { left: null, right: null, top: null, bottom: null },
17 | padding : { left: null, right: null, top: null, bottom: null }
18 | }*/
19 |
20 | function _createPositionBox(element){
21 | return {
22 | left : $(element).css('left')
23 | , right : $(element).css('right')
24 | , top : $(element).css('top')
25 | , bottom : $(element).css('bottom')
26 | };
27 | }
28 |
29 | function _createMarginBox(element){
30 | return {
31 | left : parseInt($(element).css('margin-left'))
32 | , right : parseInt($(element).css('margin-right'))
33 | , top : parseInt($(element).css('margin-top'))
34 | , bottom : parseInt($(element).css('margin-bottom'))
35 | };
36 | }
37 |
38 | function _createBorderBox(element){
39 | return {
40 | left : $(element).css('border-left-width')
41 | , right : $(element).css('border-right-width')
42 | , top : $(element).css('border-top-width')
43 | , bottom : $(element).css('border-bottom-width')
44 | };
45 | }
46 |
47 | function _createPaddingBox(element){
48 | return {
49 | left : parseInt($(element).css('padding-left'))
50 | , right : parseInt($(element).css('padding-right'))
51 | , top : parseInt($(element).css('padding-top'))
52 | , bottom : parseInt($(element).css('padding-bottom'))
53 | };
54 | }
55 |
56 | function _createSizeBox(element){
57 | return {
58 | width : $(element).css('width')
59 | , height : $(element).css('height')
60 | };
61 | }
62 |
63 | function _createBoxModel(ruleSet){
64 | return {
65 | targetElement: ruleSet.element
66 | , cssRuleSet : ruleSet
67 | , position : _createPositionBox(ruleSet.element)
68 | , margin : _createMarginBox(ruleSet.element)
69 | , border : _createBorderBox(ruleSet.element)
70 | , padding : _createPaddingBox(ruleSet.element)
71 | , size : _createSizeBox(ruleSet.element)
72 | , boundingRect : ruleSet.element.getBoundingClientRect()
73 | };
74 |
75 | }
76 |
77 | $(document).on("ruleset-wrapper.created","#html-design-editor",function(event,rulesetref){
78 | if(rulesetref.isGroup()){
79 | var modelArray = [];
80 | var rulesets = rulesetref.getRuleSets();
81 | var index = 0;
82 | for(index = 0;indexMultiselect Toolbox
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
58 |
59 |
60 |
61 |
62 |
65 |
66 |
67 |
68 |
69 |
72 |
73 |
74 |
75 |
76 |
79 |
80 |
81 |
82 | 
58 | 
59 | 
60 |
61 | 
62 |
63 | 
65 | 
66 | 
67 |
68 | 
69 | 
70 |
71 |