}
#afGuiEditor af-gui-markup,
-#afGuiEditor af-gui-field {
+#afGuiEditor af-gui-field,
+#afGuiEditor af-gui-edit-options {
display: block;
}
/* grip handle */
#afGuiEditor [ui-sortable] .af-gui-bar:before,
#afGuiEditor .af-gui-entity-palette-select-list [ui-sortable] > div:not(.disabled):hover:before,
-#afGuiEditor [af-gui-edit-options] [ui-sortable] li:before {
+#afGuiEditor af-gui-edit-options.af-gui-content-editing-area [ui-sortable] li:before {
background-size: cover;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjODg4Ij48L3JlY3Q+Cjwvc3ZnPg==");
width: 10px;
position: relative;
}
-#afGuiEditor [af-gui-edit-options] {
+#afGuiEditor af-gui-edit-options.af-gui-content-editing-area {
border: 2px solid #0071bd;
}
top: 0;
right: 0;
}
-#afGuiEditor [af-gui-edit-options] ul[ui-sortable] {
+#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] {
padding: 5px 20px 0;
}
-#afGuiEditor [af-gui-edit-options] ul[ui-sortable] li {
+#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li {
list-style: none;
padding-left: 15px;
position: relative;
background-color:#e7ecf1;
cursor: move;
}
-#afGuiEditor [af-gui-edit-options] ul[ui-sortable] li:nth-child(even) {
+#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li:nth-child(even) {
background-color:#f2f2f2;
}
-#afGuiEditor [af-gui-edit-options] ul[ui-sortable] li > div {
+#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li > div {
width: calc(100% - 30px);
display: inline-block;
}
-#afGuiEditor [af-gui-edit-options] ul.af-gui-edit-options-deleted li > div {
+#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul.af-gui-edit-options-deleted li > div {
text-decoration: line-through;
}
-#afGuiEditor [af-gui-edit-options] ul[ui-sortable] li .btn-xs {
+#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li .btn-xs {
border: 0 none;
}
-#afGuiEditor [af-gui-edit-options] h5 {
+#afGuiEditor af-gui-edit-options.af-gui-content-editing-area h5 {
margin-left: 20px;
}
});
});
- angular.module('afGuiEditor').controller('afGuiSaveBlock', function($scope, crmApi4, dialogService) {
- var ts = $scope.ts = CRM.ts(),
- model = $scope.model,
- original = $scope.original = {
- title: model.title,
- name: model.name
- };
- if (model.name) {
- $scope.$watch('model.name', function(val, oldVal) {
- if (!val && model.title === original.title) {
- model.title += ' ' + ts('(copy)');
- }
- else if (val === original.name && val !== oldVal) {
- model.title = original.title;
- }
- });
- }
- $scope.cancel = function() {
- dialogService.cancel('saveBlockDialog');
- };
- $scope.save = function() {
- $('.ui-dialog:visible').block();
- crmApi4('Afform', 'save', {formatWhitespace: true, records: [JSON.parse(angular.toJson(model))]})
- .then(function(result) {
- dialogService.close('saveBlockDialog', result[0]);
- });
- };
- });
-
- angular.module('afGuiEditor').directive('afGuiEditOptions', function() {
- return {
- restrict: 'A',
- templateUrl: '~/afGuiEditor/editOptions.html',
- scope: true,
- require: '^^afGuiField',
- link: function ($scope, element, attrs, afGuiField) {
- $scope.field = afGuiField;
- $scope.options = JSON.parse(angular.toJson(afGuiField.getOptions()));
- var optionKeys = _.map($scope.options, 'key');
- $scope.deletedOptions = _.filter(JSON.parse(angular.toJson(afGuiField.getDefn().options || [])), function(item) {
- return !_.contains(optionKeys, item.key);
- });
- $scope.originalLabels = _.transform(afGuiField.getDefn().options || [], function(originalLabels, item) {
- originalLabels[item.key] = item.label;
- }, {});
- },
- controller: function ($scope) {
- var ts = $scope.ts = CRM.ts();
-
- $scope.deleteOption = function(option, $index) {
- $scope.options.splice($index, 1);
- $scope.deletedOptions.push(option);
- };
-
- $scope.restoreOption = function(option, $index) {
- $scope.deletedOptions.splice($index, 1);
- $scope.options.push(option);
- };
-
- $scope.save = function() {
- $scope.field.getSet('options', JSON.parse(angular.toJson($scope.options)));
- $scope.close();
- };
-
- $scope.close = function() {
- $scope.field.setEditingOptions(false);
- $('#afGuiEditor').removeClass('af-gui-editing-content');
- };
- }
- };
- });
-
// Connect bootstrap dropdown.js with angular
// Allows menu content to be conditionally rendered only if open
// This gives a large performance boost for a page with lots of menus
};
});
- // Menu item to control the border property of a node
- angular.module('afGuiEditor').directive('afGuiMenuItemBorder', function(afAdmin) {
- return {
- restrict: 'A',
- templateUrl: '~/afGuiEditor/menu-item-border.html',
- scope: {
- node: '=afGuiMenuItemBorder'
- },
- link: function($scope, element, attrs) {
- var ts = $scope.ts = CRM.ts();
-
- $scope.getSetBorderWidth = function(width) {
- return getSetBorderProp($scope.node, 0, arguments.length ? width : null);
- };
-
- $scope.getSetBorderStyle = function(style) {
- return getSetBorderProp($scope.node, 1, arguments.length ? style : null);
- };
-
- $scope.getSetBorderColor = function(color) {
- return getSetBorderProp($scope.node, 2, arguments.length ? color : null);
- };
-
- function getSetBorderProp(node, idx, val) {
- var border = getBorder(node) || ['1px', '', '#000000'];
- if (val === null) {
- return border[idx];
- }
- border[idx] = val;
- afAdmin.setStyle(node, 'border', val ? border.join(' ') : null);
- }
-
- function getBorder(node) {
- var border = _.map((afAdmin.getStyles(node).border || '').split(' '), _.trim);
- return border.length > 2 ? border : null;
- }
- }
- };
- });
-
- // Menu item to control the background property of a node
- angular.module('afGuiEditor').directive('afGuiMenuItemBackground', function(afAdmin) {
- return {
- restrict: 'A',
- templateUrl: '~/afGuiEditor/menu-item-background.html',
- scope: {
- node: '=afGuiMenuItemBackground'
- },
- link: function($scope, element, attrs) {
- var ts = $scope.ts = CRM.ts();
-
- $scope.getSetBackgroundColor = function(color) {
- if (!arguments.length) {
- return afAdmin.getStyles($scope.node)['background-color'] || '#ffffff';
- }
- afAdmin.setStyle($scope.node, 'background-color', color);
- };
- }
- };
- });
-
})(angular, CRM.$, CRM._);
--- /dev/null
+// https://civicrm.org/licensing
+(function(angular, $, _) {
+ "use strict";
+
+ angular.module('afGuiEditor').component('afGuiEditOptions', {
+ templateUrl: '~/afGuiEditor/afGuiEditOptions.html',
+ require: {field: '^^afGuiField'},
+ controller: function($scope) {
+ var ts = $scope.ts = CRM.ts(),
+ ctrl = this;
+
+ this.$onInit = function() {
+ $scope.options = JSON.parse(angular.toJson(ctrl.field.getOptions()));
+ var optionKeys = _.map($scope.options, 'key');
+ $scope.deletedOptions = _.filter(JSON.parse(angular.toJson(ctrl.field.getDefn().options || [])), function (item) {
+ return !_.contains(optionKeys, item.key);
+ });
+ $scope.originalLabels = _.transform(ctrl.field.getDefn().options || [], function (originalLabels, item) {
+ originalLabels[item.key] = item.label;
+ }, {});
+ };
+
+ $scope.deleteOption = function(option, $index) {
+ $scope.options.splice($index, 1);
+ $scope.deletedOptions.push(option);
+ };
+
+ $scope.restoreOption = function(option, $index) {
+ $scope.deletedOptions.splice($index, 1);
+ $scope.options.push(option);
+ };
+
+ $scope.save = function() {
+ ctrl.field.getSet('options', JSON.parse(angular.toJson($scope.options)));
+ $scope.close();
+ };
+
+ $scope.close = function() {
+ ctrl.field.setEditingOptions(false);
+ $('#afGuiEditor').removeClass('af-gui-editing-content');
+ };
+ }
+ });
+
+})(angular, CRM.$, CRM._);
--- /dev/null
+// https://civicrm.org/licensing
+(function(angular, $, _) {
+ "use strict";
+
+ // Menu item to control the background property of a node
+ angular.module('afGuiEditor').component('afGuiMenuItemBackground', {
+ templateUrl: '~/afGuiEditor/afGuiMenuItemBackground.html',
+ bindings: {
+ node: '='
+ },
+ controller: function($scope, afAdmin) {
+ var ts = $scope.ts = CRM.ts(),
+ ctrl = this;
+
+ $scope.getSetBackgroundColor = function(color) {
+ if (!arguments.length) {
+ return afAdmin.getStyles(ctrl.node)['background-color'] || '#ffffff';
+ }
+ afAdmin.setStyle(ctrl.node, 'background-color', color);
+ };
+ }
+ });
+
+})(angular, CRM.$, CRM._);
<div class="af-gui-field-select-in-dropdown form-inline" ng-click="$event.stopPropagation()">
<label>{{:: ts('Background:') }}</label>
- <input type="color" class="form-control" ng-model="getSetBackgroundColor" ng-model-options="{getterSetter: true}"/>
- <a href class="" ng-click="getSetBackgroundColor(null)" ng-if="container.getStyles(node)['background-color']">
+ <input type="color" class="form-control" ng-model="getSetBackgroundColor" ng-model-options="{getterSetter: true}">
+ <a href class="" ng-click="getSetBackgroundColor(null)" ng-if="container.getStyles($ctrl.node)['background-color']">
<i class="crm-i fa-times"></i>
</a>
</div>
--- /dev/null
+// https://civicrm.org/licensing
+(function(angular, $, _) {
+ "use strict";
+
+ // Menu item to control the border property of a node
+ angular.module('afGuiEditor').component('afGuiMenuItemBorder', {
+ templateUrl: '~/afGuiEditor/afGuiMenuItemBorder.html',
+ bindings: {
+ node: '='
+ },
+ controller: function($scope, afAdmin) {
+ var ts = $scope.ts = CRM.ts(),
+ ctrl = this;
+
+ $scope.getSetBorderWidth = function(width) {
+ return getSetBorderProp(ctrl.node, 0, arguments.length ? width : null);
+ };
+
+ $scope.getSetBorderStyle = function(style) {
+ return getSetBorderProp(ctrl.node, 1, arguments.length ? style : null);
+ };
+
+ $scope.getSetBorderColor = function(color) {
+ return getSetBorderProp(ctrl.node, 2, arguments.length ? color : null);
+ };
+
+ function getSetBorderProp(node, idx, val) {
+ var border = getBorder(node) || ['1px', '', '#000000'];
+ if (val === null) {
+ return border[idx];
+ }
+ border[idx] = val;
+ afAdmin.setStyle(node, 'border', val ? border.join(' ') : null);
+ }
+
+ function getBorder(node) {
+ var border = _.map((afAdmin.getStyles(node).border || '').split(' '), _.trim);
+ return border.length > 2 ? border : null;
+ }
+ }
+ });
+
+})(angular, CRM.$, CRM._);
--- /dev/null
+// https://civicrm.org/licensing
+(function(angular, $, _) {
+ "use strict";
+
+ angular.module('afGuiEditor').controller('afGuiSaveBlock', function($scope, crmApi4, dialogService) {
+ var ts = $scope.ts = CRM.ts(),
+ model = $scope.model,
+ original = $scope.original = {
+ title: model.title,
+ name: model.name
+ };
+ if (model.name) {
+ $scope.$watch('model.name', function(val, oldVal) {
+ if (!val && model.title === original.title) {
+ model.title += ' ' + ts('(copy)');
+ }
+ else if (val === original.name && val !== oldVal) {
+ model.title = original.title;
+ }
+ });
+ }
+ $scope.cancel = function() {
+ dialogService.cancel('saveBlockDialog');
+ };
+ $scope.save = function() {
+ $('.ui-dialog:visible').block();
+ crmApi4('Afform', 'save', {formatWhitespace: true, records: [JSON.parse(angular.toJson(model))]})
+ .then(function(result) {
+ dialogService.close('saveBlockDialog', result[0]);
+ });
+ };
+ });
+
+})(angular, CRM.$, CRM._);
</div>
</div>
</li>
-<li af-gui-menu-item-border="$ctrl.node"></li>
-<li af-gui-menu-item-background="$ctrl.node"></li>
+<li><af-gui-menu-item-border node="$ctrl.node"></af-gui-menu-item-border></li>
+<li><af-gui-menu-item-background node="$ctrl.node"></af-gui-menu-item-background></li>
<li role="separator" class="divider"></li>
<li><a href ng-click="$ctrl.deleteThis()"><span class="text-danger">{{ !block ? ts('Delete this container') : ts('Delete this block') }}</span></a></li>
-<div af-gui-edit-options ng-if="editingOptions" class="af-gui-content-editing-area"></div>
+<af-gui-edit-options ng-if="editingOptions" class="af-gui-content-editing-area"></af-gui-edit-options>
<div ng-if="!editingOptions" class="af-gui-element af-gui-field" >
<div class="af-gui-bar" title="{{ getEntity().label + ': ' + getDefn().label }}">
<div class="form-inline pull-right">
<a href ng-click="edit()">{{:: ts('Edit content') }}</a>
</li>
<li role="separator" class="divider"></li>
-<li af-gui-menu-item-border="$ctrl.node"></li>
-<li af-gui-menu-item-background="$ctrl.node"></li>
+<li><af-gui-menu-item-border node="$ctrl.node"></af-gui-menu-item-border></li>
+<li><af-gui-menu-item-background node="$ctrl.node"></af-gui-menu-item-background></li>
<li role="separator" class="divider"></li>
<li>
<a href ng-click="$ctrl.deleteThis()"><span class="text-danger">{{:: ts('Delete this content') }}</span></a>
projects / civicrm-core.git / commitdiff