From 282cc0c7222222947f7de779dc84745e16e8fef4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 6 Oct 2017 10:14:33 +0200 Subject: [PATCH] testing scrolling, custom html in content and custom step views --- .../application/umbtour.directive.js | 54 +++++- .../components/umb-editor-navigation.less | 3 +- .../treeoptions/treeoptions.controller.js | 17 ++ .../treeoptions/treeoptions.html | 3 + .../components/application/umb-tour.html | 24 +-- .../src/views/components/umb-media-grid.html | 4 +- .../components/upload/umb-file-dropzone.html | 2 +- .../dashboard/dashboard.tabs.controller.js | 169 ++++++++++++++++++ .../default/StartupDashboardIntro.html | 17 +- 9 files changed, 267 insertions(+), 26 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/treeoptions/treeoptions.controller.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/treeoptions/treeoptions.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js index ba8e51ba1e..a2db6391cd 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js @@ -27,10 +27,24 @@ popover = el.find(".umb-tour__popover"); scope.totalSteps = scope.steps.length; scope.currentStepIndex = 0; - startStep(); } + function setView() { + if (scope.currentStep.view && scope.options.alias) { + //we do this to avoid a hidden dialog to start loading unconfigured views before the first activation + var configuredView = scope.currentStep.view; + if (scope.currentStep.view.indexOf(".html") === -1) { + var viewAlias = scope.currentStep.view.toLowerCase(); + var tourAlias = scope.options.alias.toLowerCase(); + configuredView = "views/common/tours/" + tourAlias + "/" + viewAlias + "/" + viewAlias + ".html"; + } + if (configuredView !== scope.configuredView) { + scope.configuredView = configuredView; + } + } + } + function nextStep() { scope.currentStepIndex++; if(scope.currentStepIndex !== scope.steps.length) { @@ -40,8 +54,7 @@ function startStep() { - scope.currentStep = scope.steps[scope.currentStepIndex]; - + // we need to make sure that all requests are done var timer = window.setInterval(function(){ console.log("pending", $http.pendingRequests.length); @@ -49,12 +62,19 @@ scope.loadingStep = true; + // check for pending requests both in angular and on the document if($http.pendingRequests.length === 0 && document.readyState === "complete") { console.log("Everything is DONE JOHN"); + + scope.currentStep = scope.steps[scope.currentStepIndex]; + clearInterval(timer); + + setView(); positionPopover(); + // if a custom event needs to be bound we do it now if(scope.currentStep.event) { bindEvent(); } @@ -71,6 +91,29 @@ $timeout(function(){ + var element = $(scope.currentStep.element); + var scrollParent = element.scrollParent(); + + console.log("scrollParent", scrollParent); + + // Detect if scroll is needed + if(element[0].offsetTop > scrollParent[0].clientHeight) { + console.log("SCROOOOOOOL"); + scrollParent.animate({ + scrollTop: element[0].offsetTop + }, function() { + // Animation complete. + console.log("ANIMATION COMPLETE"); + _position(); + }); + } else { + _position(); + } + + }); + + function _position() { + var element = $(scope.currentStep.element); var offset = element.offset(); var width = element.outerWidth(true); @@ -82,12 +125,13 @@ var popoverWidth = popoverBox.outerWidth(); var popoverHeight = popoverBox.outerHeight(); - console.log("This element", element); + console.log("This element", element); console.log("width", width); console.log("height", height); console.log(scope.currentStep.placement); console.log("popoverWidth", popoverWidth); console.log("popoverHeight", popoverHeight); + console.log("element offset", offset); // Element placements if (scope.currentStep.placement === "top") { @@ -139,7 +183,7 @@ rectRight.css("y", topDistance); rectRight.css("height", height); - }); + } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less index b9f2731e51..9c7eb7d7b2 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less @@ -6,9 +6,10 @@ .umb-sub-views-nav-item { text-align: center; - margin-left: 20px; + //margin-left: 20px; cursor: pointer; display: block; + padding: 5px 10px; } .umb-sub-views-nav-item:focus { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/treeoptions/treeoptions.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/treeoptions/treeoptions.controller.js new file mode 100644 index 0000000000..70e5280e04 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/treeoptions/treeoptions.controller.js @@ -0,0 +1,17 @@ +(function () { + "use strict"; + + function TreeOptionsController($scope, tourService) { + + var vm = this; + + function onInit() { + alert("hello from my controller"); + } + + onInit(); + + } + + angular.module("umbraco").controller("Umbraco.Tours.IntroMediaSection.TreeOptionsController", TreeOptionsController); +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/treeoptions/treeoptions.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/treeoptions/treeoptions.html new file mode 100644 index 0000000000..d57843ac0b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/treeoptions/treeoptions.html @@ -0,0 +1,3 @@ +
+ This is my custom view +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html index 85d629bc41..c72126d151 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html @@ -1,9 +1,5 @@
- -
@@ -13,35 +9,31 @@
step {{ currentStepIndex + 1 }} of {{ steps.length }}
{{ currentStep.title }}
-
{{ currentStep.content }}
+
- - + +
WOOOHOOO!
Your completed the tour. That is amazing!
-
- -
+
+
+
+ +
- - - - - -
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html index 412a57288d..2b945cdafb 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html @@ -1,9 +1,9 @@
-
+
-
+
{{item.name}}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html index 6b05593e11..ab1de0bee0 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js index 012172148e..55e466f2a9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js @@ -26,6 +26,9 @@ function startUpDynamicContentController(dashboardResource, assetsService, tourS vm.startTour = startTour; vm.startTourTwo = startTourTwo; vm.startTourThree = startTourThree; + vm.startTourFive = startTourFive; + vm.startTourSix = startTourSix; + vm.startTourSeven = startTourSeven; function startTour() { @@ -260,6 +263,172 @@ function startUpDynamicContentController(dashboardResource, assetsService, tourS } + function startTourFive() { + + var tour = { + "options": { + "name": "Create a document type for a sub page", + "alias": "umbIntroCreateSubPageDocType" + }, + "steps": [ + { + element: "#applications [data-element='section-settings']", + title: "Navigate to the settings sections", + content: "In the settings section we will find the document types", + event: "click" + }, + { + element: "#tree [data-element='tree-item-documentTypes']", + title: "Let's open the context menu", + content: "Hover the document types node and click the three small dots", + event: "click", + clickElement: "#tree [data-element='tree-item-documentTypes'] [data-element='tree-item-options']" + }, + { + element: "#dialog [data-element='action-documentType']", + title: "Create document type", + content: "Click the option to create a document type with a template", + event: "click" + }, + { + element: "[data-element='editor-document-types'] [data-element='editor-name-field']", + title: "Enter a name for the document type", + content: "Enter a name for the document type" + }, + { + element: "[data-element='editor-document-types'] [data-element='sub-view-permissions']", + title: "Enter a name for the document type", + content: "Enter a name for the document type", + event: "click" + } + ] + }; + + tourService.startTour(tour); + + } + + function startTourSix() { + + var tour = { + "options": { + "name": "Create a document type for a sub page", + "alias": "umbIntroCreateSubPageDocType" + }, + "steps": [ + { + element: "#tree [data-element='tree-item-Test']", + title: "Navigate to the Test node", + content: "In the settings section we will find the document types", + event: "click" + }, + { + element: "[data-element='editor-content'] [data-element='tab-Tab 2']", + title: "Navigate to tab 2", + content: "Bla bla bla bla bla", + event: "click" + }, + { + element: "[data-element='editor-content'] [data-element='property-prop2']", + title: "This is the second date picker", + content: "We have a lot of those" + }, + { + element: "[data-element='editor-content'] [data-element='property-andTheLastTextArea']", + title: "This is the second date picker", + content: "We have a lot of those" + } + ] + }; + + tourService.startTour(tour); + + } + + function startTourSeven() { + + var tour = { + "options": { + "name": "Create a document type for a sub page", + "alias": "umbIntroMediaSection" + }, + "steps": [ + { + element: "#applications [data-element='section-media']", + title: "Navigate to the media section", + content: "
Testing html

This should be bold
We can also make code examples in here
", + event: "click" + }, + { + element: "#tree [data-element='tree-root']", + title: "Open context menu", + content: "Hover the media root and click the three small dots in the right side", + event: "click", + clickElement: "#tree [data-element='tree-root'] [data-element='tree-item-options']", + view: "treeOptions" + }, + { + element: "#dialog [data-element='action-Folder']", + title: "Select create folder", + content: "Bla bla bla bla bla", + event: "click" + }, + { + element: "[data-element='editor-media'] [data-element='editor-name-field']", + title: "Give your folder a name", + content: "Call it 'My Folder'" + }, + { + element: "[data-element='editor-media'] [data-element='button-save']", + title: "Save the new folder", + content: "Bla bla bla bla bla", + event: "click" + }, + { + element: "[data-element='editor-media'] [data-element='dropzone']", + title: "Upload images", + content: "Bla bla bla bla bla" + }, + { + element: "[data-element='editor-media'] [data-element='media-grid-item-3']", + title: "Select media item", + content: "Bla bla bla bla bla", + event: "click", + clickElement: "[data-element='editor-media'] [data-element='media-grid-item-3'] [data-element='media-grid-item-edit']" + }, + { + element: "[data-element='editor-media'] [data-element='property-umbracoFile']", + title: "Something about the file", + content: "Bla bla bla bla bla" + }, + { + element: "[data-element='editor-media'] [data-element='property-umbracoBytes']", + title: "Something about the size", + content: "Bla bla bla bla bla" + }, + { + element: "[data-element='editor-media'] [data-element='tab-Generic properties']", + title: "Go to the properties tab", + content: "Bla bla bla bla bla", + event: "click" + }, + { + element: "[data-element='editor-media'] [data-element='property-_umb_urls']", + title: "Something about the path", + content: "Bla bla bla bla bla" + }, + { + element: "[data-element='editor-media'] [data-element='property-_umb_updatedate']", + title: "Something about the when the image is last updated", + content: "Bla bla bla bla bla" + } + ] + }; + + tourService.startTour(tour); + + } + // default dashboard content vm.defaultDashboard = { infoBoxes: [ diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html index 9ab70b855c..62aa2e0e9f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html @@ -5,7 +5,7 @@
-
Create a document type
+
Create your first document type
@@ -24,6 +24,21 @@
+
+
Create a document type for a sub page
+ +
+ +
+
Testing scrolling and tabs
+ +
+ +
+
Testing media library
+ +
+