(js) New sgToggleGrid directive
This directive allows to transform the tiles of a md-grid-list to toggle buttons.
This commit is contained in:
parent
9222bf80ef
commit
f6f704ddd8
93
UI/WebServerResources/js/Common/sgToggleGrid.directive.js
Normal file
93
UI/WebServerResources/js/Common/sgToggleGrid.directive.js
Normal file
|
@ -0,0 +1,93 @@
|
||||||
|
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 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:
|
||||||
|
|
||||||
|
<md-grid-list md-cols="7" md-row-height="1:1"
|
||||||
|
sg-toggle-grid="editor.event.repeat.days"
|
||||||
|
sg-toggle-grid-attr="day">..</md-grid-list>
|
||||||
|
*/
|
||||||
|
sgToggleGrid.$inject = ['$parse'];
|
||||||
|
function sgToggleGrid($parse) {
|
||||||
|
return {
|
||||||
|
restrict: 'A',
|
||||||
|
link: link
|
||||||
|
};
|
||||||
|
|
||||||
|
function link(scope, iElement, attrs, ctrl) {
|
||||||
|
var tiles = iElement.find('md-grid-tile'),
|
||||||
|
tile,
|
||||||
|
i,
|
||||||
|
modelDays,
|
||||||
|
modelAttr,
|
||||||
|
ensureInitRunsOnce;
|
||||||
|
|
||||||
|
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 = _.pluck(days, attrs.sgToggleGridAttr);
|
||||||
|
}
|
||||||
|
_.each(tiles, function(o) {
|
||||||
|
var tile = angular.element(o);
|
||||||
|
if (_.contains(flattenedDays, tile.attr('value'))) {
|
||||||
|
tile.addClass('sg-active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
ensureInitRunsOnce();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
for (i = 0; i < tiles.length; i++) {
|
||||||
|
tile = angular.element(tiles[i]);
|
||||||
|
tile.addClass('iconButton');
|
||||||
|
tile.find('figure').addClass('md-icon');
|
||||||
|
tile.on('click', 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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
angular
|
||||||
|
.module('SOGo.Common')
|
||||||
|
.directive('sgToggleGrid', sgToggleGrid);
|
||||||
|
})();
|
|
@ -1 +1,19 @@
|
||||||
@import "extends";
|
@import "extends";
|
||||||
|
|
||||||
|
// See sgToggleGrid directive
|
||||||
|
[sg-toggle-grid] {
|
||||||
|
md-grid-tile {
|
||||||
|
border-radius: 5%;
|
||||||
|
&.iconButton {
|
||||||
|
&:hover {
|
||||||
|
background-color: sg-color($sogoBlue, 600);
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.sg-active, &.sg-active:hover {
|
||||||
|
background-color: sg-color($sogoBlue, 300);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue