clean up tours + small fixes

This commit is contained in:
Mads Rasmussen
2017-10-11 19:37:14 +02:00
parent f31d5b12da
commit 6640039cdf
5 changed files with 133 additions and 253 deletions

View File

@@ -93,7 +93,7 @@
}
}, 100);
}, 50);
}
@@ -227,18 +227,24 @@
}
function bindEvent() {
var eventName = scope.currentStep.event + ".step-" + scope.currentStepIndex;
if(scope.currentStep.clickElement) {
$(scope.currentStep.clickElement).on(scope.currentStep.event, handleEvent);
$(scope.currentStep.clickElement).on(eventName, handleEvent);
console.log("bind", eventName);
} else {
$(scope.currentStep.element).on(scope.currentStep.event, handleEvent);
$(scope.currentStep.element).on(eventName, handleEvent);
console.log("bind", eventName);
}
}
function unbindEvent() {
var eventName = scope.currentStep.event + ".step-" + scope.currentStepIndex;
if(scope.currentStep.clickElement) {
$(scope.currentStep.clickElement).off(scope.currentStep.event);
$(scope.currentStep.clickElement).off(eventName);
console.log("unbind", eventName);
} else {
$(scope.currentStep.element).off(scope.currentStep.event);
$(scope.currentStep.element).off(eventName);
console.log("unbind", eventName);
}
}

View File

@@ -1,4 +1,4 @@
<div class="umb-media-grid">
<div data-element="media-grid" class="umb-media-grid">
<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>

View File

@@ -23,7 +23,9 @@
<!-- Select files -->
<div class="file-select"
<div
data-element="button-upload-media"
class="file-select"
ngf-select
ng-model="filesHolder"
ngf-change="handleFiles($files, $event)"

View File

@@ -26,8 +26,7 @@ function startUpDynamicContentController(dashboardResource, assetsService, tourS
vm.startTour = startTour;
vm.startTourTwo = startTourTwo;
vm.startTourThree = startTourThree;
vm.startTourFive = startTourFive;
vm.startTourSix = startTourSix;
vm.startTourFour = startTourFour;
vm.startTourSeven = startTourSeven;
function startTour() {
@@ -42,121 +41,97 @@ function startUpDynamicContentController(dashboardResource, assetsService, tourS
element: "#applications [data-element='section-settings']",
title: "Navigate to the settings sections",
content: "In the settings section we will find the document types",
placement: "right",
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",
placement: "right",
title: "Create document type",
content: "<p>Hover the document types tree and click the <b>three small dots</b> to open the context menu</p>",
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",
placement: "right",
content: "Click <b>Document Type</b> to create a new document type with a template",
event: "click"
},
{
element: "[data-element='editor-name-field']",
title: "Enter a name for the document type",
content: "Enter a name for the document type",
placement: "bottom"
title: "Enter a name",
content: "<p>Our document type needs a name. Enter <b>Home</b> in the field and click <i>Next</i></p>"
},
{
element: "[data-element='editor-description']",
title: "Enter a description for the document type",
content: "Enter a description for the document type",
placement: "bottom"
title: "Enter a description",
content: "<p>A description helps the content editor pick the right document type when creating content:<br/><pre>The home to our website</pre></p>"
},
{
element: "[data-element='group-add']",
title: "Add tab",
content: "Add new tab",
event: "click",
placement: "bottom"
content: "Tabs help us organize the content on a content page. Click <b>Add new tab</b> to add a tab.",
event: "click"
},
{
element: "[data-element='group-name']",
title: "Enter a name",
content: "Enter a name the tab",
placement: "bottom"
content: "Enter <b>Content</b> in the tab name"
},
{
element: "[data-element='property-add']",
title: "Add a property",
content: "Add a property to the tab",
event: "click",
placement: "bottom"
},
{
element: "[data-element~='overlay-property-settings']",
title: "Property dialog",
content: "Something something something about the dialog",
placement: "left"
content: "<p>Properties are the different types of data on our content page.</p><p>On our Home page we wan't to add a welcome text.</p><p>Click <b>Add property</b> to open the property dialog</p>",
event: "click"
},
{
element: "[data-element~='overlay-property-settings'] [data-element='property-name']",
title: "Enter a name",
content: "Enter a name for the property editor",
placement: "left"
content: "Enter <b>Welcome Text</b> as name for the property"
},
{
element: "[data-element~='overlay-property-settings'] [data-element='property-description']",
title: "Enter a description",
content: "Enter a description for the property editor",
placement: "left"
content: "Enter a description for the property editor:<br/> <pre>Write a nice introduction text so the visitors feel welcome</pre>"
},
{
element: "[data-element~='overlay-property-settings'] [data-element='editor-add']",
title: "Add editor",
content: "Something something something",
event: "click",
placement: "left"
content: "The editor define what data type the property is. Click <b>Add editor</b> to open the editor picker dialog",
event: "click"
},
{
element: "[data-element~='overlay-editor-picker']",
title: "Editor picker dialog",
content: "Something something something about the editor picker dialog. This is here you select the type of property bla bla bla.",
placement: "left"
title: "Editor picker",
content: "<p>In the editor picker dialog we can pick one of the many build in editor.</p>"
},
{
element: "[data-element~='overlay-editor-picker'] [data-element='editor-Umbraco.MediaPicker2']",
title: "Select the Date editor",
content: "Something something something about the editor settings dialog",
event: "click",
placement: "left"
element: "[data-element~='overlay-editor-picker'] [data-element='editor-Umbraco.TextboxMultiple']",
title: "Select editor",
content: "Select the <b>Textarea</b> editor which allows the content editor to enter long texts",
event: "click"
},
{
element: "[data-element~='overlay-editor-settings']",
title: "Editor settings dialog",
content: "A loong story about the editor settings dialog...bla bla bla bla bla",
placement: "left"
title: "Editor settings",
content: "Each editor can have individual settings. We don't need to change any of these now."
},
{
element: "[data-element~='overlay-editor-settings'] [data-element='overlay-submit']",
title: "Submit the editor settings dialog",
content: "Click submit to save your changes",
event: "click",
placement: "top"
title: "Save editor",
content: "Click <b>Submit</b> to save the editor and any changes you may have made to the editor settings.",
event: "click"
},
{
element: "[data-element~='overlay-property-settings'] [data-element='overlay-submit']",
title: "Submit the property settings dialog",
content: "Click submit to save your changes",
event: "click",
placement: "top"
title: "Save property",
content: "Click <b>Submit</b> to add the property",
event: "click"
},
{
element: "[data-element='button-group-primary']",
title: "Submit the property settings dialog",
content: "Click submit to save your changes",
event: "click",
placement: "top"
title: "Save the document type",
content: "Click <b>Save</b> to create your document type",
event: "click"
}
]
};
@@ -175,55 +150,31 @@ function startUpDynamicContentController(dashboardResource, assetsService, tourS
"steps": [
{
element: "[data-element='tree-root']",
title: "Open the content context menu",
content: "Bla bla bla bla bla",
event: "click"
title: "Open context menu",
content: "<p>Open the context menu by hovering the root of the content section.</p><p>Now click the <b>three small dots</b> to the right</p>",
event: "click",
clickElement: "[data-element='tree-root'] [data-element='tree-item-options']"
},
{
element: "[data-element='action-create-home']",
title: "Navigate to the settings sections",
content: "Select the document type Home we have created",
title: "Create Home page",
content: "<p>Click on <b>Home</b> to create a new page of type <i>Home</i></p>",
event: "click"
},
{
element: "[data-element='editor-content'] [data-element='editor-name-field']",
title: "Add name",
content: "Enter name of new document type"
title: "Give your new page a name",
content: "<p>Our new page needs a name. Enter <b>Home</b> in the field and click <b>Next</b></p>"
},
{
element: "[data-element='editor-content'] [data-element='property-welcomeText']",
title: "Add a welcome text",
content: "<p>Add content to the <b>Welcome Text</b> field</p><p>If you don't have any ideas here is a start:<br/> <pre>I am learning Umbraco. High Five I Rock #H5IR</pre></p>"
},
{
element: "[data-element='editor-content'] [data-element='button-group-primary']",
title: "Save and publish",
content: "Save and publish your new page",
event: "click"
},
{
element: "[data-element='editor-content'] [data-element='button-group-toggle']",
title: "Unpublish",
content: "First open the publish menu",
event: "click"
},
{
element: "[data-element='editor-content'] [data-element='button-group-secondary-1']",
title: "Unpublish",
content: "Then click the unpublish button",
event: "click"
},
{
element: "[data-element='editor-content'] [data-element='button-group-toggle']",
title: "Save",
content: "Open the publish menu again",
event: "click"
},
{
element: "[data-element='editor-content'] [data-element='button-group-secondary-0']",
title: "Save",
content: "click the save button",
event: "click"
},
{
element: "[data-element='editor-content'] [data-element='button-group-primary']",
title: "Save",
content: "click the save button",
content: "<p>Now click the <b>Save and publish</b> button to save and publish your changes</p>",
event: "click"
}
]
@@ -242,130 +193,67 @@ function startUpDynamicContentController(dashboardResource, assetsService, tourS
"steps": [
{
element: "#applications [data-element='section-settings']",
title: "Navigate to the settings sections",
content: "In the settings section we will find the templates",
title: "Navigate to the settings section",
content: "In the <b>Settings</b> section you will find the templates for all your document types",
event: "click"
},
{
element: "#tree [data-element='tree-item-templates']",
title: "Template tree item",
content: "Hover the templates tree item and click the three small dots",
title: "Expand the Templates node",
content: "<p>To see all our templates click the <b>small triangle</b> to the left of the templates node</p>",
event: "click",
clickElement: "#tree [data-element='tree-item-templates'] [data-element='tree-item-expand']"
},
{
element: "#tree [data-element='tree-item-templates'] [data-element='tree-item-Home']",
title: "Open Home template",
content: "Click the home template to edit it",
content: "<p>Click the <b>Home</b> template to open and edit it</p>",
event: "click"
},
{
element: "[data-element='editor-templates'] [data-element='editor-name-field']",
title: "Give your template a name",
content: "Create a new template"
},
{
element: "[data-element='editor-templates'] [data-element='code-editor']",
title: "Give your template a name",
content: "Create a new template"
title: "Edit template",
content: '<p>Templates can be edited here or in your favorite code editor.</p><p>To render the value we entered on the <b>Home</b> page add the following to the template:<br/> <pre>@Model.Content.GetPropertyValue("welcomeText")</pre></p>'
},
{
element: "[data-element='editor-templates'] [data-element='button-save']",
title: "Give your template a name",
content: "Create a new template",
title: "Save the template",
content: "Click the save button and your template will be saved",
event: "click"
}
]
};
tourService.startTour(tour);
}
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",
placement: "right"
},
{
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']",
placement: "bottom"
},
{
element: "#dialog [data-element='action-documentType']",
title: "Create document type",
content: "Click the option to create a document type with a template",
event: "click",
placement: "bottom"
},
{
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",
placement: "bottom"
},
{
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",
placement: "bottom"
}
]
};
tourService.startTour(tour);
}
function startTourSix() {
function startTourFour() {
var tour = {
"options": {
"name": "Create a document type for a sub page",
"alias": "umbIntroCreateSubPageDocType"
"name": "View Home page",
"alias": "umbIntroViewHomePage"
},
"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",
element: "#tree [data-element='tree-item-Home']",
title: "Open the Home page",
content: "<p>Click the <b>Home</b> page to open it</p>",
event: "click"
},
{
element: "[data-element='editor-content'] [data-element='tab-Generic properties']",
title: "Properties",
content: "<p>Under the properties tab you will find default information about the content item</p>",
event: "click"
},
{
element: "[data-element='editor-content'] [data-element='property-_umb_urls']",
title: "Open page",
content: "<p>Click the <b>Link</b> to view your page.</p><p>Tip: Click the preview button in the bottom right corner to preview changes without publishing them</p>",
event: "click",
placement: "bottom"
},
{
element: "[data-element='editor-content'] [data-element='tab-Tab 2']",
title: "Navigate to tab 2",
content: "Bla bla bla bla bla",
event: "click",
placement: "bottom"
},
{
element: "[data-element='editor-content'] [data-element='property-prop2']",
title: "This is the second date picker",
content: "We have a lot of those",
placement: "bottom"
},
{
element: "[data-element='editor-content'] [data-element='property-andTheLastTextArea']",
title: "This is the second date picker",
content: "We have a lot of those",
placement: "bottom"
clickElement: "[data-element='editor-content'] [data-element='property-_umb_urls'] a[target='_blank']"
}
]
};
@@ -378,85 +266,79 @@ function startUpDynamicContentController(dashboardResource, assetsService, tourS
var tour = {
"options": {
"name": "Create a document type for a sub page",
"name": "The media library",
"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",
placement: "right"
content: "The media section is where you will manage all your media items",
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",
title: "Create a new folder",
content: "<p>Hover the media root and click the <b>three small dots</b> on the right side of the item</p>",
event: "click",
clickElement: "#tree [data-element='tree-root'] [data-element='tree-item-options']",
view: "treeOptions",
placement: "bottom"
clickElement: "#tree [data-element='tree-root'] [data-element='tree-item-options']"
},
{
element: "#dialog [data-element='action-Folder']",
title: "Select create folder",
content: "Bla bla bla bla bla",
event: "click",
placement: "right"
title: "Create a new folder",
content: "<p>Select the <b>Folder</b> options to create a new folder</p>",
event: "click"
},
{
element: "[data-element='editor-media'] [data-element='editor-name-field']",
title: "Give your folder a name",
content: "Call it 'My Folder'",
placement: "bottom"
title: "Enter a name",
content: "<p>Enter <b>'My folder'</b> in the field</p>"
},
{
element: "[data-element='editor-media'] [data-element='button-save']",
title: "Save the new folder",
content: "Bla bla bla bla bla",
event: "click",
placement: "top"
title: "Save the folder",
content: "<p>Click the <b>Save</b> button to create the new folder</p>",
event: "click"
},
{
element: "[data-element='editor-media'] [data-element='dropzone']",
title: "Upload images",
content: "Bla bla bla bla bla",
placement: "left"
content: "<p>In the upload area you can upload your media items.</p><p>Click the <b>Upload button</b> and select some images on your computer and upload them.</p>",
event: "click",
clickElement: "[data-element='editor-media'] [data-element='button-upload-media']"
},
{
element: "[data-element='editor-media'] [data-element='media-grid-item-3']",
title: "Select media item",
content: "Bla bla bla bla bla",
element: "[data-element='editor-media'] [data-element='media-grid-item-0']",
title: "View media item details",
content: "Hover the media item and <b>Click the purple bar</b> to view details about the media item",
event: "click",
clickElement: "[data-element='editor-media'] [data-element='media-grid-item-3'] [data-element='media-grid-item-edit']",
placement: "left"
clickElement: "[data-element='editor-media'] [data-element='media-grid-item-0'] [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"
title: "The uploaded image",
content: "<p>Here you can see the image you have uploaded.</p><p>Use the dot in the center of the image to set a focal point on the image.</p>"
},
{
element: "[data-element='editor-media'] [data-element='property-umbracoBytes']",
title: "Something about the size",
content: "Bla bla bla bla bla"
title: "Image size",
content: "<p>You will also find other details about the image, like the size</p><p>You can add extra properties to an image by creating or editing the <b>Media types</b></p>"
},
{
element: "[data-element='editor-media'] [data-element='tab-Generic properties']",
title: "Go to the properties tab",
content: "Bla bla bla bla bla",
title: "Properties",
content: "Like the content section you can also find default properties about the media item. You will find these under the properties tab",
event: "click"
},
{
element: "[data-element='editor-media'] [data-element='property-_umb_urls']",
title: "Something about the path",
content: "Bla bla bla bla bla"
title: "Link to media",
content: "The path to the media item..."
},
{
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"
title: "Last edited",
content: "...and information about when the item has been created and edited."
}
]
};

View File

@@ -5,38 +5,28 @@
<div>
<div>
<h5>Create your first document type</h5>
<button ng-click="vm.startTour()">Start tour</button>
<h5>Create the first document type</h5>
<button ng-click="vm.startTour()">Start</button>
</div>
<div>
<h5>Create content</h5>
<button ng-click="vm.startTourTwo()">Start tour 2</button>
<h5>Create page</h5>
<button ng-click="vm.startTourTwo()">Start</button>
</div>
<div>
<h5>Render in template</h5>
<button ng-click="vm.startTourThree()">Start tour 3</button>
<h5>Render content in template</h5>
<button ng-click="vm.startTourThree()">Start</button>
</div>
<div>
<h5>Preview website</h5>
<button ng-click="vm.startTour()">Start tour</button>
<h5>View Home page</h5>
<button ng-click="vm.startTourFour()">Start</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>
<h5>The media library</h5>
<button ng-click="vm.startTourSeven()">Start</button>
</div>
</div>