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

Merge branch 'temp-template-editor' of https://github.com/umbraco/Umbraco-CMS into temp-template-editor

Browse Source
This commit is contained in:
Per Ploug
2017-01-05 08:45:28 +01:00
parent 8b479b57e5 663b0f3931
commit dbdb1cbd06
7 changed files with 279 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js Normal file
View File

@@ -0,0 +1,179 @@
/**
@ngdoc directive
@name umbraco.directives.directive:umbDateTimePicker
@restrict E
@scope
@description
<b>Added in Umbraco version 7.6</b>
This directive is a wrapper of the bootstrap datetime picker version 3.1.3. Use it to render a date time picker.
For extra details about options and events take a look here: http://eonasdan.github.io/bootstrap-datetimepicker/
Use this directive to render a date time picker
<h3>Markup example</h3>
<pre>
<div ng-controller="My.Controller as vm">
<umb-date-time-picker
options="vm.config"
on-change="vm.datePickerChange(event)"
on-error="vm.datePickerError(event)">
</umb-date-time-picker>
</div>
</pre>
<h3>Controller example</h3>
<pre>
(function () {
"use strict";
function Controller() {
var vm = this;
vm.date = "";
vm.config = {
pickDate: true,
pickTime: true,
useSeconds: true,
format: "YYYY-MM-DD HH:mm:ss",
icons: {
time: "icon-time",
date: "icon-calendar",
up: "icon-chevron-up",
down: "icon-chevron-down"
}
};
vm.datePickerChange = datePickerChange;
vm.datePickerError = datePickerError;
function datePickerChange(event) {
// handle change
if(event.date && event.date.isValid()) {
var date = event.date.format(vm.datePickerConfig.format);
}
}
function datePickerError(event) {
// handle error
}
}
angular.module("umbraco").controller("My.Controller", Controller);
})();
</pre>
@param {object} options (<code>binding</code>): Config object for the date picker.
@param {callback} onHide (<code>callback</code>): Hide callback.
@param {callback} onShow (<code>callback</code>): Show callback.
@param {callback} onChange (<code>callback</code>): Change callback.
@param {callback} onError (<code>callback</code>): Error callback.
@param {callback} onUpdate (<code>callback</code>): Update callback.
**/
(function () {
'use strict';
function DateTimePickerDirective(assetsService) {
function link(scope, element, attrs, ctrl) {
function onInit() {
// load css file for the date picker
assetsService.loadCss('lib/datetimepicker/bootstrap-datetimepicker.min.css');
// load the js file for the date picker
assetsService.loadJs('lib/datetimepicker/bootstrap-datetimepicker.js').then(function () {
// init date picker
initDatePicker();
});
}
function onHide(event) {
if (scope.onHide) {
scope.$apply(function(){
// callback
scope.onHide({event: event});
});
}
}
function onShow() {
if (scope.onShow) {
scope.$apply(function(){
// callback
scope.onShow();
});
}
}
function onChange(event) {
if (scope.onChange && event.date && event.date.isValid()) {
scope.$apply(function(){
// callback
scope.onChange({event: event});
});
}
}
function onError(event) {
if (scope.onError) {
scope.$apply(function(){
// callback
scope.onError({event:event});
});
}
}
function onUpdate(event) {
if (scope.onUpdate) {
scope.$apply(function(){
// callback
scope.onUpdate({event: event});
});
}
}
function initDatePicker() {
// Open the datepicker and add a changeDate eventlistener
element
.datetimepicker(scope.options)
.on("dp.hide", onHide)
.on("dp.show", onShow)
.on("dp.change", onChange)
.on("dp.error", onError)
.on("dp.update", onUpdate);
}
onInit();
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/umb-date-time-picker.html',
scope: {
options: "=",
onHide: "&",
onShow: "&",
onChange: "&",
onError: "&",
onUpdate: "&"
},
link: link
};
return directive;
}
angular.module('umbraco.directives').directive('umbDateTimePicker', DateTimePickerDirective);
})();

15
src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less
View File

@@ -23,4 +23,19 @@
.umb-querybuilder .row > div {
padding: 20px 0;
border-bottom: 1px solid @grayLighter;
}
.umb-querybuilder .datepicker input {
width: 90px;
}
.umb-querybuilder .query-items {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.umb-querybuilder .query-items > * {
flex: 0 1 auto;
margin: 5px;
}

24
src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
View File

@@ -9,6 +9,12 @@
vm.contentTypes = [];
vm.conditions = [];
vm.datePickerConfig = {
pickDate: true,
pickTime: false,
format: "YYYY-MM-DD"
};
vm.query = {
contentType: {
name: "Everything"
@@ -41,6 +47,7 @@
vm.setFilterProperty = setFilterProperty;
vm.setFilterTerm = setFilterTerm;
vm.changeConstraintValue = changeConstraintValue;
vm.datePickerChange = datePickerChange;
function onInit() {
@@ -58,7 +65,7 @@
.then(function (conditions) {
vm.conditions = conditions;
});
throttledFunc();
}
@@ -134,18 +141,28 @@
function setFilterProperty(filter, property) {
filter.property = property;
throttledFunc();
filter.term = {};
filter.constraintValue = "";
}
function setFilterTerm(filter, term) {
filter.term = term;
throttledFunc();
if(filter.constraintValue) {
throttledFunc();
}
}
function changeConstraintValue() {
throttledFunc();
}
function datePickerChange(event, filter) {
if(event.date && event.date.isValid()) {
filter.constraintValue = event.date.format(vm.datePickerConfig.format);
throttledFunc();
}
}
var throttledFunc = _.throttle(function () {
templateQueryResource.postTemplateQuery(vm.query)
@@ -154,7 +171,6 @@
});
}, 200);
onInit();

23
src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
View File

@@ -3,8 +3,9 @@
<div class="umb-control-group umb-querybuilder">
<div class="row">
<div>
I want
<div class="query-items">
<span>I want</span>
<div class="btn-group">
@@ -30,7 +31,7 @@
</div>
<div ng-repeat="filter in vm.query.filters">
<div class="query-items" ng-repeat="filter in vm.query.filters">
<span ng-if="$first">Where</span>
<span ng-if="!$first">And</span>
@@ -66,8 +67,16 @@
</ul>
</div>
<input type="text" ng-if="filter.term" style="width:90px;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
<!-- Filter term types (string, int, date) -->
<input type="text" ng-show="filter.term.appliesTo[0] === 'string'" style="width:90px;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
<input type="number" ng-show="filter.term.appliesTo[0] === 'int'" style="width:90px;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
<span ng-show="filter.term.appliesTo[0] === 'datetime'">
<umb-date-time-picker
options="vm.datePickerConfig"
on-change="vm.datePickerChange(event, filter)">
</umb-date-time-picker>
</span>
<a href ng-click="vm.addFilter(vm.query)">
<i class="icon-add"></i>
</a>
@@ -79,9 +88,9 @@
</div>
<div>
<div class="query-items">
Order by
<span>Order by</span>
<div class="btn-group">
<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">

6
src/Umbraco.Web.UI.Client/src/views/components/umb-date-time-picker.html Normal file
View File

@@ -0,0 +1,6 @@
<div class="input-append date datepicker" style="position: relative;">
<input data-format="{{ config.format }}" type="text" class="datepickerinput" />
<span class="add-on">
<i class="icon-calendar"></i>
</span>
</div>

48
src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
View File

@@ -1,7 +1,7 @@
(function () {
"use strict";
function TemplatesEditController($scope, $routeParams, templateResource, assetsService, notificationsService, editorState, navigationService, appState, macroService, treeService, angularHelper) {
function TemplatesEditController($scope, $routeParams, templateResource, assetsService, notificationsService, editorState, navigationService, appState, macroService, treeService, angularHelper, $timeout) {
var vm = this;
var oldMasterTemplateAlias = null;
@@ -104,6 +104,7 @@
// save state of master template to use for comparison when syncing the tree on save
oldMasterTemplateAlias = angular.copy(template.masterTemplateAlias);
// ace configuration
vm.aceOption = {
mode: "razor",
theme: "chrome",
@@ -114,15 +115,23 @@
onLoad: function(_editor) {
vm.editor = _editor;
//initial cursor placement
vm.editor.navigateFileEnd();
persistCurrentLocation();
// initial cursor placement
// Keep cursor in name field if we are create a new template
// else set the cursor at the bottom of the code editor
if(!$routeParams.create) {
$timeout(function(){
vm.editor.navigateFileEnd();
vm.editor.focus();
persistCurrentLocation();
});
}
//change on blur, focus
vm.editor.on("blur", persistCurrentLocation);
vm.editor.on("focus", persistCurrentLocation);
}
}
};
vm.openPageFieldOverlay = openPageFieldOverlay;
@@ -174,8 +183,11 @@
},
close: function(oldModel) {
// close the dialog
vm.insertOverlay.show = false;
vm.insertOverlay = null;
// focus editor
vm.editor.focus();
}
};
@@ -197,6 +209,13 @@
vm.macroPickerOverlay.show = false;
vm.macroPickerOverlay = null;
},
close: function(oldModel) {
// close the dialog
vm.macroPickerOverlay.show = false;
vm.macroPickerOverlay = null;
// focus editor
vm.editor.focus();
}
};
}
@@ -214,8 +233,11 @@
vm.pageFieldOverlay = null;
},
close: function (model) {
// close the dialog
vm.pageFieldOverlay.show = false;
vm.pageFieldOverlay = null;
// focus editor
vm.editor.focus();
}
};
}
@@ -239,8 +261,11 @@
vm.dictionaryItemOverlay = null;
},
close: function (model) {
// close dialog
vm.dictionaryItemOverlay.show = false;
vm.dictionaryItemOverlay = null;
// focus editor
vm.editor.focus();
}
};
}
@@ -263,8 +288,11 @@
vm.partialItemOverlay = null;
},
close: function (model) {
// close dialog
vm.partialItemOverlay.show = false;
vm.partialItemOverlay = null;
// focus editor
vm.editor.focus();
}
};
}
@@ -293,8 +321,11 @@
},
close: function (model) {
// close dialog
vm.queryBuilderOverlay.show = false;
vm.queryBuilderOverlay = null;
// focus editor
vm.editor.focus();
}
};
}
@@ -326,10 +357,11 @@
},
close: function(model) {
// close dialog
vm.sectionsOverlay.show = false;
vm.sectionsOverlay = null;
// focus editor
vm.editor.focus();
}
}
}
@@ -367,8 +399,11 @@
vm.masterTemplateOverlay = null;
},
close: function(oldModel) {
// close dialog
vm.masterTemplateOverlay.show = false;
vm.masterTemplateOverlay = null;
// focus editor
vm.editor.focus();
}
};
@@ -441,6 +476,7 @@
vm.editor.clearSelection();
vm.editor.navigateFileStart();
vm.editor.focus();
// set form state to $dirty
setFormState("dirty");

1
src/Umbraco.Web.UI.Client/test/unit/app/templates/template-editor-controller.spec.js
View File

@@ -47,6 +47,7 @@
getCursorPosition: function() {},
getValue: function() {},
setValue: function() {},
focus: function() {},
clearSelection: function() {},
navigateFileStart: function() {}
};