Responsive Tools

1) Responsive tools 2) Media query support 3) Docked toolbox panel 4) Enhanced unit conversion feature in layouts 5) Fluid grid support and configuration 6) Spanning of elements using active grid 7) Opening http pages in design view 8) User interaction mode
swmitra · Aug 28, 2015 · 8ede580 · 8ede580
1 parent 10bf096
commit 8ede580
Show file tree

Hide file tree

Showing 57 changed files with 2,486 additions and 215 deletions.
diff --git a/BoxModelCreator.js b/BoxModelCreator.js
@@ -74,19 +74,6 @@ define(function (require, exports, module) {
 
     }
 
-    /*$(document).on('element.selected',"#html-design-editor",function(event,element){
-        $("#html-design-editor").trigger('boxmodel.created',[_createBoxModel(element)]);
-     });
-    
-    $(document).on('multiselect.done',"#html-design-editor",function(event,elements){
-        var modelArray = [];
-        var index = 0;
-        for(index = 0;index<elements.length;index++){
-            modelArray.push(_createBoxModel(elements[index]));
-        }
-        $("#html-design-editor").trigger('groupmodel.created',[modelArray]);
-     });*/
-
     $(document).on("ruleset-wrapper.created","#html-design-editor",function(event,rulesetref){
         if(rulesetref.isGroup()){
             var modelArray = [];

diff --git a/DesignDOMUpdater.js b/DesignDOMUpdater.js
@@ -51,6 +51,7 @@ define(function (require, exports, module) {
         .css('pointer-events','')
         .appendTo(eventParams.containerElement).show();
         $("#html-design-editor").trigger('element.added',[element[0]]);
+         $("#html-design-editor").trigger("select.element",[element[0]]);
     }
 
     function _isPositioned(element){

diff --git a/DragHandler.js b/DragHandler.js
@@ -71,11 +71,11 @@ define(function (require, exports, module) {
 
     $(document).on("layout.decision","#html-design-editor", function(event,layoutObj){
         layout = layoutObj;
-     });
+    });
 
     $(document).on("grouplayout.decision","#html-design-editor", function(event,layoutObj){
         layout = layoutObj;
-     });
+    });
 
     $(document).on("element.selected","#html-design-editor",function(event,element){
         dragSourceArea = element.getBoundingClientRect();
@@ -84,11 +84,10 @@ define(function (require, exports, module) {
     $(document).on("multiselectarea.computed","#html-design-editor",function(event,unionArea){
         dragSourceArea = unionArea;
     });
-            
+
     $(document).on("targetdom.element.mousedown","#html-design-editor", _initDrag);
 
     $(document).on("targetdom.element.mousemove","#html-design-editor", _doDrag);
 
-    $(document).on("targetdom.element.mouseup targetdom.element.mouseout targetdom.element.mouseleave","#html-design-editor",_endDrag);
-
+    $(document).on("targetdom.element.mouseup targetdom.element.mouseout targetdom.element.mouseleave","#html-design-editor",_endDrag);   
 });
diff --git a/InteractionModeHandler.js b/InteractionModeHandler.js
@@ -0,0 +1,13 @@
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/*global define */
+
+define(function (require, exports, module) {
+    "use strict";
+
+    $(document).on("click","#interaction-mode", function(){
+        $(this).toggleClass('activated');
+        $("#html-design-editor").trigger("deselect.all");
+        $("#info-overlay-plane,.eventListnerPane").toggleClass('deactivated');
+    });
+
+});
diff --git a/LayoutDecisionManager.js b/LayoutDecisionManager.js
@@ -147,6 +147,10 @@ define(function (require, exports, module) {
         this._trackChange = false;
     }
 
+    Layout.prototype.getLayoutParamValueFor = function(key){
+        return this.boxModel.cssRuleSet.getDefinitePropertyValue(key);
+    }
+
     Layout.prototype.changeAnchor = function(vAnchorInput, hAnchorInput,retainCurrentPos){
         var prevRect = this.boxModel.targetElement.getBoundingClientRect();
 
@@ -234,11 +238,11 @@ define(function (require, exports, module) {
         this.markChanged();
     };
 
-    Layout.prototype.setX = function(value){
+    Layout.prototype.setX = function(value,passThrough){
         if(this.xAxisAlignment === 'left'){
-            this.boxModel.cssRuleSet.boxModelHCSS(this.xAxisModifier,value);
+            this.boxModel.cssRuleSet.boxModelHCSS(this.xAxisModifier,value,passThrough);
         } else {
-            this.boxModel.cssRuleSet.boxModelHCSS(this.xAxisModifier,value);
+            this.boxModel.cssRuleSet.boxModelHCSS(this.xAxisModifier,value,passThrough);
         }
         this.markChanged();
     };
@@ -323,8 +327,8 @@ define(function (require, exports, module) {
         this.markChanged();
     };
 
-    Layout.prototype.changeWidthTo = function(width){
-        this.boxModel.cssRuleSet.boxModelHCSS('width',width);
+    Layout.prototype.changeWidthTo = function(width,passThrough){
+        this.boxModel.cssRuleSet.boxModelHCSS('width',width,passThrough);
         this.markChanged();
     };
 

diff --git a/MultiSelectionHandler.js b/MultiSelectionHandler.js
@@ -40,7 +40,7 @@ define(function (require, exports, module) {
 
     function _markReference(index){
         if(currentRefIndex === index){
-            multiselectMarkers[index].removeClass("blinkinghighlight"); 
+            $(".blinkinghighlight").removeClass("blinkinghighlight");
             currentRefIndex = -1;
         } else {
             currentRefIndex = index;

diff --git a/SelectionHandler.js b/SelectionHandler.js
@@ -65,6 +65,7 @@ define(function (require, exports, module) {
 
         lastSelectedElement = element;
         //$(".controlDiv").show();
+        $("#html-design-editor").trigger("selection-area-computed",[offset,width,height]);
         if(refresh){
             $("#html-design-editor").trigger("element.selection.refreshed",[element]);
         } else {

diff --git a/attribute/HTMLAttributeEditor.js b/attribute/HTMLAttributeEditor.js
@@ -51,16 +51,23 @@ define(function (require, exports, module) {
     }
 
     $(document).on("click","#attr-editor-close", function(event){
-        _hideAttrEditor();
+        $("#attribute-editor").toggleClass("toolboxCollapsed");
+        $(this).toggleClass("collapsed");
+        event.preventDefault();
+        event.stopPropagation();
     });
 
     $(document).on("click","#attribute-list-anchor", function(event){
         _showAttrEditor();
     });
 
     AppInit.appReady(function () {
-        $("#info-overlay-plane").append(AttributeToolBoxTemplate);
-        $("#attribute-editor").draggable({handle:'.propertyToolboxHeader'});
+        $("#docked-toolbox").append(AttributeToolBoxTemplate);
     });
+
+    AppInit.htmlReady(function () {
+    });
+
+
 
 });
diff --git a/attribute/html/attributeToolboxTemplate.html b/attribute/html/attributeToolboxTemplate.html
@@ -9,9 +9,9 @@
         box-shadow: 0px -1px 2px 0px rgba(50, 50, 50, 0.75);
     }
 </style>
-<div class="property-toolbox" id="attribute-editor" style="display:none;pointer-events: all; position: absolute; height: auto; width: 276px; left: 100px; top: 50px;z-index:51;background-color: rgb(74, 77, 78);">
-    <div class="propertyToolboxHeader">HTML Attributes
-        <div class="toolboxHeaderBottom"></div>
-        <a class ="close" id="attr-editor-close" style="">×</a>
-    </div>
+<div class="propertyToolboxHeader" style="height:24px;position:relative !important;left:0px !important;margin:0px !important;top:0px;width: calc(100% - 2px);">HTML Attributes
+    <a class ="close" id="attr-editor-close" style=""><span class="glyphicon glyphicon-chevron-down"></span></a>
+    <div class="toolboxHeaderBottom"></div>
+</div>
+<div id="attribute-editor" class="toolboxCollapsed" style="border-bottom:1px solid gray;display:block;position: relative;width: calc(100% - 2px);background-color: rgb(74, 77, 78);opacity:0.8;">
 </div>
diff --git a/borderradiusresizer/BottomLeftCornerRadiusHandler.js b/borderradiusresizer/BottomLeftCornerRadiusHandler.js
@@ -40,8 +40,6 @@ define(function (require, exports, module) {
         $("#border-bottom-left-control")
                     .css('left',(hRadii - 3))
                     .css('top','calc(100% - '+(vRadii+2)+'px)');
-
-        //$("#border-radius").val(''+hRadii+'px '+vRadii+'px');
     }
 
     $(document).on("mousedown","#border-bottom-left-control",function(event){

diff --git a/controlhtml/fluid-grid-container.html b/controlhtml/fluid-grid-container.html
@@ -1,16 +1,36 @@
-<div id="grid-settings-container">
-    <span style="margin-left:10px">Columns</span>
-    <input type="number" id="fluid-column-input" class="topcoat-text-input" style="margin-left: 10px; width: 37px; margin-top: 7px; height: 25px;" value="6">
-    <span style="margin-left:10px">Gutter Space</span>
-    <input type="number" id="fluid-gutter-input" class="topcoat-text-input" style="border:1px solid gray;margin-left: 10px; width: 37px; border-radius: 0px; height: 25px; margin-top: 8px;" value="1">
-    <select id="gutter-unit-select" class="topcoat-select" style="width: 40px; border-radius: 0px; height: 25px; top: 4px;outline: 1px solid gray;padding-top: 0px;" value="%">
-        <option value="%">%</option>
-        <option value="px">px</option>
-    </select>
-    <span style="margin-left:10px">Content Padding</span>
-    <input type="number" id="fluid-padding-input" class="topcoat-text-input" style="border:1px solid gray;margin-left: 10px; width: 37px; border-radius: 0px; height: 25px; margin-top: 8px;" value="1">
-    <select id="padding-unit-select" class="topcoat-select" style="width: 40px; border-radius: 0px; height: 25px; top: 4px;outline: 1px solid gray;padding-top: 0px;" value="%">
-        <option value="%">%</option>
-        <option value="px">px</option>
-    </select>
-</div>
+<head>
+    <style>
+        .hideFluidGrid {
+            color: #C74848 !important;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="grid-settings-container">
+        <span id="show-hide-fluid-grid" class="glyphicon glyphicon-eye-open" style="color:#288edf;zoom:1.5" title="Show Fluid Grid"></span>
+        <span style="margin-left:10px">Columns</span>
+        <input type="number" id="fluid-column-input" class="topcoat-text-input" style="margin-left: 10px; width: 25px; border-radius: 0px; height: 20px; margin-top: 8px;" value="6">
+        <span style="margin-left:10px">Gutter Space</span>
+        <input type="number" id="fluid-gutter-input" class="topcoat-text-input" style="border:1px solid gray;margin-left: 10px; width: 25px; border-radius: 0px; height: 20px; margin-top: 8px;" value="1">
+        <select id="gutter-unit-select" class="topcoat-select" style="width: 32px; border-radius: 0px; height: 20px; top: 4px;outline: 1px solid gray;padding-top: 0px;font-size:10px;" value="%">
+            <option value="%">%</option>
+            <option value="px">px</option>
+        </select>
+        <span style="margin-left:10px">Content Padding</span>
+        <input type="number" id="fluid-padding-input" class="topcoat-text-input" style="border:1px solid gray;margin-left: 10px; width: 25px; border-radius: 0px; height: 20px; margin-top: 8px;" value="1">
+        <select id="padding-unit-select" class="topcoat-select" style="width: 32px; border-radius: 0px; height: 20px; top: 4px;outline: 1px solid gray;padding-top: 0px;font-size:10px;" value="%">
+            <option value="%">%</option>
+            <option value="px">px</option>
+        </select>
+
+        <input type="number" id="design-window-width-input" class="topcoat-text-input" style="background:transparent;margin-left: 10px; width: 50px; height: 20px; margin-top: 8px;" value="" disabled="">
+        <span style="margin-left:-25px">px</span>
+        <a class="active-Media-applied" style="color:white;margin-left:25px"></a>
+
+        <button class="btn primary" id="designer-add-media-breakpoint" style="position: absolute;right: 2px;padding: 0px 10px;height: 23px;margin-top: 2px;">
+            <span class="glyphicon glyphicon-plus"></span> Breakpoint
+        </button>
+        <div id="breakpoint-container" style="position: absolute;top: calc(100% + 2px);height: 16px;width: 100%;left: 23px;overflow:visible;"></div>
+    </div>
+</body>
diff --git a/controlhtml/horizontalGripper.html b/controlhtml/horizontalGripper.html
@@ -0,0 +1,2 @@
+<div class="topcoat-button" style="width:60px;height: 9px;top: -4px;box-sizing: border-box;position:absolute;left:calc(50% - 30px);padding: 0px;opacity: 0.9;cursor: ns-resize;border-radius: 0px;pointer-events:all;">
+</div>
diff --git a/controlhtml/html-elements-catalog.html b/controlhtml/html-elements-catalog.html
@@ -68,9 +68,41 @@
         .customTemplateShortcut .glyphicon-tag {
             zoom:2;
         }
+
+        #launch-toolbox {
+            height: 26px;
+            width: 37px;
+            margin-top: 2px;
+            margin-bottom: 2px;
+            margin-left: 2px;
+            padding: 0px;
+            border-radius: 0px;
+            border-color: rgba(255,255,255,0.5);
+        }
+
+        #launch-toolbox span {
+            transition: all 100ms;
+            margin:0px -4px;
+        }
+
+        #launch-toolbox.activated span {
+            transform: rotate(180deg);
+        }
+
+        #interaction-mode span {
+            color:orangered!important;
+        }
+
+        #interaction-mode.activated span {
+            color:lawngreen !important;
+        }
+
     </style>
     <div class="property-toolbox" id="widget-toolbox">
         <div id="html-elements-catalog" style="position: absolute; width: calc(100% - 3px); height: calc(100% - 3px); border:1px solid gray; left: 0px; top: 0px;">
+            <div id="interaction-mode" style="display: block;margin: auto;margin-top: 5px;padding: 5px;" title="User Interaction">
+                <span class="glyphicon glyphicon-hand-up" aria-hidden="true" style="zoom:1.5;margin-left:3px;"></span>
+            </div>
             <img class="htmlwidget widgetDragSource widgetDrawSource" id="ad-element-pointer" src="{{module_path}}/controlhtml/widgetImages/Move_Widget.png" alt="Pointer">
             <div class="htmlwidget widgetDragSource widgetDrawSource" data-profile="html" id="ad-element-paragraph" style="height: 15px;width: 14px;">
                 <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>
@@ -90,7 +122,11 @@
             </div>
 
             <img class="htmlwidget widgetDragSourceSeperator" src="{{module_path}}/controlhtml/Widget_Seperator.png" alt="" />
-
+            <button id="launch-toolbox" class="btn primary">
+                <span class="glyphicon glyphicon-menu-right"></span>
+                <span class="glyphicon glyphicon-menu-right"></span>
+            </button>
+            <img class="htmlwidget widgetDragSourceSeperator" src="{{module_path}}/controlhtml/Widget_Seperator.png" alt="" style="margin-top:0px;"/>
             <div id="custom-element-container"></div>
 
             <div class="contextmenu-listner_create"></div>

diff --git a/controlhtml/resizeKnobHandleTemplate.html b/controlhtml/resizeKnobHandleTemplate.html
@@ -0,0 +1 @@
+<div style="position: absolute;top: -41px;left: -7px;width: 0;height: 0;border-style: solid;border-width: 19px 7.5px 0 7.5px;border-color: #CCDA02 transparent transparent transparent;opacity: 1;cursor: pointer;pointer-events:all"></div>
diff --git a/controlhtml/ruler-options-menu.html b/controlhtml/ruler-options-menu.html
@@ -3,7 +3,6 @@
     <li><a role="menuitem" tabindex="-1" href="#" data-action="hide-grid">Hide Guides</a></li>
     <li><a role="menuitem" tabindex="-1" href="#" data-action="lock-grid">Lock Guides</a></li>
     <li><a role="menuitem" tabindex="-1" href="#" data-action="clear-grid">Clear Guides</a></li>
-    <!--<li><a role="menuitem" tabindex="-1" href="#" data-action="show-fluid-grid">Show Fluid Grid</a></li>
-    <li><a role="menuitem" tabindex="-1" href="#" data-action="hide-fluid-grid">Hide Fluid Grid</a></li>-->
+    <li><a role="menuitem" tabindex="-1" href="#" data-action="show-responsive-controls">Show Responsive Controls</a></li>
   </ul>
 </div>
diff --git a/controlhtml/verticalGripper.html b/controlhtml/verticalGripper.html
@@ -0,0 +1,2 @@
+<div class="topcoat-button" style="height:60px;width: 9px;left: -4px;box-sizing: border-box;position:absolute;top:calc(50% - 30px);padding: 0px;opacity: 0.9;cursor: ew-resize;border-radius: 0px;pointer-events:all;">
+</div>