make it easier to use itempicker and iconpicker - use submit method to submit instead of custom method - add overlay option to hide submit button. Clean up code by removing close method.

2015-12-14 13:09:55 +01:00
parent a08566c04c
commit 7d31bc9d35
13 changed files with 132 additions and 159 deletions
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
@@ -6,32 +6,20 @@
      function link(scope, el, attr, ctrl) {

         scope.openIconPicker = function() {
-
-            scope.dialogModel = {};
-            scope.dialogModel.title = "Choose icon";
-            scope.dialogModel.view = "iconPicker";
-            scope.showDialog = true;
-
-            scope.dialogModel.pickIcon = function(icon, color) {
-
-               if (color) {
-                  scope.icon = icon + " " + color;
-               } else {
-                  scope.icon = icon;
-               }
-
-               scope.showDialog = false;
-               scope.dialogModel = null;
-
+            scope.dialogModel = {
+                view: "iconpicker",
+                show: true,
+                submit: function(model) {
+                    if (model.color) {
+                       scope.icon = model.icon + " " + model.color;
+                    } else {
+                       scope.icon = model.icon;
+                    }
+                    scope.dialogModel.show = false;
+                    scope.dialogModel = null;
+                }
            };
-
-            scope.dialogModel.close = function() {
-               scope.showDialog = false;
-               scope.dialogModel = null;
-            };
-
         };
-
      }

      var directive = {
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js
@@ -33,32 +33,25 @@
            };

            scope.openItemPicker = function($event){
-                scope.dialogModel = {};
-                scope.dialogModel.title = "Choose " + scope.itemLabel;
-                scope.dialogModel.availableItems = scope.availableItems;
-                scope.dialogModel.selectedItems = scope.selectedItems;
-                scope.dialogModel.event = $event;
-                scope.dialogModel.view = "itemPicker";
-                scope.showDialog = true;
+                scope.dialogModel = {
+                    view: "itempicker",
+                    title: "Choose " + scope.itemLabel,
+                    availableItems: scope.availableItems,
+                    selectedItems: scope.selectedItems,
+                    event: $event,
+                    show: true,
+                    submit: function(model) {
+                        scope.selectedItems.push(model.selectedItem);

-                scope.dialogModel.chooseItem = function(selectedItem) {
+                        // if no default item - set item as default
+                        if(scope.defaultItem === null) {
+                            scope.setAsDefaultItem(model.selectedItem);
+                        }

-                    scope.selectedItems.push(selectedItem);
-
-                    // if no default item - set item as default
-                    if(scope.defaultItem === null) {
-                        scope.setAsDefaultItem(selectedItem);
+                        scope.dialogModel.show = false;
+                        scope.dialogModel = null;
                    }
-
-                    scope.showDialog = false;
-                    scope.dialogModel = null;
                };
-
-                scope.dialogModel.close = function(){
-                    scope.showDialog = false;
-                    scope.dialogModel = null;
-                };
-
            };

            scope.setAsDefaultItem = function(selectedItem) {
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.controller.js
@@ -9,12 +9,23 @@
 function IconPickerOverlay($scope, iconHelper) {

   $scope.loading = true;
+   $scope.model.hideSubmitButton = true;
+
+   if(!$scope.model.title) {
+       $scope.model.title = "Select an icon";
+   }

   iconHelper.getIcons().then(function(icons) {
      $scope.icons = icons;
      $scope.loading = false;
   });

+   $scope.selectIcon = function(icon, color) {
+       $scope.model.icon = icon;
+       $scope.model.color = color;
+       $scope.submitForm($scope.model);
+   };
+
 }

 angular.module("umbraco").controller("Umbraco.Overlays.IconPickerOverlay", IconPickerOverlay);
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
@@ -28,7 +28,7 @@
    <div class="umb-control-group" ng-show="!loading">
        <ul class="umb-thumbnails thumbnails" ng-class="color">
            <li class="span1" ng-repeat="icon in icons|filter: searchTerm">
-                <a href="#" title="{{icon}}" class="thumbnail" ng-click="model.pickIcon(icon, color)" prevent-default>
+                <a href="#" title="{{icon}}" class="thumbnail" ng-click="selectIcon(icon, color)" prevent-default>
                    <i class="{{icon}} large" style="font-size: 32px"></i>
                </a>
            </li>
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.controller.js
@@ -0,0 +1,12 @@
+function ItemPickerOverlay($scope) {
+
+   $scope.model.hideSubmitButton = true;
+
+   $scope.selectItem = function(item) {
+       $scope.model.selectedItem = item;
+       $scope.submitForm($scope.model);
+   };
+
+}
+
+angular.module("umbraco").controller("Umbraco.Overlays.ItemPickerOverlay", ItemPickerOverlay);
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
@@ -1,18 +1,22 @@
-<div class="form-search" ng-hide="model.filter === false">
-  <i class="icon-search"></i>
-  <input type="text"
-    style="width: 100%"
-    ng-model="searchTerm"
-    class="umb-search-field search-query input-block-level"
-    placeholder="Filter..."
-    umb-auto-focus />
-</div>
+<div ng-controller="Umbraco.Overlays.ItemPickerOverlay">

-<ul class="umb-card-grid">
-  <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:'name' | filter:searchTerm">
-    <a href="" ng-click="model.chooseItem(availableItem)">
-        <i class="{{ availableItem.icon }}"></i>
-        {{ availableItem.name }}
-    </a>
-  </li>
-</ul>
+    <div class="form-search" ng-hide="model.filter === false">
+      <i class="icon-search"></i>
+      <input type="text"
+        style="width: 100%"
+        ng-model="searchTerm"
+        class="umb-search-field search-query input-block-level"
+        placeholder="Filter..."
+        umb-auto-focus />
+    </div>
+
+    <ul class="umb-card-grid">
+      <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:'name' | filter:searchTerm">
+        <a href="" ng-click="selectItem(availableItem)">
+            <i class="{{ availableItem.icon }}"></i>
+            {{ availableItem.name }}
+        </a>
+      </li>
+    </ul>
+
+</div>
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
@@ -44,7 +44,7 @@
    </div>

    <umb-overlay
-      ng-if="showDialog"
+      ng-if="dialogModel.show"
      model="dialogModel"
      position="right"
      view="dialogModel.view">
--- a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
@@ -24,7 +24,7 @@
        <div class="umb-overlay-drawer">
            <div class="umb-overlay-drawer-content">
                <umb-button action="closeOverLay()" button-style="link" label-key="{{model.closeButtonLabelKey}}" label="{{model.closeButtonLabel}}" type="button"></umb-button>
-                <umb-button button-style="success" label-key="{{model.submitButtonLabelKey}}" label="{{model.submitButtonLabel}}" ng-if="model.submit" type="submit"></umb-button>
+                <umb-button button-style="success" label-key="{{model.submitButtonLabelKey}}" label="{{model.submitButtonLabel}}" ng-if="model.submit && model.hideSubmitButton !== true" type="submit"></umb-button>
            </div>
        </div>
    </form>
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html
@@ -34,12 +34,10 @@
    </div>

    <umb-overlay
-            ng-style=""
-            ng-if="showDialog"
-            model="dialogModel"
-            animation="slide-in-right"
-            position="target"
-            view="dialogModel.view">
+        ng-if="dialogModel.show"
+        model="dialogModel"
+        position="target"
+        view="dialogModel.view">
    </umb-overlay>

 </div>
--- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js
@@ -45,29 +45,20 @@
        }

        function addChild($event) {
-           vm.childNodeSelectorOverlay = {};
-           vm.childNodeSelectorOverlay.view = "itempicker";
-           vm.childNodeSelectorOverlay.title = "Choose child node";
-           vm.childNodeSelectorOverlay.availableItems = vm.contentTypes;
-           vm.childNodeSelectorOverlay.selectedItems = vm.selectedChildren;
-           vm.childNodeSelectorOverlay.event = $event;
-           vm.childNodeSelectorOverlay.show = true;
-
-           vm.childNodeSelectorOverlay.chooseItem = function(item) {
-
-             vm.selectedChildren.push(item);
-             $scope.model.allowedContentTypes.push(item.id);
-
-             vm.childNodeSelectorOverlay.show = false;
-             vm.childNodeSelectorOverlay = null;
-
-           };
-
-           vm.childNodeSelectorOverlay.close = function(oldModel) {
-             vm.childNodeSelectorOverlay.show = false;
-             vm.childNodeSelectorOverlay = null;
-           };
-
+            vm.childNodeSelectorOverlay = {
+                view: "itempicker",
+                title: "Choose child node",
+                availableItems: vm.contentTypes,
+                selectedItems: vm.selectedChildren,
+                event: $event,
+                show: true,
+                submit: function(model) {
+                    vm.selectedChildren.push(model.selectedItem);
+                    $scope.model.allowedContentTypes.push(model.selectedItem.id);
+                    vm.childNodeSelectorOverlay.show = false;
+                    vm.childNodeSelectorOverlay = null;
+                }
+            };
        }

        function removeChild(selectedChild, index) {
--- a/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js
@@ -37,29 +37,20 @@
        }

        function addChild($event) {
-           vm.childNodeSelectorOverlay = {};
-           vm.childNodeSelectorOverlay.view = "itempicker";
-           vm.childNodeSelectorOverlay.title = "Choose child node";
-           vm.childNodeSelectorOverlay.availableItems = vm.mediaTypes;
-           vm.childNodeSelectorOverlay.selectedItems = vm.selectedChildren;
-           vm.childNodeSelectorOverlay.event = $event;
-           vm.childNodeSelectorOverlay.show = true;
-
-           vm.childNodeSelectorOverlay.chooseItem = function(item) {
-
-             vm.selectedChildren.push(item);
-             $scope.model.allowedContentTypes.push(item.id);
-
-             vm.childNodeSelectorOverlay.show = false;
-             vm.childNodeSelectorOverlay = null;
-
-           };
-
-           vm.childNodeSelectorOverlay.close = function(oldModel) {
-             vm.childNodeSelectorOverlay.show = false;
-             vm.childNodeSelectorOverlay = null;
-           };
-
+            vm.childNodeSelectorOverlay = {
+                view: "itempicker",
+                title: "Choose child node",
+                availableItems: vm.mediaTypes,
+                selectedItems: vm.selectedChildren,
+                event: $event,
+                show: true,
+                submit: function(model) {
+                    vm.selectedChildren.push(model.selectedItem);
+                    $scope.model.allowedContentTypes.push(model.selectedItem.id);
+                    vm.childNodeSelectorOverlay.show = false;
+                    vm.childNodeSelectorOverlay = null;
+                }
+            };
        }

        function removeChild(selectedChild, index) {
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -228,26 +228,19 @@ angular.module("umbraco")
        // Add items overlay menu
        // *********************************************
       $scope.openEditorOverlay = function(event, area, index, key) {
-
-          $scope.editorOverlay = {};
-          $scope.editorOverlay.view = "itempicker";
-          $scope.editorOverlay.filter = false;
-          $scope.editorOverlay.title = localizationService.localize("grid_insertControl").then(function (value) {return value;});
-          $scope.editorOverlay.availableItems = area.$allowedEditors;
-          $scope.editorOverlay.event = event;
-          $scope.editorOverlay.show = true;
-
-          $scope.editorOverlay.chooseItem = function(item) {
-             $scope.addControl(item, area, index);
-             $scope.editorOverlay.show = false;
-             $scope.editorOverlay = null;
+          $scope.editorOverlay = {
+              view: "itempicker",
+              filter: false,
+              title: localizationService.localize("grid_insertControl").then(function (value) {return value;}),
+              availableItems: area.$allowedEditors,
+              event: event,
+              show: true,
+              submit: function(model) {
+                  $scope.addControl(model.selectedItem, area, index);
+                  $scope.editorOverlay.show = false;
+                  $scope.editorOverlay = null;
+              }
          };
-
-          $scope.editorOverlay.close = function(oldModel) {
-             $scope.editorOverlay.show = false;
-             $scope.editorOverlay = null;
-          };
-
       };

        // *********************************************
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js
@@ -53,28 +53,20 @@
      }

      function openIconPicker(layout) {
-
-         vm.iconPickerDialog = {};
-         vm.iconPickerDialog.view = "iconpicker";
-         vm.iconPickerDialog.show = true;
-
-         vm.iconPickerDialog.pickIcon = function(icon, color) {
-
-            layout.icon = icon;
-            vm.focusLayoutName = true;
-
-            vm.iconPickerDialog.show = false;
-            vm.iconPickerDialog = null;
-         };
-
-
-         vm.iconPickerDialog.close = function(oldModel) {
-
-            vm.iconPickerDialog.show = false;
-            vm.iconPickerDialog = null;
-         };
-
-
+          vm.iconPickerDialog = {
+              view: "iconpicker",
+              show: true,
+              submit: function(model) {
+                  if (model.color) {
+                     layout.icon = model.icon + " " + model.color;
+                  } else {
+                     layout.icon = model.icon;
+                  }
+                  vm.focusLayoutName = true;
+                  vm.iconPickerDialog.show = false;
+                  vm.iconPickerDialog = null;
+              }
+          };
      }

      activate();