Add page field overlay

src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.controller.js

@@ -0,0 +1,176 @@
+(function () {
+    "use strict";
+
+    function InsertFieldController ($scope, $http, contentTypeResource) {
+      var vm = this;
+
+      vm.field;
+      vm.altField;
+      vm.altText;
+      vm.insertPreviewTitle = "Modify output";
+      vm.insertBefore;
+      vm.insertAfter;
+      vm.recursive = false;
+      vm.properties;
+      vm.date = false;
+      vm.dateTime = false;
+      vm.dateTimeSeparator = "";
+      vm.casingUpper = false;
+      vm.casingLower = false;
+      vm.encodeHtml = false;
+      vm.encodeUrl = false;
+      vm.convertLinebreaks = false;
+
+      vm.showAltField = false;
+      vm.showAltText = false;
+
+      vm.showInsertPreview = showInsertPreview;
+      vm.updateInsertPreview = updateInsertPreview;
+      vm.hideInsertPreview = hideInsertPreview;
+      vm.updateDate = updateDate;
+      vm.updateDateTime = updateDateTime;
+      vm.updateUpper = updateUpper;
+      vm.updateLower = updateLower;
+      vm.updateEncodeHtml = updateEncodeHtml;
+      vm.updateEncodeUrl = updateEncodeUrl;
+
+      contentTypeResource.getAllPropertyTypeAliases().then(function(array) {
+        vm.properties = array;
+      });
+
+      //hide preview by default
+      function hideInsertPreview () {
+        $scope.model.itemDetails = null;
+      }
+
+      //Create preview
+      function showInsertPreview () {
+        var previewDetails = {};
+
+        previewDetails.title = vm.insertPreviewTitle;
+
+        if (!vm.insertBefore && !vm.insertAfter) {
+            previewDetails.description = $scope.model.umbracoField
+        } else if (!vm.insertAfter) {
+            previewDetails.description = vm.insertBefore + ' ' + $scope.model.umbracoField;
+        } else {
+          previewDetails.description = vm.insertBefore + ' ' + $scope.model.umbracoField + ' ' + vm.insertAfter;
+        }
+        $scope.model.itemDetails = previewDetails;
+      }
+
+      //Update preview
+      function updateInsertPreview () {
+        var previewDetails = $scope.model.itemDetails;
+
+        previewDetails.title = vm.insertPreviewTitle;
+
+        if (!vm.insertBefore && !vm.insertAfter) {
+            previewDetails.description = ' ' + $scope.model.umbracoField;
+        } else if (!vm.insertAfter) {
+            previewDetails.description = vm.insertBefore + ' ' + $scope.model.umbracoField;
+        } else {
+          previewDetails.description = vm.insertBefore + ' ' + $scope.model.umbracoField + ' ' + vm.insertAfter;
+        }
+
+        $scope.model.itemDetails = previewDetails;
+      }
+
+      // date formatting
+      function updateDate () {
+        if (vm.date) {
+          vm.date = false;
+          return;
+        }else {
+          vm.date = true;
+          if (vm.dateTime) {
+            vm.dateTime = false;
+          }
+        }
+      }
+
+      function updateDateTime () {
+        if (vm.dateTime) {
+          vm.dateTime = false
+        } else {
+          vm.dateTime = true;
+          if (vm.date) {
+            vm.date = false;
+          }
+        }
+      }
+
+      // casing
+      function updateUpper() {
+        if (vm.casingUpper) {
+          vm.casingUpper = false;
+          return;
+        }else {
+          vm.casingUpper = true;
+          if (vm.casingLower) {
+            vm.casingLower = false;
+          }
+        }
+      }
+
+      function updateLower() {
+        if (vm.casingLower) {
+          vm.casingLower = false;
+          return;
+        }else {
+          vm.casingLower = true;
+          if (vm.casingUpper) {
+            vm.casingUpper = false;
+          }
+        }
+      }
+
+      // encoding
+      function updateEncodeHtml() {
+        if (vm.encodeHtml) {
+          vm.encodeHtml = false;
+          return;
+        }else {
+          vm.encodeHtml = true;
+          if (vm.encodeUrl) {
+            vm.encodeUrl = false;
+          }
+        }
+      }
+
+      function updateEncodeUrl() {
+        if (vm.encodeUrl) {
+          vm.encodeUrl = false;
+          return;
+        } else {
+          vm.encodeUrl = true;
+          if (vm.encodeHtml) {
+            vm.encodeHtml = false;
+          }
+        }
+      }
+
+      $scope.updatePageField = function() {
+        var pageField =     (vm.field !== undefined ? '@Umbraco.Field("' + vm.field + '"' : "")
+                          + (vm.altField !== undefined ? ', altFieldAlias:"' + vm.altField + '"': "")
+                          + (vm.altText !== undefined ? ', altText:"' + vm.altText + '"' : "")
+                          + (vm.insertBefore !== undefined ? ', insertBefore:"' + vm.insertBefore + '"' : "")
+                          + (vm.insertAfter !== undefined ? ', insertAfter:"' + vm.insertAfter + '"' : "")
+                          + (vm.recursive !== false ? ', recursive: ' + vm.recursive : "")
+                          + (vm.date !== false ? ', formatAsDate: ' + vm.date : "")
+                          + (vm.dateTime !== false ? ', formatAsDateWithTimeSeparator:"' + vm.dateTimeSeparator + '"' : "")
+                          + (vm.casingUpper !== false ? ', casing: ' + "RenderFieldCaseType.Upper" : "")
+                          + (vm.casingLower !== false ? ', casing: ' + "RenderFieldCaseType.Lower" : "")
+                          + (vm.encodeHtml !== false ? ', encoding: ' + "RenderFieldEncodingType.Html" : "")
+                          + (vm.encodeUrl !== false ? ', encoding: ' + "RenderFieldEncodingType.Url" : "")
+                          + (vm.convertLinebreaks !== false ? ', convertLineBreaks: ' + "true" : "")
+                          + (vm.field ? ')' : "");
+        $scope.model.umbracoField = pageField;
+        return pageField;
+      };
+
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Overlays.InsertFieldController", InsertFieldController);
+})();

src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.html

@@ -0,0 +1,184 @@
+
+<div ng-controller="Umbraco.Overlays.InsertFieldController as vm">
+
+  <div class="control-group umb-control-group -no-border">
+     <div class="umb-el-wrap">
+
+        <label class="control-label" for="chooseField">
+            <!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+            Choose field
+        </label>
+
+        <div class="controls">
+          <select name="chooseField" ng-model="vm.field">
+            <option value="{{property}}" ng-repeat="property in vm.properties">{{property}}</option>
+          </select>
+        </div>
+     </div>
+  </div>
+
+  <div class="advanced" style="position:relative">
+    <div class="hideAdvanced" style="position:absolute;height:100%;width:100%;background-color:white;opacity:.7;"  ng-hide="vm.field"></div>
+
+    <i class="icon icon-add blue" ng-hide="vm.showAltField"></i>
+    <a ng-click="vm.showAltField=true" ng-hide="vm.showAltField">Add alternative field<br></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="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+              Alternative Field
+          </label>
+
+          <div class="controls">
+            <select name="altField" ng-model="vm.altField">
+              <option value="{{property}}" ng-repeat="property in vm.properties">{{property}}</option>
+            </select>
+             <!-- <input type="text" class="umb-editor ng-pristine ng-valid ng-valid-required" umb-auto-focus="" focus-on-filled="true" required=""> -->
+          </div>
+       </div>
+    </div>
+
+    <i class="icon icon-add blue" ng-hide="vm.showAltText"></i>
+		<a ng-click="vm.showAltText=true" ng-hide="vm.showAltText">
+						<!-- <localize key="general_choose" class="ng-isolate-scope ng-scope">Choose</localize>... -->
+            Add default value
+		</a>
+
+    <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="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+             Alternative text
+         </label>
+          <div class="controls">
+            <input type="text" name="altText" ng-model="vm.altText">
+             <!-- <input type="text" class="umb-editor ng-pristine ng-valid ng-valid-required" umb-auto-focus="" focus-on-filled="true" required=""> -->
+          </div>
+       </div>
+
+    </div>
+
+
+    <div class="control-group umb-control-group">
+      <div class="umb-el-wrap">
+
+        <div class="controls"><br>
+          <label class="control-label" for="recursive">
+              <!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+              Recursive?
+          </label>
+          <input type="checkbox" name="recursive" ng-model="vm.recursive">
+        </div>
+      </div>
+    </div>
+
+    <div class="control-group umb-control-group -no-border ng-scope">
+
+       <div class="umb-el-wrap">
+
+         <label class="control-label" for="insertBefore">
+             <!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+             Insert before field
+         </label>
+          <div class="controls">
+            <input type="text" name="insertBefore" ng-model="vm.insertBefore" on-focus="vm.showInsertPreview()" ng-change="vm.updateInsertPreview()" on-blur="vm.hideInsertPreview()">
+          </div>
+       </div>
+
+    </div>
+
+    <div class="control-group umb-control-group">
+
+       <div class="umb-el-wrap">
+
+         <label class="control-label" for="insertAfter">
+             <!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+             Insert after field
+         </label>
+          <div class="controls">
+            <input type="text" name="insertAfter" ng-model="vm.insertAfter" on-focus="vm.showInsertPreview()" ng-change="vm.updateInsertPreview()" on-blur="vm.hideInsertPreview()">
+          </div>
+       </div>
+
+    </div>
+
+    <div class="control-group umb-control-group">
+      <div class="umb-el-wrap">
+
+        <div class="controls">
+          <label class="control-label" for="date">
+              <!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+              Format as date
+          </label>
+          <a href ng-click="vm.updateDate()" class="btn">Date only</a>
+          <a href ng-click="vm.updateDateTime()" class="btn">Date and time</a>
+          <input type="text" ng-model="vm.dateTimeSeparator" ng-hide="!vm.dateTime" placeholder="separator">
+        </div>
+      </div>
+    </div>
+
+    <div class="control-group umb-control-group">
+      <div class="umb-el-wrap">
+
+        <div class="controls">
+          <label class="control-label" for="date">
+              <!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+              Casing          </label>
+              <a href ng-click="vm.updateUpper()" class="btn">Upper</a>
+              <a href ng-click="vm.updateLower()" class="btn">lower</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="control-group umb-control-group">
+      <div class="umb-el-wrap">
+
+        <div class="controls">
+          <label class="control-label" for="date">
+              <!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+              Encoding          </label>
+              <a href ng-click="vm.updateEncodeHtml()" class="btn">
+                  HTML</a>
+              <a href ng-click="vm.updateEncodeUrl()" class="btn">
+                  URL</a>
+
+        </div>
+      </div>
+    </div>
+
+
+    <div class="control-group umb-control-group">
+      <div class="umb-el-wrap">
+
+        <div class="controls"><br>
+          <label class="control-label" for="recursive">
+              <!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+              Convert line breaks?
+          </label>
+          <input type="checkbox" name="linebreaks" ng-model="vm.convertLinebreaks">
+        </div>
+      </div>
+    </div>
+
+    <div class="control-group umb-control-group -no-border">
+      <div class="umb-el-wrap">
+
+        <div class="controls"><br>
+          <label class="control-label" for="recursive">
+              <!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
+              Output sample
+          </label>
+          <p>{{updatePageField()}}</p>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+
+
+
+</div>

src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js

@@ -6,7 +6,7 @@
         var vm = this;
         vm.page = {};
         vm.page.loading = true;
-        
+
         //menu
         vm.page.menu = {};
         vm.page.menu.currentSection = appState.getSectionState("currentSection");
@@ -46,7 +46,7 @@
             //we need to load this somewhere, for now its here.
             assetsService.loadCss("lib/ace-razor-mode/theme/razor_chrome.css");
             templateResource.getById($routeParams.id).then(function(template){
-                    
+
                     vm.page.loading = false;
                     vm.template = template;
 
@@ -67,14 +67,14 @@
             });
 
         };
-        
+
         vm.openPageFieldOverlay = openPageFieldOverlay;
         vm.openDictionaryItemOverlay = openDictionaryItemOverlay;
         vm.openQueryBuilderOverlay = openQueryBuilderOverlay;
         vm.openMacroOverlay = openMacroOverlay;
 
         function openMacroOverlay() {
-           
+
             vm.macroPickerOverlay = {
                 view: "macropicker",
                 dialogData: {},
@@ -90,13 +90,17 @@
 
         }
 
- 
+
         function openPageFieldOverlay() {
             vm.pageFieldOverlay = {
-                view: "mediapicker",
+                title: "Insert page field",
+                description: "Insert data in template",
+                submitButtonLabel: "Insert",
+                closeButtonlabel: "Cancel",
+                view: "insertfield",
                 show: true,
                 submit: function(model) {
-
+                  vm.insert(model.umbracoField);
                 },
                 close: function(model) {
                     vm.pageFieldOverlay.show = false;

src/Umbraco.Web.UI.Client/src/views/templates/edit.html

@@ -22,7 +22,7 @@
             <umb-editor-container>
 
                 <div class="btn-group">
-                    <a href ng-click="vm.openMacroOverlay()" class="btn">
+                    <a href ng-click="vm.openPageFieldOverlay()" class="btn">
                         <i class="icon-autofill"></i></a>
                     <a href ng-click="vm.insert('@RenderDictionary()')"class="btn">
                         <i class="icon-book-alt"></i></a>
@@ -30,18 +30,18 @@
                         <i class="icon-settings-alt"></i></a>
                 </div>
 
-                <div class="btn-group">  
+                <div class="btn-group">
                   <a href class="btn"><i class="icon-checkbox-empty"></i></a>
                   <a href class="btn"><i class="icon-checkbox-dotted"></i></a>
-                </div> 
-            
+                </div>
+
 
                 <div
                     auto-scale="85"
                     umb-ace-editor="vm.aceOption"
                     ng-model="vm.template.content">
                 </div>
-                    
+
 
             </umb-editor-container>