Merge branch 'release/4.5.0' into master

The primary focus of this update is to introduce two new attribute types—`InstructionAttribute` and `IncomingRelationshipAttribute`. Neither of these persist actual attribute values to the edited topic; instead, they help fill out the instructions and the object graph for the editor by exposing information that might not otherwise be obvious by only looking at the current topic's attributes. This update also includes various user interface improvements, including stick navigation and some basic responsiveness. Finally, this includes a couple of bug fixes—most notably, a bug inherited from the underlying OnTopic Library which prevents attribute values from being deleted via the editor. New Features - Updated the _View Page_ link to open the page in a new tab (853bdd7) - Updated the `TextAreaViewComponent` to support `MinimumLength` (57edf1e) - Updated the `TextViewComponent` (06b57c9) to support `MinimumLength` (d2699bc), a regular expression `Pattern` validation (a7fa26c), and an optional `ValidationMessage` (92c147e) - Introduced the new `InstructionViewComponent`, which allows instructional text to be embedded in the editor at any point among the attributes (e8e6261) - Introduced the new `IncomingRelationshipViewComponent` (32edc40), which exposes a list of incoming relationships, optionally filted by `AttributeKey` and `AttributeValue` (407c040) Improvements - Updated style of `HtmlViewComponent` to help avoid a flash of unstyled content (FOUC) as WYSIWYG editor script is applied (bb727cd) - Updated style of `TokenizedTopicListViewComponent` so that it looks similar to the `TextViewComponent` (fa277f7) - Updated style and interaction patterns of the `RelationshipViewComponent`, make it easier to navigate the tree and select nodes (2e0ddb4) - Updated navigation and topic information callout to be sticky, while introducing basic responsive features for callouts, buttons, navigation, and title (643d856) Bug Fixes - Ensured that errors in dropdown menus (e5e2f7c) and text areas (0221298) are correctly reported in their corresponding tabs so editors can see where an error has occurred (0c4bb2d) - Fixed a bug where a deleted attribute might not get saved since deleted attributes didn't result in the `AttributeValueCollection` being marked as `IsDirty()` (7777eec) Cleanup - Deferred JavaScript resources to improve page load time (e0664a8) - Import of Twitter Bootstrap directly via SCSS, instead of via compiled CSS; this allows us to only import styles associated with components we're actually using (92822dc) - Minor improvements to code (96e9dfa), such as streamlining deleted attribute logic (7777eec), reducing some flashes of unstyled content (FOUC) (bb727cd), and removing legacy code (1052cf8, 587dc0d) - Explicitly set the `isRecursive` parameter of `ITopicRepository.Delete()` to ensure forward compatibility, as the parameter default will change in the next version of the OnTopic library (ba2acb4) - Marked the `DisplayOptionsViewComponent` (f910e53) and the `DefaultAttributeTypeViewComponent` (4f53e36) as deprecated in anticipation of OnTopic Editor 5.0.0 (def412e) - Marked a number of members on `AttributeDescriptorTopicViewModel` as deprecated, including the ill-conceived `CssClass` attribute, in anticipation of OnTopic Editor 5.0.0 (57edf1e)
OnTopicCMS · Sep 30, 2020 · 22b5f4f · 22b5f4f
2 parents 3b11cbe + 78df51f
commit 22b5f4f
Show file tree

Hide file tree

Showing 52 changed files with 787 additions and 253 deletions.
diff --git a/OnTopic.Editor.AspNetCore.Host/OnTopic.Editor.AspNetCore.Host.csproj b/OnTopic.Editor.AspNetCore.Host/OnTopic.Editor.AspNetCore.Host.csproj
@@ -7,12 +7,12 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="OnTopic" Version="4.4.0" />
-    <PackageReference Include="OnTopic.ViewModels" Version="4.4.0" />
-    <PackageReference Include="OnTopic.AspNetCore.Mvc" Version="4.4.0" />
-    <PackageReference Include="OnTopic.Data.Caching" Version="4.4.0" />
-    <PackageReference Include="OnTopic.Data.Sql" Version="4.4.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="3.1.7" />
+    <PackageReference Include="OnTopic" Version="4.5.0" />
+    <PackageReference Include="OnTopic.ViewModels" Version="4.5.0" />
+    <PackageReference Include="OnTopic.AspNetCore.Mvc" Version="4.5.0" />
+    <PackageReference Include="OnTopic.Data.Caching" Version="4.5.0" />
+    <PackageReference Include="OnTopic.Data.Sql" Version="4.5.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="3.1.8" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/...pic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/ContentTypeList/Default.cshtml b/...pic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/ContentTypeList/Default.cshtml
@@ -14,21 +14,23 @@ else if (Model.TopicList.Count > 2) {
   </select>
 
   <script>
-    (function ($) {
-      $("#@($"ContentTypesFor_{Model.AttributeKey}")").change(function () {
-        var option = $('option:selected', this);
-        @if (Model.EnableModal?? false) {
-          <text>
-            initEditorModal('@Model.AttributeKey', option.text(), option.val(), @Model.OnModalClose); return false;
-          </text>
-        }
-        else {
-          <text>
-            window.location.href = option.val();
-          </text>
-        }
-      });
-    })(jQuery);
+    window.addEventListener('DOMContentLoaded', function () {
+      (function($) {
+        $("#@($"ContentTypesFor_{Model.AttributeKey}")").change(function () {
+          var option = $('option:selected', this);
+          @if (Model.EnableModal?? false) {
+            <text>
+              initEditorModal('@Model.AttributeKey', option.text(), option.val(), @Model.OnModalClose); return false;
+            </text>
+          }
+          else {
+            <text>
+              window.location.href = option.val();
+            </text>
+          }
+        });
+      })(jQuery);
+    });
   </script>
 
 }

diff --git a/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/DateTime/Default.cshtml b/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/DateTime/Default.cshtml
@@ -16,30 +16,32 @@
 />
 
 <script>
-  $(function() {
+  window.addEventListener('DOMContentLoaded', function() {
+    (function($) {
 
-    //Instantiate date and/or time picker
-    $('#@Html.IdFor(m => m.Value)')
-      .@(includeDatePicker? "date" : "")@(includeTimePicker? "time" : "")picker({
-        @if (includeDatePicker) {
-          <text>
-            dateFormat          : '@Model.AttributeDescriptor.DateFormat',
-            defaultDate         : '@Model.GetDefaultDate()',
-          </text>
-        }
-        @if (includeDatePicker && includeTimePicker) {
-          <text>
-            separator           : '@Model.AttributeDescriptor.DateTimeSeparator',
-          </text>
-        }
-        @if (includeTimePicker) {
-          <text>
-            timeFormat          : '@Model.AttributeDescriptor.TimeFormat',
-            defaultTime         : '@Model.GetDefaultTime()',
-          </text>
-        }
-        defaultValue            : '@Model.GetDefaultDate() @Model.GetDefaultTime()'
-      });
+      //Instantiate date and/or time picker
+      $('#@Html.IdFor(m => m.Value)')
+        .@(includeDatePicker? "date" : "")@(includeTimePicker? "time" : "")picker({
+          @if (includeDatePicker) {
+            <text>
+              dateFormat        : '@Model.AttributeDescriptor.DateFormat',
+              defaultDate       : '@Model.GetDefaultDate()',
+            </text>
+          }
+          @if (includeDatePicker && includeTimePicker) {
+            <text>
+              separator         : '@Model.AttributeDescriptor.DateTimeSeparator',
+            </text>
+          }
+          @if (includeTimePicker) {
+            <text>
+              timeFormat        : '@Model.AttributeDescriptor.TimeFormat',
+              defaultTime       : '@Model.GetDefaultTime()',
+            </text>
+          }
+          defaultValue          : '@Model.GetDefaultDate() @Model.GetDefaultTime()'
+        });
 
+    })(jQuery);
   });
 </script>
diff --git a/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/HTML/Default.cshtml b/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/HTML/Default.cshtml
@@ -19,35 +19,16 @@
   asp-for                       ="Value"
   rows                          =@Model.AttributeDescriptor.Rows
   columns                       =@Model.AttributeDescriptor.Columns
-  class                         =@Model.AttributeDescriptor.CssClass
+  class                         ="@Model.AttributeDescriptor.CssClass form-control"
   placeholder                   =@Model.InheritedValue
   disabled                      =@(!Model.AttributeDescriptor.IsEnabled)
   required                      =@Model.AttributeDescriptor.IsRequired
 ></textarea>
 
 <script type="text/javascript">
-  (function ($) {
-
-    var textareaId              = '@Html.IdFor(m => m.Value)';
-
-    $('[id*="EditorModal"]').on('shown.bs.modal', function(e) {
-      $('.Modal [id*="@Html.IdFor(m => m.Value)"]').attr('id', '@Html.IdFor(m => m.Value)_Modal');
-      console.log('new id: ' + $('[id*="@Html.IdFor(m => m.Value)"]').attr('id'));
-      textareaId = '@Html.IdFor(m => m.Value)_Modal';
-      setEditorInstance(textareaId);
-      console.log(textareaId);
-      return;
-    });
-
-    setEditorInstance(textareaId);
-
-  })(jQuery);
-
-  function setEditorInstance(textareaId) {
-    CKEDITOR.replace(textareaId, {
-      height                    : '@Model.AttributeDescriptor.Height',
-      resize_maxHeight          : '@(Model.AttributeDescriptor.Height+300)',
-      customConfig              : '/_content/OnTopic.Editor.AspNetCore/Shared/Scripts/CkEditor/customConfig.js'
-    });
-  }
+  CKEDITOR.replace(@Html.IdFor(m => m.Value), {
+    height                      : '@Model.AttributeDescriptor.Height',
+    resize_maxHeight            : '@(Model.AttributeDescriptor.Height+300)',
+    customConfig                : '/_content/OnTopic.Editor.AspNetCore/Shared/Scripts/CkEditor/customConfig.js'
+  });
 </script>
diff --git a/...ditor.AspNetCore/Areas/Editor/Views/Editor/Components/IncomingRelationship/Default.cshtml b/...ditor.AspNetCore/Areas/Editor/Views/Editor/Components/IncomingRelationship/Default.cshtml
@@ -0,0 +1,11 @@
+@model IncomingRelationshipAttributeViewModel
+
+@{
+  Layout = "~/Areas/Editor/Views/Editor/Components/_Layout.cshtml";
+}
+
+<ul>
+  @foreach(var relatedTopic in Model.RelatedTopics) {
+    <li><a href="@Url.Action("Edit", new { path = relatedTopic.WebPath })">@relatedTopic.Title</a></li>
+  }
+</ul>
diff --git a/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/Instruction/Default.cshtml b/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/Instruction/Default.cshtml
@@ -0,0 +1,13 @@
+@model AttributeViewModel<InstructionAttributeTopicViewModel>
+
+@{
+  Layout = "~/Areas/Editor/Views/Editor/Components/_Layout.cshtml";
+}
+
+<div class="label">
+  <div class="alert alert-warning" role="alert">
+    @Html.Raw(@Model.AttributeDescriptor.Instructions)
+  </div>
+</div>
+
+<input type="hidden" asp-for="Value" />
diff --git a/...pic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/NestedTopicList/Default.cshtml b/...pic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/NestedTopicList/Default.cshtml
@@ -14,31 +14,39 @@
   <div id="@containerName"></div>
 
   <script type="text/javascript">
+
     var @($"{treeName}");
 
-    Ext.onReady(function () {
-
-      @($"{treeName}")          = new OnTopic.NestedTopics('@Model.UniqueKey', {
-        dataUrl                 : '/OnTopic/Json/@Model.WebPath/@attributeKey?ShowAll=true',
-        listeners               : {
-          click                 : function (n) {
-            var targetUrl       = "@($"{Url.Action("Edit")}/{attributeKey}/")" + n.attributes.key;
-            @if (Model.AttributeDescriptor.EnableModal?? true) {
-              <text>
-                initEditorModal('@attributeKey', n.attributes.text, targetUrl + '?IsModal=true', @($"{treeName}.refresh"));return false;
-              </text>
-            }
-            else {
-              <text>
-                location.href   = targetUrl;
-              </text>
+    window.addEventListener('DOMContentLoaded', function () {
+      (function($) {
+
+        Ext.onReady(function () {
+
+          @($"{treeName}")      = new OnTopic.NestedTopics('@Model.UniqueKey', {
+            dataUrl             : '/OnTopic/Json/@Model.WebPath/@attributeKey?ShowAll=true',
+            listeners           : {
+              click             : function (n) {
+                var targetUrl   = "@($"{Url.Action("Edit")}/{attributeKey}/")" + n.attributes.key;
+                @if (Model.AttributeDescriptor.EnableModal?? true) {
+                  <text>
+                    initEditorModal('@attributeKey', n.attributes.text, targetUrl + '?IsModal=true', @($"{treeName}.refresh"));
+                    return false;
+                  </text>
+                }
+                else {
+                  <text>
+                    location.href = targetUrl;
+                  </text>
+                }
+              }
             }
-          }
-        }
-      });
+          });
+
+          @($"{treeName}").render('@containerName');
 
-      @($"{treeName}").render('@containerName');
+        });
 
+      })(jQuery);
     });
 
   </script>
@@ -50,10 +58,10 @@
     values                      =@Model.AttributeDescriptor.PermittedContentTypes>
   </vc:content-type-list>
 
-  <div id="@($"EditorModal_{attributeKey}")" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
+  <div id="@($"EditorModal_{attributeKey}")" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1"  role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
       <div class="modal-header page title">
-        <h2 id="@($"ModalTitle_{attributeKey}")"><!-- determined by modal open script caller --></h2>
+        <h2 id="@($"ModalTitle_{attributeKey}")" class="modal-title"><!-- determined by modal open script caller --></h2>
       </div>
       <div class="modal-content">
         <iframe id="@($"EditorFrame_{attributeKey}")" src="" width="100%" marginheight="0" frameborder="0">
@@ -64,10 +72,12 @@
   </div>
 
   <script>
-    $(function() {
-      $('[id^="EditorModal"]').on('hide.bs.modal', function (e) {
-        @($"{treeName}.refresh")();
-      });
+    window.addEventListener('DOMContentLoaded', function () {
+      (function($) {
+        $('[id^="EditorModal"]').on('hide.bs.modal', function(e) {
+          @($"{treeName}.refresh")();
+        });
+      })(jQuery);
     });
   </script>
 

diff --git a/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/Relationship/Default.cshtml b/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/Relationship/Default.cshtml
@@ -14,12 +14,16 @@
 <div id="@containerName"></div>
 
 <script type="text/javascript">
-  Ext.onReady(function(){
-    var tree                    = new OnTopic.SelectableTreeView({
-      dataUrl                   : '/OnTopic/Json/@[email protected]&ShowAll=true&[email protected]&[email protected]&[email protected]&[email protected]&[email protected]',
-      checkAscendants           : @((descriptor.CheckAscendants is true).ToString().ToLower()),
-      backingField              : '@Html.IdFor(m => m.Value)'
-    });
-    tree.render('@containerName');
+  window.addEventListener('DOMContentLoaded', function () {
+    (function($) {
+      Ext.onReady(function () {
+        var tree = new OnTopic.SelectableTreeView({
+          dataUrl: '/OnTopic/Json/@[email protected]&ShowAll=true&[email protected]&[email protected]&[email protected]&[email protected]&[email protected]',
+          checkAscendants: @((descriptor.CheckAscendants is true).ToString().ToLower()),
+          backingField: '@Html.IdFor(m => m.Value)'
+        });
+        tree.render('@containerName');
+      });
+    })(jQuery);
   });
 </script>
diff --git a/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/Text/Default.cshtml b/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/Text/Default.cshtml
@@ -7,8 +7,11 @@
 <input
   type                          =@Model.AttributeDescriptor.InputType
   asp-for                       =@Model.Value
+  minlength                     =@Model.AttributeDescriptor.MinimumLength
   maxlength                     =@Model.AttributeDescriptor.MaximumLength
   class                         ="@Model.AttributeDescriptor.CssClass form-control"
+  title                         =@Model.AttributeDescriptor.ValidationMessage
+  pattern                       =@Model.AttributeDescriptor.Pattern
   placeholder                   =@Model.InheritedValue
   disabled                      =@(!Model.AttributeDescriptor.IsEnabled)
   required                      =@Model.AttributeDescriptor.IsRequired

diff --git a/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/TextArea/Default.cshtml b/OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/TextArea/Default.cshtml
@@ -8,6 +8,7 @@
   asp-for                       ="Value"
   rows                          =@Model.AttributeDescriptor.Rows
   cols                          =@Model.AttributeDescriptor.Columns
+  minlength                     =@Model.AttributeDescriptor.MinimumLength
   maxlength                     =@Model.AttributeDescriptor.MaximumLength
   class                         ="@Model.AttributeDescriptor.CssClass form-control"
   placeholder                   =@Model.InheritedValue

diff --git a/....Editor.AspNetCore/Areas/Editor/Views/Editor/Components/TokenizedTopicList/Default.cshtml b/....Editor.AspNetCore/Areas/Editor/Views/Editor/Components/TokenizedTopicList/Default.cshtml
@@ -18,21 +18,24 @@
 </div>
 
 <script>
-  $(function() {
-
-  //Create new instance of TokenizedTopics and set relevant properties
-    var topics                  = new TokenizedTopics();
-    topics.selector             = '#@Html.IdFor(m => m.Value)';
-    topics.scope                = '@rootTopicKey';
-    topics.attributeName        = '@descriptor.AttributeKey';
-    topics.attributeValue       = '@descriptor.AttributeValue';
-    topics.resultLimit          = '@descriptor.ResultLimit';
-    topics.tokenLimit           = @descriptor.TokenLimit;
-    topics.isAutoPostBack       = @((descriptor.AutoPostBack?? false).ToString().ToLower());
-    topics.selectedTopics       = @Html.Raw(Model.SelectedTopics);
-
-  //Fire TokenizedTopics.prototype.getTokenizedTopics() (and $([selector]).tokenInput())
-    topics.getTokenizedTopics();
+  window.addEventListener('DOMContentLoaded', function () {
+    (function($) {
+
+      //Create new instance of TokenizedTopics and set relevant properties
+      var topics                = new TokenizedTopics();
+      topics.selector           = '#@Html.IdFor(m => m.Value)';
+      topics.scope              = '@rootTopicKey';
+      topics.attributeName      = '@descriptor.AttributeKey';
+      topics.attributeValue     = '@descriptor.AttributeValue';
+      topics.resultLimit        = '@descriptor.ResultLimit';
+      topics.tokenLimit         = @descriptor.TokenLimit;
+      topics.isAutoPostBack     = @((descriptor.AutoPostBack?? false).ToString().ToLower());
+      topics.selectedTopics     = @Html.Raw(Model.SelectedTopics);
+
+      //Fire TokenizedTopics.prototype.getTokenizedTopics() (and $([selector]).tokenInput())
+      topics.getTokenizedTopics();
+
+    })(jQuery);
 
   });