Merge pull request #3 from episerver/fixes

Fixing key navigation focus issues, sortDropDown show/hide refactoring.

Author: kdelacreme

PowerSlice/PowerSlice.csproj

@@ -200,9 +200,6 @@
     <EmbeddedResource Include="Scripts\images\sortDescending.png" />
     <EmbeddedResource Include="Scripts\images\sorticon.png" />
   </ItemGroup>
-  <ItemGroup>
-    <EmbeddedResource Include="Scripts\components\CreateButton.js" />
-  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
   <Import Project="$(SolutionDir)\.nuget\nuget.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 

PowerSlice/Scripts/Components/ContentSlice.js

@@ -4,31 +4,47 @@ define([
     "dojo/_base/array",
     "dojo/_base/lang",
     "dojo/aspect",
-    "dojo/dom-style",
+    "dojo/topic",
+    "dojo/dom-geometry",
+    "dojo/dom-construct",
+    "dojo/dom-class",
+// Dijit
+    "dijit/form/Button",
+    "dijit/DropDownMenu",
+    "dijit/MenuItem",
+    "dijit/form/DropDownButton",
 // EPi
     "epi/shell/widget/dialog/Dialog",
     "epi/shell/widget/SearchBox",
     "./Tasks",
-    "./CreateButton",
 //Custom
     "./ContentSliceGrid",
     "./SortDropDown",
+    "./CreateContentInSliceDialog",
     "epi/i18n!epi/cms/nls/powerslice.slice"
 ], function (
 // Dojo
     declare,
     array,
     lang,
     aspect,
-    domStyle,
+    topic,
+    domGeom,
+    domConstruct,
+    domClass,
+// Dijit
+    Button,
+    DropDownMenu,
+    MenuItem,
+    DropDownButton,
 // EPi
     Dialog,
     SearchBox,
     Tasks,
-    CreateButton,
 // Custom
     ContentSliceGrid,
     SortDropDown,
+    CreateContentInSliceDialog,
     i18n
 ) {
     return declare([Tasks], {
@@ -53,27 +69,50 @@ define([
         //      Stores the ID of the timer used in _reloadQuery
         reloadInterval: null,
 
+        // defaultReloadDelay: Number
+        //      The default milliseconds to wait before reloading when typing in searchbox
+        defaultSearchDelay: 300,
+
         i18n: i18n,
 
         buildRendering: function () {
             this.inherited(arguments);
-
-            this.createButton = new CreateButton();
-            this.toolbar.addChild(this.createButton, 1);
-
+            // Create-button (default)
+            this.button = new Button({
+                disabled: true,
+                "class": "epi-flat epi-chromeless epi-sort-drop-down--fixed-width",
+                iconClass: "epi-iconPlus",
+                showLabel: false,
+                onClick: lang.hitch(this, function (option) {
+                    this._createContent(option);
+                })
+            });
+            this.toolbar.addChild(this.button, 1);
+            // Create-dropdown
+            this.dropDown = new DropDownButton({
+                "class": "epi-flat epi-chromeless epi-sort-drop-down--fixed-width",
+                iconClass: "epi-iconPlus",
+                showLabel: false,
+                title: this.i18n && this.i18n.createbutton ? this.i18n.createbutton.multipleoptions : ""
+            });
+            // Query text
+            this.queryNode = domConstruct.place("<div class=\"queryBar\"></div>", this.toolbar.domNode, "after");
             this.queryText = new SearchBox({
+                "class": "epi-search--full-width",
                 placeHolder: i18n.filter,
-                onChange: lang.hitch(this, function(value) {
-                    this._reloadQuery(500);
-                }),
                 intermediateChanges: true
             });
-            this.toolbar.addChild(this.queryText);
+            this.queryText.own(
+                this.queryText.on("searchBoxChange", lang.hitch(this, function(value) {
+                    this._reloadQuery(value ? this.defaultSearchDelay : null);
+                }))
+            );
+            domConstruct.place(this.queryText.domNode, this.queryNode);
             this.own(this.queryText);
-
-            //▲▼
+            //▲▼ Sorting
             this.sortButton = this._createSortDropDown();
-            this.toolbar.addChild(this.sortButton);
+            domConstruct.place(this.sortButton.domNode, this.queryNode);
+            this.addChild(this.sortButton, 2);
             this.own(this.sortButton);
         },
 
@@ -90,7 +129,7 @@ define([
 
         _createSortDropDown: function () {
             var dd = new SortDropDown({
-                "class": "epi-chromeless",
+                "class": "epi-chromeless epi-sort-drop-down",
                 iconClass: "epi-iconSort",
                 showLabel: false,
                 title: this.i18n.createbutton.multipleoptions
@@ -116,6 +155,16 @@ define([
             return dd;
         },
 
+        _setSortOptionsAttr: function (options) {
+            this.sortButton.set("options", options);
+            this._set("options", options);
+        },
+
+        _setHideSortOptionsAttr: function (hide) {
+            domClass[hide ? "add" : "remove"](this.queryNode, "queryBar--hide-sorting");
+            this._set("hideSortOptions", hide);
+        },
+
         _reloadQuery: function (delay) {
             var supermethod = this.getInherited(arguments);
             if(this.reloadInterval) {
@@ -131,13 +180,14 @@ define([
                 this.contentQuery.set("descending", this.sortKey ? this.orderDescending : false);
                 this.contentQuery.set("queryParameters", { q: this.queryText ? this.queryText.get("value") : "" });
 
-                if(selectionChanged) {
+                if(selectionChanged && this.sortButton) {
                     // Set available create options
-                    this.createButton.set("options", newQuery.createOptions);
+                    this.set("createOptions", newQuery.createOptions);
                     // Set available sort options and show/hide sort button
-                    this.sortButton.set("options", newQuery.sortOptions);
-                    domStyle.set(this.sortButton.domNode, "display", newQuery.hideSortOptions ? "none" : null);
-                    domStyle.set(this.queryText.domNode, "width", newQuery.hideSortOptions ? "100%" : null);
+                    this.set("sortOptions", newQuery.sortOptions);
+                    this.set("hideSortOptions", newQuery.hideSortOptions);
+
+
                     // Set default sort options as active
                     if (newQuery.defaultSortOption) {
                         this.sortButton.set("attribute", newQuery.defaultSortOption.key);
@@ -149,6 +199,73 @@ define([
                 supermethod.apply(this);
                 clearInterval(this.reloadInterval);
             }), delay || 1);
+        },
+
+        _calculateContentQuerySize: function (newSize) {
+            // summary:
+            //      Calculate the new Size of the Content Query
+            // newSize: object
+            //      The new size of Task component
+            // tags:
+            //      Private
+            var size = this.inherited(arguments),
+                queryTextSize = domGeom.getMarginBox(this.queryText.domNode);
+            return { w: newSize.w, h: size.h - queryTextSize.h };
+        },
+
+        _setCreateOptionsAttr: function(options) {
+            if(options && options.length > 1) {
+                var menu = new DropDownMenu({ style: "display: none;" });
+                array.forEach(options, function (option) {
+                    var menuItem = new MenuItem({
+                        label: option.label,
+                        onClick: lang.hitch(this, function () {
+                            this._createContent(option);
+                        })
+                    });
+                    menu.addChild(menuItem);
+                }, this);
+                this.dropDown.set("dropDown", menu);
+                this.toolbar.removeChild(this.button);
+                this.toolbar.addChild(this.dropDown, 1);
+            } else {
+                var option = options && options.length === 1 ? options[0] : {};
+                var title = i18n && i18n.createbutton ?
+                    i18n.createbutton.singleoptionprefix + " " + option.label :
+                    "";
+                this.button.set("title", title);
+                this.button.set("disabled", !options || options.length < 1);
+                this.button.onClick = lang.hitch(this, function () {
+                    this._createContent(option);
+                });
+                this.toolbar.removeChild(this.dropDown);
+                this.toolbar.addChild(this.button, 1);
+            }
+        },
+
+        _createContent: function (createOption) {
+            var contentNameInput = new CreateContentInSliceDialog({
+                defaultContentName: lang.replace(i18n.defaultcontentname, { contentType: createOption.label })
+            });
+
+            var dialog = new Dialog({
+                defaultActionsVisible: false,
+                autofocus: true,
+                content: contentNameInput,
+                title: lang.replace(i18n.defaultcontentname, { contentType: createOption.label }),
+                destroyOnHide: true
+            });
+
+            this.own(
+                aspect.after(dialog, "onExecute", function () {
+                    topic.publish("/epi/shell/action/changeview", "powerslice/components/CreateSpecificContent", null, {
+                        predefinedParentId: createOption.parent,
+                        predefinedContentTypeId: createOption.contentTypeId,
+                        predefinedContentName: lang.trim(dialog.content.get("value"))
+                    });
+                }, true)
+            );
+            dialog.show();
         }
 
     });