Files
Orchard/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor.min.js
Sipke Schoorstra a492f89ea0 Further Layouts client-side scripting improvements.
- Pushed the editElement function further down from Content to Element, which means even less code for custom container elements.
- Fixed a bug where client-side element editor state would not be applied after editing that element.
- Pushed down the toObject function from Content to Element, which means less code is necessary for custom container elements.
-
2015-12-21 20:59:47 +01:00

1 line
16 KiB
JavaScript

angular.module("LayoutEditor",["ngSanitize","ngResource","ui.sortable"]);var LayoutEditor;!function(e){var t=function(){var e=this;this._clipboardData={},this._isDisabled=!1,this._wasInvoked=!1,this.setData=function(t,o){e._clipboardData[t]=o,e._wasInvoked=!0},this.getData=function(t){return e._clipboardData[t]},this.disable=function(){e._isDisabled=!0,e._wasInvoked=!1,e._clipboardData={}},this.isDisabled=function(){return e._isDisabled},this.wasInvoked=function(){return e._wasInvoked}};e.Clipboard=new t,angular.module("LayoutEditor").factory("clipboard",[function(){return{setData:e.Clipboard.setData,getData:e.Clipboard.getData,disable:e.Clipboard.disable,isDisabled:e.Clipboard.isDisabled,wasInvoked:e.Clipboard.wasInvoked}}])}(LayoutEditor||(LayoutEditor={})),angular.module("LayoutEditor").factory("scopeConfigurator",["$timeout","clipboard",function(e,t){return{configureForElement:function(e,o){o.find(".layout-panel").click(function(e){e.stopPropagation()}),o.parent().keydown(function(n){var l=!1,a=!1,r=e.element;if(!r.editor.isDragging){if(!t.isDisabled()){var i=r.editor.focusedElement;if(i&&n.ctrlKey)switch(n.which){case 67:i.copy(t);break;case 88:i.cut(t);break;case 86:i.paste(t)}}if(n.ctrlKey||n.shiftKey||n.altKey||46!=n.which?n.ctrlKey||n.shiftKey||n.altKey||32!=n.which&&27!=n.which||(o.find(".layout-panel-action-properties").first().click(),l=!0):(e["delete"](r),l=!0),"Content"==r.type&&(n.ctrlKey||n.shiftKey||n.altKey||13!=n.which||(o.find(".layout-panel-action-edit").first().click(),l=!0)),r.children&&(n.ctrlKey||n.shiftKey||!n.altKey||40!=n.which||(r.children.length>0&&r.children[0].setIsFocused(),l=!0),"Column"==r.type)){var c=!n.ctrlKey;37==n.which?(n.altKey&&r.expandLeft(c),n.shiftKey&&r.contractRight(c),l=!0):39==n.which&&(n.altKey&&r.contractLeft(c),n.shiftKey&&r.expandRight(c),l=!0)}r.parent&&(n.altKey&&38==n.which&&(r.parent.setIsFocused(),l=!0),"Row"==r.parent.type?n.ctrlKey||n.shiftKey||n.altKey||37!=n.which?n.ctrlKey||n.shiftKey||n.altKey||39!=n.which?!n.ctrlKey||n.shiftKey||n.altKey||37!=n.which?!n.ctrlKey||n.shiftKey||n.altKey||39!=n.which||(r.moveDown(),l=!0):(r.moveUp(),a=!0,l=!0):(r.parent.moveFocusNextChild(r),l=!0):(r.parent.moveFocusPrevChild(r),l=!0):n.ctrlKey||n.shiftKey||n.altKey||38!=n.which?n.ctrlKey||n.shiftKey||n.altKey||40!=n.which?!n.ctrlKey||n.shiftKey||n.altKey||38!=n.which?!n.ctrlKey||n.shiftKey||n.altKey||40!=n.which||(r.moveDown(),l=!0):(r.moveUp(),a=!0,l=!0):(r.parent.moveFocusNextChild(r),l=!0):(r.parent.moveFocusPrevChild(r),l=!0)),l&&n.preventDefault(),n.stopPropagation(),e.$apply(),a&&window.setTimeout(function(){e.$apply(function(){r.editor.focusedElement.setIsFocused()})},100)}}),e.element.setIsFocusedEventHandlers.push(function(){o.parent().focus()}),e["delete"]=function(e){e["delete"]()},e.element.hasEditor&&(e.edit=function(){e.$root.editElement(e.element).then(function(t){e.$apply(function(){t.cancel||(e.element.data=t.element.data,e.element.applyElementEditorModel(t.elementEditorModel),e.element.setHtml&&e.element.setHtml(t.element.html))})})})},configureForContainer:function(t,o){var n=t.element;t.getShowChildrenPlaceholder=function(){return 0===t.element.children.length&&!t.element.getIsDropTarget()},t.sortableOptions={cursor:"move",delay:150,disabled:n.getIsSealed(),distance:5,start:function(e,o){t.$apply(function(){n.setIsDropTarget(!0),n.editor.isDragging=!0}),o.placeholder.height(o.item.height()-4),o.placeholder.css("min-height",0)},stop:function(e,o){t.$apply(function(){n.editor.isDragging=!1,n.setIsDropTarget(!1)})},over:function(t,l){l.sender&&l.sender[0].isToolbox&&(l.sender[0].dropTargetTimeout&&(e.cancel(l.sender[0].dropTargetTimeout),l.sender[0].dropTargetTimeout=null),e(function(){if("Row"==n.type){var e=n.editor.dropTargetElement;e&&"Row"==e.type&&e.rollbackAddColumn()}n.setIsDropTarget(!1)}),l.sender[0].dropTargetTimeout=e(function(){if("Row"==n.type){var e=l.item.sortable.model,t=Math.floor(12/(n.children.length+1));e.width=t,e.offset=0,n.beginAddColumn(t);var a=_.max(_(o.find("> .layout-children > .layout-column:not(.ui-sortable-placeholder)")).map(function(e){return $(e).height()}));for(i=1;i<=12;i++)l.placeholder.removeClass("col-xs-"+i);l.placeholder.addClass("col-xs-"+e.width),a>0?(l.placeholder.height(a),l.placeholder.css("min-height",0)):(l.placeholder.height(0),l.placeholder.css("min-height",""))}n.setIsDropTarget(!0)},150))},receive:function(o,l){l.sender&&l.sender[0].isToolbox&&t.$apply(function(){var o=l.item.sortable.model;o&&("Row"==n.type&&n.commitAddColumn(),o.setEditor(n.editor),o.setParent(n),o.hasEditor&&t.$root.editElement(o).then(function(t){t.cancel||(o.data=t.element.data,o.applyElementEditorModel(t.elementEditorModel),o.setHtml&&o.setHtml(t.element.html)),e(function(){t.cancel?o["delete"]():o.setIsFocused(),n.setIsDropTarget(!1)})})),e(function(){n.setIsDropTarget(!1),o&&o.setIsFocused()})})}},t.click=function(e,t){e.editor.isDragging||e.setIsFocused(),t.stopPropagation()},t.getClasses=function(e){var t=["layout-element"];return e.children&&(t.push("layout-container"),e.getIsSealed()&&t.push("layout-container-sealed")),t.push("layout-"+e.type.toLowerCase()),e.dropTargetClass&&t.push(e.dropTargetClass),"Row"==e.type&&(t.push("row"),e.canAddColumn()||t.push("layout-row-full")),"Column"==e.type&&(t.push("col-xs-"+e.width),t.push("col-xs-offset-"+e.offset)),"Content"==e.type&&t.push("layout-content-"+e.contentTypeClass),e.getIsActive()&&t.push("layout-element-active"),e.getIsFocused()&&t.push("layout-element-focused"),e.getIsSelected()&&t.push("layout-element-selected"),e.getIsDropTarget()&&t.push("layout-element-droptarget"),e.isTemplated&&t.push("layout-element-templated"),t}}}}]),angular.module("LayoutEditor").directive("orcLayoutEditor",["environment",function(environment){return{restrict:"E",scope:{},controller:["$scope","$element","$attrs","$compile","clipboard",function($scope,$element,$attrs,$compile,clipboard){if(!$attrs.model)throw new Error("The 'model' attribute must evaluate to a LayoutEditor.Editor object.");$scope.element=eval($attrs.model),$scope.click=function(e,t){e.editor.isDragging||e.setIsFocused(),t.stopPropagation()},$scope.getClasses=function(e){var t=["layout-element","layout-container","layout-canvas"];return e.getIsActive()&&t.push("layout-element-active"),e.getIsFocused()&&t.push("layout-element-focused"),e.getIsSelected()&&t.push("layout-element-selected"),e.getIsDropTarget()&&t.push("layout-element-droptarget"),e.isTemplated&&t.push("layout-element-templated"),t};var layoutDesignerHost=$(".layout-designer").data("layout-designer-host");$scope.$root.layoutDesignerHost=layoutDesignerHost,layoutDesignerHost.element.on("replacecanvas",function(e,t){var o=$scope.element,n={data:t.canvas.data,htmlId:t.canvas.htmlId,htmlClass:t.canvas.htmlClass,htmlStyle:t.canvas.htmlStyle,isTemplated:t.canvas.isTemplated,children:t.canvas.children};layoutDesignerHost.editor=window.layoutEditor=new LayoutEditor.Editor(o.config,n);var l="<orc-layout-editor model='window.layoutEditor' />",a=$compile(l)($scope);$(".layout-editor-holder").html(a)}),$scope.$root.editElement=function(e){var t=$scope.$root.layoutDesignerHost;return t.editElement(e)},$scope.$root.addElement=function(e){var t=$scope.$root.layoutDesignerHost;return t.addElement(e)},$(document).on("cut copy paste",function(e){if(clipboard.wasInvoked())e.originalEvent.clipboardData.setData("text/plain",clipboard.getData("text/plain")),e.originalEvent.clipboardData.setData("text/json",clipboard.getData("text/json")),e.preventDefault();else{var t=$scope.element.focusedElement;t&&($scope.$apply(function(){switch(e.type){case"copy":t.copy(e.originalEvent.clipboardData);break;case"cut":t.cut(e.originalEvent.clipboardData);break;case"paste":t.paste(e.originalEvent.clipboardData)}}),window.setTimeout(function(){$scope.$apply(function(){$scope.element.focusedElement&&$scope.element.focusedElement.setIsFocused()})},100),e.preventDefault())}clipboard.disable()})}],templateUrl:environment.templateUrl("Editor"),replace:!0,link:function(e,t){t.find(".layout-toolbar-container").click(function(e){e.stopPropagation()}),$(window).click(function(t){e.$apply(function(){e.element.activeElement=null,e.element.focusedElement=null})})}}}]),angular.module("LayoutEditor").directive("orcLayoutCanvas",["scopeConfigurator","environment",function(e,t){return{restrict:"E",scope:{element:"="},controller:["$scope","$element","$attrs",function(t,o,n){e.configureForElement(t,o),e.configureForContainer(t,o),t.sortableOptions.axis="y"}],templateUrl:t.templateUrl("Canvas"),replace:!0}}]),angular.module("LayoutEditor").directive("orcLayoutChild",["$compile",function(e){return{restrict:"E",scope:{element:"="},link:function(t,o){var n="<orc-layout-"+t.element.type.toLowerCase()+" element='element' />",l=e(n)(t);$(o).replaceWith(l)}}}]),angular.module("LayoutEditor").directive("orcLayoutColumn",["$compile","scopeConfigurator","environment",function(e,t,o){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(e,o){t.configureForElement(e,o),t.configureForContainer(e,o),e.sortableOptions.axis="y"}],templateUrl:o.templateUrl("Column"),replace:!0,link:function(e,t,o){t.find(".layout-column-resize-bar").draggable({axis:"x",helper:"clone",revert:!0,start:function(t,o){e.$apply(function(){e.element.editor.isResizing=!0})},drag:function(o,n){var l=t.parent(),a=l.width()/e.element.width,r=!o.ctrlKey;if($(o.target).hasClass("layout-column-resize-bar-left")){var i=n.offset.left-l.offset().left;-a>i&&e.element.canExpandLeft(r)?e.$apply(function(){e.element.expandLeft(r)}):i>a&&e.element.canContractLeft(r)&&e.$apply(function(){e.element.contractLeft(r)})}else if($(o.target).hasClass("layout-column-resize-bar-right")){var i=n.offset.left-l.width()-l.offset().left;i>a&&e.element.canExpandRight(r)?e.$apply(function(){e.element.expandRight(r)}):-a>i&&e.element.canContractRight(r)&&e.$apply(function(){e.element.contractRight(r)})}},stop:function(t,o){e.$apply(function(){e.element.editor.isResizing=!1})}})}}}]),angular.module("LayoutEditor").directive("orcLayoutContent",["$sce","scopeConfigurator","environment",function(e,t,o){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(o,n){t.configureForElement(o,n),o.element.setHtml=function(t){o.element.html=t,o.element.htmlUnsafe=e.trustAsHtml(t)},o.element.setHtml(o.element.html)}],templateUrl:o.templateUrl("Content"),replace:!0}}]),angular.module("LayoutEditor").directive("orcLayoutGrid",["$compile","scopeConfigurator","environment",function(e,t,o){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(e,o){t.configureForElement(e,o),t.configureForContainer(e,o),e.sortableOptions.axis="y"}],templateUrl:o.templateUrl("Grid"),replace:!0}}]),angular.module("LayoutEditor").directive("orcLayoutRow",["$compile","scopeConfigurator","environment",function(e,t,o){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(e,o){t.configureForElement(e,o),t.configureForContainer(e,o),e.sortableOptions.axis="x",e.sortableOptions["ui-floating"]=!0}],templateUrl:o.templateUrl("Row"),replace:!0}}]),angular.module("LayoutEditor").directive("orcLayoutPopup",[function(){return{restrict:"A",link:function(e,t,o){var n=$(t),l=n.closest(".layout-popup-trigger"),a=n.closest(".layout-element");l.click(function(){n.toggle(),n.is(":visible")&&(n.position({my:o.orcLayoutPopupMy||"left top",at:o.orcLayoutPopupAt||"left bottom+4px",of:l}),n.find("input").first().focus())}),n.click(function(e){e.stopPropagation()}),a.click(function(e){n.hide()}),n.keydown(function(e){e.ctrlKey||e.shiftKey||e.altKey||27!=e.which||n.hide(),e.stopPropagation()}),n.on("cut copy paste",function(e){e.stopPropagation()})}}}]),angular.module("LayoutEditor").directive("orcLayoutToolbox",["$compile","environment",function(e,t){return{restrict:"E",controller:["$scope","$element",function(e,t){e.resetElements=function(){e.gridElements=[LayoutEditor.Grid.from({toolboxIcon:"",toolboxLabel:"Grid",toolboxDescription:"Empty grid.",children:[]})],e.rowElements=[LayoutEditor.Row.from({toolboxIcon:"",toolboxLabel:"Row (1 column)",toolboxDescription:"Row with 1 column.",children:LayoutEditor.Column.times(1)}),LayoutEditor.Row.from({toolboxIcon:"",toolboxLabel:"Row (2 columns)",toolboxDescription:"Row with 2 columns.",children:LayoutEditor.Column.times(2)}),LayoutEditor.Row.from({toolboxIcon:"",toolboxLabel:"Row (3 columns)",toolboxDescription:"Row with 3 columns.",children:LayoutEditor.Column.times(3)}),LayoutEditor.Row.from({toolboxIcon:"",toolboxLabel:"Row (4 columns)",toolboxDescription:"Row with 4 columns.",children:LayoutEditor.Column.times(4)}),LayoutEditor.Row.from({toolboxIcon:"",toolboxLabel:"Row (6 columns)",toolboxDescription:"Row with 6 columns.",children:LayoutEditor.Column.times(6)}),LayoutEditor.Row.from({toolboxIcon:"",toolboxLabel:"Row (12 columns)",toolboxDescription:"Row with 12 columns.",children:LayoutEditor.Column.times(12)}),LayoutEditor.Row.from({toolboxIcon:"",toolboxLabel:"Row (empty)",toolboxDescription:"Empty row.",children:[]})],e.columnElements=[LayoutEditor.Column.from({toolboxIcon:"",toolboxLabel:"Column",toolboxDescription:"Empty column.",width:1,offset:0,children:[]})],e.canvasElements=[LayoutEditor.Canvas.from({toolboxIcon:"",toolboxLabel:"Canvas",toolboxDescription:"Empty canvas.",children:[]})],e.contentElementCategories=_(e.element.config.categories).map(function(e){return{name:e.name,elements:_(e.contentTypes).map(function(e){var t=e.type,o=LayoutEditor.factories[t]||LayoutEditor.factories.Content,n={isTemplated:!1,contentType:e.id,contentTypeLabel:e.label,contentTypeClass:e.typeClass,data:null,hasEditor:e.hasEditor,html:e.html},l=o(n);return l.toolboxIcon=e.icon||"",l.toolboxLabel=e.label,l.toolboxDescription=e.description,l})}})},e.resetElements(),e.getSortableOptions=function(o){var n,l,a=t.closest(".layout-editor").attr("id"),r=!1;switch(o){case"Grid":n=[".layout-canvas",".layout-column",".layout-common-holder"],l="layout-element layout-container layout-grid ui-sortable-placeholder";break;case"Row":n=[".layout-grid"],l="layout-element layout-container layout-row row ui-sortable-placeholder";break;case"Column":n=[".layout-row:not(.layout-row-full)"],l="layout-element layout-container layout-column ui-sortable-placeholder",r=!0;break;case"Content":n=[".layout-canvas",".layout-column",".layout-common-holder"],l="layout-element layout-content ui-sortable-placeholder";break;case"Canvas":n=[".layout-canvas",".layout-column",".layout-common-holder"],l="layout-element layout-container layout-grid ui-sortable-placeholder"}return{cursor:"move",connectWith:_(n).map(function(e){return"#"+a+" "+e+":not(.layout-container-sealed) > .layout-element-wrapper > .layout-children"}).join(", "),placeholder:l,"ui-floating":r,create:function(e,t){e.target.isToolbox=!0},start:function(t,o){e.$apply(function(){e.element.isDragging=!0})},stop:function(t,o){e.$apply(function(){e.element.isDragging=!1,e.resetElements()})},over:function(t,o){e.$apply(function(){e.element.canvas.setIsDropTarget(!1)})}}};var o="layoutToolboxCategory_Layout_IsCollapsed";e.layoutIsCollapsed="true"===$.cookie(o),e.toggleLayoutIsCollapsed=function(t){e.layoutIsCollapsed=!e.layoutIsCollapsed,$.cookie(o,e.layoutIsCollapsed,{expires:365}),t.preventDefault(),t.stopPropagation()}}],templateUrl:t.templateUrl("Toolbox"),replace:!0,link:function(e,t){var o=t.find(".layout-toolbox");$(window).on("resize scroll",function(e){var n=t.parent().find(".layout-canvas"),l=!!n&&n.height()>o.height(),a=$(window).scrollTop();l&&a>t.offset().top+t.height()-o.height()?(o.addClass("sticky-bottom"),o.removeClass("sticky-top")):l&&a>t.offset().top?(o.addClass("sticky-top"),o.removeClass("sticky-bottom")):(o.removeClass("sticky-top"),o.removeClass("sticky-bottom"))})}}}]),angular.module("LayoutEditor").directive("orcLayoutToolboxGroup",["$compile","environment",function(e,t){return{restrict:"E",scope:{category:"="},controller:["$scope","$element",function(e,t){var o="layoutToolboxCategory_"+e.category.name+"_IsCollapsed";e.isCollapsed="true"===$.cookie(o),e.toggleIsCollapsed=function(t){e.isCollapsed=!e.isCollapsed,$.cookie(o,e.isCollapsed,{expires:365}),t.preventDefault(),t.stopPropagation()}}],templateUrl:t.templateUrl("ToolboxGroup"),replace:!0}}]);