ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBorder.component.js

   1 // https://civicrm.org/licensing
   2 (function(angular, $, _) {
   3   "use strict";
   4
   5   // Menu item to control the border property of a node
   6   angular.module('afGuiEditor').component('afGuiMenuItemBorder', {
   7     templateUrl: '~/afGuiEditor/afGuiMenuItemBorder.html',
   8     bindings: {
   9       node: '='
  10     },
  11     controller: function($scope, afGui) {
  12       var ts = $scope.ts = CRM.ts(),
  13         ctrl = this;
  14
  15       $scope.getSetBorderWidth = function(width) {
  16         return getSetBorderProp(ctrl.node, 0, arguments.length ? width : null);
  17       };
  18
  19       $scope.getSetBorderStyle = function(style) {
  20         return getSetBorderProp(ctrl.node, 1, arguments.length ? style : null);
  21       };
  22
  23       $scope.getSetBorderColor = function(color) {
  24         return getSetBorderProp(ctrl.node, 2, arguments.length ? color : null);
  25       };
  26
  27       function getSetBorderProp(node, idx, val) {
  28         var border = getBorder(node) || ['1px', '', '#000000'];
  29         if (val === null) {
  30           return border[idx];
  31         }
  32         border[idx] = val;
  33         afGui.setStyle(node, 'border', val ? border.join(' ') : null);
  34       }
  35
  36       function getBorder(node) {
  37         var border = _.map((afGui.getStyles(node).border || '').split(' '), _.trim);
  38         return border.length > 2 ? border : null;
  39       }
  40     }
  41   });
  42
  43 })(angular, CRM.$, CRM._);