yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

testing scrolling, custom html in content and custom step views

Browse Source
This commit is contained in:
Mads Rasmussen
2017-10-06 10:14:33 +02:00
parent 4584abaa72
commit 282cc0c722
9 changed files with 267 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js
View File

@@ -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);
});
}
}

3
src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
View File

@@ -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 {

17
src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/treeoptions/treeoptions.controller.js Normal file
View File

@@ -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);
})();

3
src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/treeoptions/treeoptions.html Normal file
View File

@@ -0,0 +1,3 @@
<div ng-controller="Umbraco.Tours.IntroMediaSection.TreeOptionsController as vm">
This is my custom view
</div>

24
src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
View File

@@ -1,9 +1,5 @@
<div class="umb-tour">
<!--
<div class="umb-tour__backdrop"></div>
-->
<div class="umb-tour__popover">
<div ng-if="loadingStep">
@@ -13,35 +9,31 @@
<div ng-if="currentStepIndex < steps.length && !loadingStep">
<div class="umb-tour__step-counter">step {{ currentStepIndex + 1 }} of {{ steps.length }}</div>
<div class="umb-tour__title">{{ currentStep.title }}</div>
<div class="umb-tour__content">{{ currentStep.content }}</div>
<div class="umb-tour__content" ng-bind-html="currentStep.content"></div>
<div class="umb-tour__button-container">
<button class="btn umb-button__button btn-info" ng-click="endTour()">End tour</button>
<button class="btn umb-button__button btn-success" ng-click="nextStep()" ng-if="!currentStep.event">Next</button>
<umb-button size="xs" button-style="info" type="button" action="endTour()" label="End tour"></umb-button>
<umb-button size="xs" ng-if="!currentStep.event" button-style="success" type="button" action="nextStep()" label="Next"></umb-button>
</div>
</div>
<div ng-if="currentStepIndex === steps.length && !loadingStep">
<div class="umb-tour__big-title center">WOOOHOOO!</div>
<div class="umb-tour__content center">Your completed the tour. That is amazing!</div>
<div class="umb-tour__button-container-center">
<button class="btn umb-button__button btn-success center" ng-click="completeTour()">Complete</button>
</div>
<div class="umb-tour__button-container-center">
<umb-button type="button" button-style="success" size="xs" action="completeTour()" label="Complete"></umb-button>
</div>
</div>
<div ng-if="configuredView" ng-include="configuredView"></div>
</div>
<!-- Dot -->
<!-- <div class="umb-tour__dot"></div> -->
<!-- SVG Backdrop -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="umb-tour__canvas">
<rect class="rect-left umb-tour__rect" height="100%"/>
<rect class="rect-top umb-tour__rect" width="100%"/>
<rect class="rect-bot umb-tour__rect" width="100%"/>
<rect class="rect-right umb-tour__rect" height="100%" width="100%"/>
</svg>
</div>

4
src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
View File

@@ -1,9 +1,9 @@
<div class="umb-media-grid">
<div class="umb-media-grid__item" title="{{item.name}}" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail, '-svg': item.extension == 'svg'}">
<div data-element="media-grid-item-{{$index}}" class="umb-media-grid__item" title="{{item.name}}" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail, '-svg': item.extension == 'svg'}">
<div>
<i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>
<div class="umb-media-grid__item-overlay" ng-class="{'-locked': item.selected}" ng-click="clickItemName(item, $event, $index)">
<div data-element="media-grid-item-edit" class="umb-media-grid__item-overlay" ng-class="{'-locked': item.selected}" ng-click="clickItemName(item, $event, $index)">
<i ng-if="onDetailsHover" class="icon-info umb-media-grid__info" ng-mouseover="hoverItemDetails(item, $event, true)" ng-mouseleave="hoverItemDetails(item, $event, false)"></i>
<div class="umb-media-grid__item-name">{{item.name}}</div>
</div>

2
src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
View File

@@ -1,4 +1,4 @@
<div class="umb-file-dropzone-directive">
<div data-element="dropzone" class="umb-file-dropzone-directive">
<ng-form name="uploadForm">

169
src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js
View File

@@ -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: "<div>Testing html</div><br/><b>This should be bold</b><pre>We can also make code examples in here</pre>",
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: [

17
src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html
View File

@@ -5,7 +5,7 @@
<div>
<div>
<h5>Create a document type</h5>
<h5>Create your first document type</h5>
<button ng-click="vm.startTour()">Start tour</button>
</div>
@@ -24,6 +24,21 @@
<button ng-click="vm.startTour()">Start tour</button>
</div>
<div>
<h5>Create a document type for a sub page</h5>
<button ng-click="vm.startTourFive()">Start tour 5</button>
</div>
<div>
<h5>Testing scrolling and tabs</h5>
<button ng-click="vm.startTourSix()">Start tour 6</button>
</div>
<div>
<h5>Testing media library</h5>
<button ng-click="vm.startTourSeven()">Start tour 7</button>
</div>
</div>
<div class="row clearfix" ng-if="vm.dashboard">