yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add infinite editor markup to template sections

Browse Source
This commit is contained in:
Mads Rasmussen
2018-08-01 13:33:17 +02:00
parent 37db8516ed
commit fbfcccc13d
2 changed files with 111 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/templatesections/templatesections.controller.js
View File

@@ -1,35 +1,47 @@
(function () {
"use strict";
function TemplateSectionsOverlayController($scope) {
function TemplateSectionsController($scope, formHelper) {
var vm = this;
vm.select = select;
vm.submit = submit;
vm.close = close;
$scope.model.mandatoryRenderSection = false;
if(!$scope.model.title) {
$scope.model.title = "Sections";
}
vm.select = select;
function onInit() {
if($scope.model.hasMaster) {
$scope.model.insertType = 'addSection';
} else {
$scope.model.insertType = 'renderBody';
}
}
function select(type) {
$scope.model.insertType = type;
}
function submit(model) {
if (formHelper.submitForm({scope: $scope})) {
$scope.model.submit($scope.model);
}
}
function close() {
if($scope.model.close) {
$scope.model.close();
}
}
onInit();
}
angular.module("umbraco").controller("Umbraco.Overlays.TemplateSectionsOverlay", TemplateSectionsOverlayController);
angular.module("umbraco").controller("Umbraco.Editors.TemplateSectionsController", TemplateSectionsController);
})();

145
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/templatesections/templatesections.html
View File

@@ -1,64 +1,105 @@
<div ng-controller="Umbraco.Overlays.TemplateSectionsOverlay as vm">
<div ng-controller="Umbraco.Editors.TemplateSectionsController as vm">
<ng-form name="templateSectionForm">
<div class="umb-insert-code-box" ng-click="vm.select('renderBody')">
<div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'renderBody' }"><i class="icon icon-check"></i></div>
<form name="templateSectionsForm" novalidate val-form-manager>
<div class="umb-insert-code-box__title"><localize key="template_renderBody" /></div>
<umb-editor-view>
<div class="umb-insert-code-box__description">
<localize key="template_renderBodyDesc" />
</div>
</div>
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<div class="umb-insert-code-box" ng-click="vm.select('renderSection')">
<umb-editor-container>
<umb-box>
<umb-box-content>
<div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'renderSection' }"><i class="icon icon-check"></i></div>
<div class="umb-insert-code-box__title"><localize key="template_renderSection" /></div>
<div class="umb-insert-code-box__description">
<localize key="template_renderSectionDesc" />
</div>
<div ng-if="model.insertType === 'renderSection'" style="margin-top: 20px;">
<div style="margin-bottom: 20px;">
<label class="bold"><localize key="template_sectionName" /> <span class="red">*</span></label>
<input type="text" name="renderSectionName" class="-full-width-input" ng-model="model.renderSectionName" required umb-auto-focus />
<span ng-messages="templateSectionForm.renderSectionName.$error" show-validation-on-submit>
<small class="red" ng-message="required"><localize key="required" /></small>
</span>
</div>
<div>
<label>
<input type="checkbox" ng-model="model.mandatoryRenderSection" /> <localize key="template_sectionMandatory" />
</label>
<div class="umb-insert-code-box__description">
<localize key="template_sectionMandatoryDesc" />
<div class="umb-insert-code-box" ng-click="vm.select('renderBody')">
<div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'renderBody' }"><i class="icon icon-check"></i></div>
<div class="umb-insert-code-box__title"><localize key="template_renderBody" /></div>
<div class="umb-insert-code-box__description">
<localize key="template_renderBodyDesc" />
</div>
</div>
<div class="umb-insert-code-box" ng-click="vm.select('renderSection')">
<div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'renderSection' }"><i class="icon icon-check"></i></div>
<div class="umb-insert-code-box__title"><localize key="template_renderSection" /></div>
<div class="umb-insert-code-box__description">
<localize key="template_renderSectionDesc" />
</div>
<div ng-if="model.insertType === 'renderSection'" style="margin-top: 20px;">
<div style="margin-bottom: 20px;">
<label class="bold"><localize key="template_sectionName" /> <span class="red">*</span></label>
<input type="text" name="renderSectionName" class="-full-width-input" ng-model="model.renderSectionName" required umb-auto-focus />
<span ng-messages="templateSectionsForm.renderSectionName.$error" show-validation-on-submit>
<small class="red" ng-message="required"><localize key="required" /></small>
</span>
</div>
<div>
<label>
<input type="checkbox" ng-model="model.mandatoryRenderSection" /> <localize key="template_sectionMandatory" />
</label>
<div class="umb-insert-code-box__description">
<localize key="template_sectionMandatoryDesc" />
</div>
</div>
</div>
</div>
<div class="umb-insert-code-box" ng-click="vm.select('addSection')">
<div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'addSection' }"><i class="icon icon-check"></i></div>
<div class="umb-insert-code-box__title"><localize key="template_defineSection" /></div>
<div class="umb-insert-code-box__description">
<localize key="template_defineSectionDesc" />
</div>
<div ng-if="model.insertType === 'addSection'" style="margin-top: 20px;">
<div>
<label class="bold"><localize key="template_sectionName" /> <span class="red">*</span></label>
<input type="text" name="sectionName" class="-full-width-input" ng-model="model.sectionName" required umb-auto-focus />
<span ng-messages="templateSectionsForm.sectionName.$error" show-validation-on-submit>
<small class="red" ng-message="required"><localize key="required" /></small>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</umb-box-content>
</umb-box>
<div class="umb-insert-code-box" ng-click="vm.select('addSection')">
</umb-editor-container>
<div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'addSection' }"><i class="icon icon-check"></i></div>
<div class="umb-insert-code-box__title"><localize key="template_defineSection" /></div>
<div class="umb-insert-code-box__description">
<localize key="template_defineSectionDesc" />
</div>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
action="vm.close()">
</umb-button>
<umb-button
type="button"
button-style="success"
label-key="general_submit"
action="vm.submit(model)">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
<div ng-if="model.insertType === 'addSection'" style="margin-top: 20px;">
<div>
<label class="bold"><localize key="template_sectionName" /> <span class="red">*</span></label>
<input type="text" name="sectionName" class="-full-width-input" ng-model="model.sectionName" required umb-auto-focus />
<span ng-messages="templateSectionForm.sectionName.$error" show-validation-on-submit>
<small class="red" ng-message="required"><localize key="required" /></small>
</span>
</div>
</div>
</umb-editor-view>
</form>
</div>
</ng-form>
</div>