From 4cc31a62c00697b8be0d24b57bf2ff8f3b455269 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 1 Aug 2018 11:46:28 +0200
Subject: [PATCH] convert insertfeld overlay to an infinite editor

---
 .../src/common/services/editor.service.js     |  18 +
 .../insertfield/insertfield.controller.js     |  19 +-
 .../insertfield/insertfield.html              | 369 ++++++++++--------
 3 files changed, 236 insertions(+), 170 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
index 0bbfe34fe1..87c0e12514 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
@@ -249,6 +249,23 @@
             open(editor);
         }
 
+        /**
+         * @ngdoc method
+         * @name umbraco.services.editorService#insertField
+         * @methodOf umbraco.services.editorService
+         *
+         * @description
+         * Opens the insert field editor in infinite editing, the submit callback returns the code snippet
+         * @param {Callback} editor.submit Submits the editor
+         * @param {Callback} editor.close Closes the editor
+         * @returns {Object} editor object
+         */
+        function insertField(editor) {
+            editor.view = "views/common/infiniteeditors/insertfield/insertfield.html";
+            editor.size = "small";
+            open(editor);
+        }
+
         /**
          * @ngdoc method
          * @name umbraco.services.editorService#sectionPicker
@@ -283,6 +300,7 @@
             insertCodeSnippet: insertCodeSnippet,
             userGroupPicker: userGroupPicker,
             sectionPicker: sectionPicker,
+            insertField: insertField,
             userPicker: userPicker
         };
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertfield/insertfield.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertfield/insertfield.controller.js
index ebe2feabb9..db3e16f8b6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertfield/insertfield.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertfield/insertfield.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function InsertFieldController($scope, $http, contentTypeResource, localizationService) {
+    function InsertFieldController($scope, contentTypeResource, localizationService) {
         
         var vm = this;
 
@@ -29,6 +29,8 @@
         vm.setCasingOption = setCasingOption;
         vm.setEncodingOption = setEncodingOption;
         vm.generateOutputSample = generateOutputSample;
+        vm.submit = submit;
+        vm.close = close;
 
         function onInit() {
 
@@ -139,10 +141,21 @@
 
         }
 
-        onInit();
+        function submit(model) {
+            if($scope.model.submit) {
+                $scope.model.submit(model);
+            }
+        }
 
+        function close() {
+            if($scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
+        onInit();
 
     }
 
-    angular.module("umbraco").controller("Umbraco.Overlays.InsertFieldController", InsertFieldController);
+    angular.module("umbraco").controller("Umbraco.Editors.InsertFieldController", InsertFieldController);
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertfield/insertfield.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertfield/insertfield.html
index 3218b44dd8..56bd498fd1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertfield/insertfield.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertfield/insertfield.html
@@ -1,188 +1,223 @@
-<div ng-controller="Umbraco.Overlays.InsertFieldController as vm">
+<div ng-controller="Umbraco.Editors.InsertFieldController as vm">
 
-    <!-- select field -->
-    <div class="control-group umb-control-group -no-border">
-        <div class="umb-el-wrap">
-            <label class="control-label" for="chooseField"><localize key="templateEditor_chooseField">Choose field</localize></label>
-            <div class="controls">
-                <select ng-model="vm.field">
-                    <optgroup localize="label" label="@templateEditor_customFields">
-                        <option ng-repeat="(key, value) in vm.properties" value="{{value}}">{{value}}</option>
-                    </optgroup>
-                    <optgroup localize="label" label="@templateEditor_standardFields">
-                        <option ng-repeat="(key, value) in vm.standardFields" value="{{value}}">{{value}}</option>
-                    </optgroup>
-                </select>
-            </div>
-        </div>
-    </div>
+    <umb-editor-view>
 
-    <div class="advanced" style="position:relative">
-        
-        <!-- Overlay -->
-        <div class="hideAdvanced" style="position:absolute;height:100%;width:100%;background-color:white;opacity:.7;" ng-hide="vm.field"></div>
+        <umb-editor-header
+            name="model.title"
+            name-locked="true"
+            hide-alias="true"
+            hide-icon="true"
+            hide-description="true">
+        </umb-editor-header>
 
-        <!-- Fallback field -->
-        <div>
-            <i class="icon icon-add blue" ng-hide="vm.showAltField"></i>
-            <a href="" ng-click="vm.showAltField=true" ng-hide="vm.showAltField"><localize key="templateEditor_addFallbackField">Add fallback field</localize></a>
+        <umb-editor-container>
+            <umb-box>
+                <umb-box-content>
 
-            <div class="control-group umb-control-group -no-border" ng-hide="!vm.showAltField">
-                <div class="umb-el-wrap">
-                    <label class="control-label" for="altField"><localize key="templateEditor_fallbackField">Fallback field</localize></label>
-                    <div class="controls">
-                        <select ng-model="vm.altField" id="altField">
-                            <optgroup localize="label" label="@templateEditor_customFields">
-                                <option ng-repeat="(key, value) in vm.properties" value="{{value}}">{{value}}</option>
-                            </optgroup>
-                            <optgroup localize="label" label="@templateEditor_standardFields">
-                                <option ng-repeat="(key, value) in vm.standardFields" value="{{value}}">{{value}}</option>
-                            </optgroup>
-                        </select>
+                    <!-- select field -->
+                    <div class="control-group umb-control-group -no-border">
+                        <div class="umb-el-wrap">
+                            <label class="control-label" for="chooseField"><localize key="templateEditor_chooseField">Choose field</localize></label>
+                            <div class="controls">
+                                <select ng-model="vm.field">
+                                    <optgroup localize="label" label="@templateEditor_customFields">
+                                        <option ng-repeat="(key, value) in vm.properties" value="{{value}}">{{value}}</option>
+                                    </optgroup>
+                                    <optgroup localize="label" label="@templateEditor_standardFields">
+                                        <option ng-repeat="(key, value) in vm.standardFields" value="{{value}}">{{value}}</option>
+                                    </optgroup>
+                                </select>
+                            </div>
+                        </div>
                     </div>
-                </div>
-            </div>
-        </div>
-        </div>
 
-        <!-- Default value -->
-        <div>
-            <div style="margin-bottom: 20px;">
-                <i class="icon icon-add blue" ng-hide="vm.showAltText"></i>
-                <a href="" ng-click="vm.showAltText=true" ng-hide="vm.showAltText"><localize key="templateEditor_addDefaultValue">Add default value</localize></a>
-            </div>
+                    <div class="advanced" style="position:relative">
+                        
+                        <!-- Overlay -->
+                        <div class="hideAdvanced" style="position:absolute;height:100%;width:100%;background-color:white;opacity:.7;" ng-hide="vm.field"></div>
 
-            <div class="control-group umb-control-group -no-border" ng-hide="!vm.showAltText">
-                <div class="umb-el-wrap">
-                    <label class="control-label" for="altText"><localize key="templateEditor_defaultValue">Default value</localize></label>
-                    <div class="controls">
-                        <input type="text" id="altText" name="altText" ng-model="vm.altText" umb-auto-focus>
+                        <!-- Fallback field -->
+                        <div>
+                            <i class="icon icon-add blue" ng-hide="vm.showAltField"></i>
+                            <a href="" ng-click="vm.showAltField=true" ng-hide="vm.showAltField"><localize key="templateEditor_addFallbackField">Add fallback field</localize></a>
+
+                            <div class="control-group umb-control-group -no-border" ng-hide="!vm.showAltField">
+                                <div class="umb-el-wrap">
+                                    <label class="control-label" for="altField"><localize key="templateEditor_fallbackField">Fallback field</localize></label>
+                                    <div class="controls">
+                                        <select ng-model="vm.altField" id="altField">
+                                            <optgroup localize="label" label="@templateEditor_customFields">
+                                                <option ng-repeat="(key, value) in vm.properties" value="{{value}}">{{value}}</option>
+                                            </optgroup>
+                                            <optgroup localize="label" label="@templateEditor_standardFields">
+                                                <option ng-repeat="(key, value) in vm.standardFields" value="{{value}}">{{value}}</option>
+                                            </optgroup>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                </div>
-            </div>
-        </div>
 
-        <!-- Recursive -->
-        <div class="control-group umb-control-group">
-            <div class="umb-el-wrap">
-                <div class="controls">
-                    <label class="control-label" >
-                        <localize key="templateEditor_recursive">Recursive</localize>
-                    </label>
-                    <label for="recursive"> 
-                        <input id="recursive" type="checkbox" name="recursive" ng-model="vm.recursive">
-                        <localize key="templateEditor_recursiveDescr">Yes, make it recursive</localize>
-                    </label>
-                </div>
-            </div>
-        </div>
-
-        <h5><localize key="templateEditor_formatAndEncoding">Format and encoding</localize></h5>
-
-        <!-- Format as date -->
-        <div class="control-group umb-control-group">
-            <div class="umb-el-wrap">
-                <div class="controls">
+                    <!-- Default value -->
                     <div>
-                        <label class="control-label">
-                            <localize key="templateEditor_formatAsDate">Format as date</localize>
-                            <small><localize key="templateEditor_formatAsDateDescr">Format the value as a date, or a date with time, accoring to the active culture</localize>.</small>
-                        </label>
+                        <div style="margin-bottom: 20px;">
+                            <i class="icon icon-add blue" ng-hide="vm.showAltText"></i>
+                            <a href="" ng-click="vm.showAltText=true" ng-hide="vm.showAltText"><localize key="templateEditor_addDefaultValue">Add default value</localize></a>
+                        </div>
+
+                        <div class="control-group umb-control-group -no-border" ng-hide="!vm.showAltText">
+                            <div class="umb-el-wrap">
+                                <label class="control-label" for="altText"><localize key="templateEditor_defaultValue">Default value</localize></label>
+                                <div class="controls">
+                                    <input type="text" id="altText" name="altText" ng-model="vm.altText" umb-auto-focus>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <a href ng-click="vm.setDateOption('date')" class="btn"><i class="icon icon-check" ng-if="vm.date"></i> <localize key="templateEditor_dateOnly">Date only</localize></a>
-                    <a href ng-click="vm.setDateOption('dateWithTime')" class="btn"><i class="icon icon-check" ng-if="vm.dateTime"></i> <localize key="templateEditor_withTime">Date and time</localize></a>
-                    <input type="text" ng-model="vm.dateTimeSeparator" ng-hide="!vm.dateTime" localize="placeholder" placeholder="@templateEditor_separator">
-                </div>
-            </div>
-        </div>
 
-        <!-- Format casing -->
-        <div class="control-group umb-control-group">
-            <div class="umb-el-wrap">
-                <div class="controls">
-                    <div>
-                        <label class="control-label">
-                            <localize key="templateEditor_casing">Casing</localize>
-                        </label>
+                    <!-- Recursive -->
+                    <div class="control-group umb-control-group">
+                        <div class="umb-el-wrap">
+                            <div class="controls">
+                                <label class="control-label" >
+                                    <localize key="templateEditor_recursive">Recursive</localize>
+                                </label>
+                                <label for="recursive"> 
+                                    <input id="recursive" type="checkbox" name="recursive" ng-model="vm.recursive">
+                                    <localize key="templateEditor_recursiveDescr">Yes, make it recursive</localize>
+                                </label>
+                            </div>
+                        </div>
                     </div>
-                    <a href ng-click="vm.setCasingOption('uppercase')" class="btn" style="text-transform: uppercase;"><i class="icon icon-check" ng-if="vm.casingUpper"></i> <localize key="templateEditor_uppercase">Uppercase</localize></a>
-                    <a href ng-click="vm.setCasingOption('lowercase')" class="btn"style="text-transform: lowercase;"><i class="icon icon-check" ng-if="vm.casingLower"></i> <localize key="templateEditor_lowercase">Lowercase</localize></a>
-                </div>
-            </div>
-        </div>
 
-        <!-- Format encoding -->
-        <div class="control-group umb-control-group">
-            <div class="umb-el-wrap">
-                <div class="controls">
-                    <div>
-                        <label class="control-label">
-                            <localize key="templateEditor_encoding">Encoding</localize>
-                            <small><localize key="templateEditor_urlEncodeHelp">Will format special characters in URLs</localize></small>
-                        </label>
+                    <h5><localize key="templateEditor_formatAndEncoding">Format and encoding</localize></h5>
+
+                    <!-- Format as date -->
+                    <div class="control-group umb-control-group">
+                        <div class="umb-el-wrap">
+                            <div class="controls">
+                                <div>
+                                    <label class="control-label">
+                                        <localize key="templateEditor_formatAsDate">Format as date</localize>
+                                        <small><localize key="templateEditor_formatAsDateDescr">Format the value as a date, or a date with time, accoring to the active culture</localize>.</small>
+                                    </label>
+                                </div>
+                                <a href ng-click="vm.setDateOption('date')" class="btn"><i class="icon icon-check" ng-if="vm.date"></i> <localize key="templateEditor_dateOnly">Date only</localize></a>
+                                <a href ng-click="vm.setDateOption('dateWithTime')" class="btn"><i class="icon icon-check" ng-if="vm.dateTime"></i> <localize key="templateEditor_withTime">Date and time</localize></a>
+                                <input type="text" ng-model="vm.dateTimeSeparator" ng-hide="!vm.dateTime" localize="placeholder" placeholder="@templateEditor_separator">
+                            </div>
+                        </div>
                     </div>
-                    <a href ng-click="vm.setEncodingOption('html')" class="btn"><i class="icon icon-check" ng-if="vm.encodeHtml"></i> HTML</a>
-                    <a href ng-click="vm.setEncodingOption('url')" class="btn"><i class="icon icon-check" ng-if="vm.encodeUrl"></i> URL</a>
-                </div>
-            </div>
-        </div>
 
-        <h5><localize key="templateEditor_modifyOutput">Modify output</localize></h5>
-        
-        <!-- Insert Before -->
-        <div class="control-group umb-control-group -no-border ng-scope">
-            <div class="umb-el-wrap">
-                <label class="control-label" for="insertBefore">
-                    <localize key="templateEditor_preContent">Insert before field</localize>
-                    <small><localize key="templateEditor_insertedBefore">Will be inserted before the field value</localize></small>
-                </label>
-                <div class="controls">
-                    <input type="text" id="insertBefore" name="insertBefore" class="-full-width-input" ng-model="vm.insertBefore">
-                </div>
-            </div>
-        </div>
-
-        <!-- Insert after -->
-        <div class="control-group umb-control-group">
-            <div class="umb-el-wrap">
-                <label class="control-label" for="insertAfter">
-                    <localize key="templateEditor_postContent">Insert after field</localize>
-                    <small><localize key="templateEditor_insertedAfter">Will be inserted after the field value</localize></small>
-                </label>
-                <div class="controls">
-                    <input type="text" id="insertAfter" name="insertAfter" class="-full-width-input" ng-model="vm.insertAfter">
-                </div>
-            </div>
-        </div>
-
-        <!-- Line breaks -->
-        <div class="control-group umb-control-group">
-            <div class="umb-el-wrap">
-                <div class="controls">
-                    <div>
-                        <label class="control-label" for="linebreaks">
-                            <localize key="templateEditor_convertLineBreaks">Convert line breaks</localize>
-                            <small><localize key="templateEditor_convertLineBreaksHelp">Replaces line breaks with break html tag</localize></small>
-                        </label>
+                    <!-- Format casing -->
+                    <div class="control-group umb-control-group">
+                        <div class="umb-el-wrap">
+                            <div class="controls">
+                                <div>
+                                    <label class="control-label">
+                                        <localize key="templateEditor_casing">Casing</localize>
+                                    </label>
+                                </div>
+                                <a href ng-click="vm.setCasingOption('uppercase')" class="btn" style="text-transform: uppercase;"><i class="icon icon-check" ng-if="vm.casingUpper"></i> <localize key="templateEditor_uppercase">Uppercase</localize></a>
+                                <a href ng-click="vm.setCasingOption('lowercase')" class="btn"style="text-transform: lowercase;"><i class="icon icon-check" ng-if="vm.casingLower"></i> <localize key="templateEditor_lowercase">Lowercase</localize></a>
+                            </div>
+                        </div>
                     </div>
-                    <label for="linebreaks">
-                      <input type="checkbox" id="linebreaks" name="linebreaks" ng-model="vm.convertLinebreaks">
-                      <localize key="templateEditor_convertLineBreaksDescription">Yes, convert line breaks</localize>
-                    </label>
-                </div>
-            </div>
-        </div>
 
-        <!-- Output -->
-        <div class="control-group umb-control-group -no-border">
-            <div class="umb-el-wrap">
-                <div class="controls">
-                    <label class="control-label"><localize key="templateEditor_outputSample">Output sample</localize></label>
-                    <pre>{{ vm.generateOutputSample() }}</pre>
-                </div>
-            </div>
-        </div>
+                    <!-- Format encoding -->
+                    <div class="control-group umb-control-group">
+                        <div class="umb-el-wrap">
+                            <div class="controls">
+                                <div>
+                                    <label class="control-label">
+                                        <localize key="templateEditor_encoding">Encoding</localize>
+                                        <small><localize key="templateEditor_urlEncodeHelp">Will format special characters in URLs</localize></small>
+                                    </label>
+                                </div>
+                                <a href ng-click="vm.setEncodingOption('html')" class="btn"><i class="icon icon-check" ng-if="vm.encodeHtml"></i> HTML</a>
+                                <a href ng-click="vm.setEncodingOption('url')" class="btn"><i class="icon icon-check" ng-if="vm.encodeUrl"></i> URL</a>
+                            </div>
+                        </div>
+                    </div>
 
-    </div>
+                    <h5><localize key="templateEditor_modifyOutput">Modify output</localize></h5>
+                            
+                    <!-- Insert Before -->
+                    <div class="control-group umb-control-group -no-border ng-scope">
+                        <div class="umb-el-wrap">
+                            <label class="control-label" for="insertBefore">
+                                <localize key="templateEditor_preContent">Insert before field</localize>
+                                <small><localize key="templateEditor_insertedBefore">Will be inserted before the field value</localize></small>
+                            </label>
+                            <div class="controls">
+                                <input type="text" id="insertBefore" name="insertBefore" class="-full-width-input" ng-model="vm.insertBefore">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Insert after -->
+                    <div class="control-group umb-control-group">
+                        <div class="umb-el-wrap">
+                            <label class="control-label" for="insertAfter">
+                                <localize key="templateEditor_postContent">Insert after field</localize>
+                                <small><localize key="templateEditor_insertedAfter">Will be inserted after the field value</localize></small>
+                            </label>
+                            <div class="controls">
+                                <input type="text" id="insertAfter" name="insertAfter" class="-full-width-input" ng-model="vm.insertAfter">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Line breaks -->
+                    <div class="control-group umb-control-group">
+                        <div class="umb-el-wrap">
+                            <div class="controls">
+                                <div>
+                                    <label class="control-label" for="linebreaks">
+                                        <localize key="templateEditor_convertLineBreaks">Convert line breaks</localize>
+                                        <small><localize key="templateEditor_convertLineBreaksHelp">Replaces line breaks with break html tag</localize></small>
+                                    </label>
+                                </div>
+                                <label for="linebreaks">
+                                <input type="checkbox" id="linebreaks" name="linebreaks" ng-model="vm.convertLinebreaks">
+                                <localize key="templateEditor_convertLineBreaksDescription">Yes, convert line breaks</localize>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Output -->
+                    <div class="control-group umb-control-group -no-border">
+                        <div class="umb-el-wrap">
+                            <div class="controls">
+                                <label class="control-label"><localize key="templateEditor_outputSample">Output sample</localize></label>
+                                <pre>{{ vm.generateOutputSample() }}</pre>
+                            </div>
+                        </div>
+                    </div>
+
+                </umb-box-content>
+            </umb-box>
+        </umb-editor-container>
+
+        <umb-editor-footer>
+            <umb-editor-footer-content-right>
+                <umb-button
+                    type="button"
+                    button-style="link"
+                    label-key="general_close"
+                    action="vm.close()">
+                </umb-button>
+                <umb-button
+                    type="button"
+                    button-style="success"
+                    label-key="general_submit"
+                    action="vm.submit(model)">
+                </umb-button>
+            </umb-editor-footer-content-right>
+        </umb-editor-footer>
+
+    </umb-editor-view>
 
 </div>