+ ng-model="editor.component.repeat.monthdays"
+ sg-toggle-grid="sg-toggle-grid">
1
2
3
@@ -121,7 +123,8 @@
+ ng-model="editor.component.repeat.months"
+ sg-toggle-grid="sg-toggle-grid">
diff --git a/UI/WebServerResources/js/Common/sgToggleGrid.directive.js b/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
index 55bbd622a..deee49f03 100644
--- a/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
+++ b/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
@@ -7,41 +7,56 @@
* sgToggleGrid - Convert the tiles of a grid to toggle buttons
* @memberof SOGo.Common
* @restrict attribute
- * @param {object} sgToggleGrid - the model of the source objects
* @param {string} [sgToggleGridAttr] - the attribute that specifies if an object is enabled (toggled)
* @ngInject
* @example:
..
+ ng-model="editor.event.repeat.days"
+ sg-toggle-grid sg-toggle-grid-attr="day">..
*/
- sgToggleGrid.$inject = ['$parse'];
- function sgToggleGrid($parse) {
+ sgToggleGrid.$inject = ['$parse', '$mdUtil'];
+ function sgToggleGrid($parse, $mdUtil) {
return {
restrict: 'A',
- link: link
+ require: '?ngModel',
+ compile: compile
};
- function link(scope, iElement, attrs, ctrl) {
- var tiles = iElement.find('md-grid-tile'),
- tile,
- i,
- modelDays,
- modelAttr,
- ensureInitRunsOnce,
- toggleClass;
+ function compile(tElement, tAttrs) {
+ return function postLink(scope, element, attr, ngModelCtrl) {
+ var tiles = tElement.find('md-grid-tile'),
+ tile,
+ i,
+ modelDays,
+ modelAttr,
+ toggleClass;
- ensureInitRunsOnce = scope.$watch(function() {
- // Parse attribute until it returns a valid object
- return $parse(attrs.sgToggleGrid)(scope);
- }, function(days) {
- if (angular.isDefined(days)) {
- var flattenedDays = days;
- modelDays = days;
- if (attrs.sgToggleGridAttr) {
- modelAttr = attrs.sgToggleGridAttr;
- flattenedDays = _.map(days, attrs.sgToggleGridAttr);
+ ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
+ ngModelCtrl.$render = render;
+
+ toggleClass = function() {
+ // Toggle class on click event and call toggle function
+ var tile = angular.element(this),
+ day = tile.attr('value');
+ tile.toggleClass('sg-active');
+ toggle(day);
+ };
+
+ for (i = 0; i < tiles.length; i++) {
+ tile = angular.element(tiles[i]);
+ tile.addClass('sg-icon-button');
+ tile.find('figure').addClass('md-icon');
+ tile.on('click', toggleClass);
+ }
+
+ function render() {
+ console.debug(ngModelCtrl.$viewValue);
+ var flattenedDays = ngModelCtrl.$viewValue;
+ modelDays = ngModelCtrl.$viewValue;
+ if (tAttrs.sgToggleGridAttr) {
+ modelAttr = tAttrs.sgToggleGridAttr;
+ flattenedDays = _.map(ngModelCtrl.$viewValue, tAttrs.sgToggleGridAttr);
}
_.forEach(tiles, function(o) {
var tile = angular.element(o);
@@ -49,44 +64,33 @@
tile.addClass('sg-active');
}
});
- ensureInitRunsOnce();
}
- });
- toggleClass = function() {
- // Toggle class on click event and call toggle function
- var tile = angular.element(this),
- day = tile.attr('value');
- tile.toggleClass('sg-active');
- toggle(day);
- };
-
- for (i = 0; i < tiles.length; i++) {
- tile = angular.element(tiles[i]);
- tile.addClass('sg-icon-button');
- tile.find('figure').addClass('md-icon');
- tile.on('click', toggleClass);
- }
-
- function toggle(day) {
- var i = _.findIndex(modelDays, function(o) {
- if (modelAttr)
- return o[modelAttr] == day;
- else
- return o == day;
- });
- if (i < 0) {
- if (modelAttr) {
- var o = {};
- o[modelAttr] = day;
- modelDays.push(o);
+ function toggle(day) {
+ var i = _.findIndex(modelDays, function(o) {
+ if (modelAttr)
+ return o[modelAttr] == day;
+ else
+ return o == day;
+ });
+ if (i < 0) {
+ if (modelAttr) {
+ var o = {};
+ o[modelAttr] = day;
+ modelDays.push(o);
+ }
+ else
+ modelDays.push(day);
}
else
- modelDays.push(day);
+ modelDays.splice(i, 1);
+
+ scope.$apply(function() {
+ ngModelCtrl.$setViewValue(modelDays);
+ ngModelCtrl.$setDirty();
+ });
}
- else
- modelDays.splice(i, 1);
- }
+ };
}
}