0byt3m1n1
Path:
/
home
/
mgatv524
/
pmj.mgaplay.com.br
/
views
/
[
Home
]
File: user-welcome.twig
<script type="text/javascript"> {% set appName = theme.getThemeConfig("app_name") %} {% set horizontalNav = currentUser.getOptionValue("navigationMenuPosition", theme.getSetting("NAVIGATION_MENU_POSITION", "vertical")) == "horizontal" %} $(document).ready(function () { var layoutEditorTour, mainTour, authDisplayTour, schedulingTour, no_nav_template, next_template, final_template, end_tour_message; final_template = "<div class='popover final_template popover-double-width tour' role='tooltip'><div class='arrow'></div><h3 class='popover-header'></h3><div class='popover-body'></div><div class='popover-navigation'><button class='btn btn-primary' data-role='backToWelcome'>{% trans "Go back to Welcome Page!" %}</button><button class='btn btn-secondary' data-role='end'>{% trans "Close" %}</button></div></div>"; final_template_2 = "<div class='popover final_template_2 popover-double-width tour' role='tooltip'><div class='arrow'></div><h3 class='popover-header'></h3><div class='popover-body'></div><div class='popover-navigation'><button class='btn btn-secondary' data-role='end'>{% trans "End Tour" %}</button></div></div>"; next_template = "<div class='popover next_template popover-normal-width tour' role='tooltip'><div class='arrow'></div><button type='button' data-role='end' class='close padminus'>×</button><h3 class='popover-header'></h3><div class='popover-body'></div><div class='popover-navigation'><button class='btn btn-primary pull-right' data-role='next'>{% trans "Next" %}</button></div></div>"; no_nav_template = "<div class='popover no_nav_template popover-normal-width tour' role='tooltip'><div class='arrow'></div><button type='button' data-role='end' class='close padminus'>×</button><h3 class='popover-header'></h3><div class='popover-body'></div></div>"; end_tour_message = '{% trans "End Tour!" %}'; window.cmsTours = { mainTour: mainTour, authDisplayTour: authDisplayTour, schedulingTour: schedulingTour, layoutEditorTour: layoutEditorTour }; /* 1 [mainTour] : Create contend tour that goes through the layout designer */ var firstSteps = {% if horizontalNav %} // First steps for the mainTour based on the menu orientation [{ element: ".navbar-nav:eq(0) > li:eq(0)", placement: "bottom", content: "{% trans "The CMS main menu allows for navigation to all key areas." %}", template: next_template }, { // 1 element: '.navbar-nav:eq(0) > li:eq(2) a.dropdown-item[href="/layout/view"]', placement: "right", content: "{% trans "Start by clicking on <b>Layouts</b> under the Design section of the main menu." %}", reflex: true, template: no_nav_template, onShow: function (tour) { // Open dropdown $('.navbar-nav:eq(0) > li:eq(2) .dropdown-menu').addClass('show'); } }]; {% else %} [{ element: ".sidebar-main", placement: "right", boundary: "window", content: "{% trans "The CMS main menu allows for navigation to all key areas." %}", template: next_template }, { // 1 element: "#sidebar-wrapper .sidebar-list:eq(3) a", placement: "right", boundary: "window", content: "{% trans "Start by clicking on <b>Layouts</b> under the Design section of the main menu." %}", reflex: true, template: no_nav_template }]; {% endif %} cmsTours.mainTour = new Tour({ name: 'mainTour', debug: false, onModalHidden: function(tour, stepNumber) { // If the modal is closed in step 4. go to previous step ( 3 ) // if the step was 5, go to next ( 6 ) if(stepNumber == 4) { return 3; } else if(stepNumber == 5) { return 6; } return false; }, steps: firstSteps.concat([ { element: '#layouts_wrapper #layouts', placement: "top", backdrop: true, delayOnElement: { delayElement: "element", maxDelay: 5000 }, content: "{% trans "This is the layout grid and from here is where you can add new and manage existing layouts." %}", template: next_template, onElementUnavailableStep: 1 }, { // 3 element: ".widget-action-menu button.btn-success", placement: "left", content: "{% trans "Create a new layout by clicking on <b>Add Layout</b>" %}", reflex: true, template: no_nav_template, onElementUnavailableStep: 1 }, { element: ".modal-footer #layout-create-stepper-next-button", placement: "left", content: "{% trans "Select a layout template and press <b>Next</b>" %}", reflex: true, template: no_nav_template, onElementUnavailableStep: 3 }, { element: "#name", placement: "bottom", container: '.bootbox', content: "{% trans "Name your layout so you can easily identify it for scheduling." %}", reflex: "click change", template: no_nav_template, onElementUnavailableStep: 3 }, { // 6 element: "#layout-create-stepper-next-button", container: '.bootbox', placement: "top", reflex: true, content: "{% trans "Press <b>Save</b>." %}", template: no_nav_template, onElementUnavailableStep: 3 }, { orphan: true, delayOnElement: { delayElement: "#layout-editor", maxDelay: 10000 }, content: "{% trans "This is the layout designer screen where you will add and configure content." %}", template: next_template }, { // 8 content: "{% trans "A status indicator is shown to show you the current 'play' status of the layout." %}", element: "#layout-editor #layout-info-status i", placement: "right", template: next_template, delayOnElement: { delayElement: "element", maxDelay: 5000 } }, { content: "{% trans "Hover over the status icon to see further information!" %}", element: "#layout-editor #layout-info-status i", placement: "bottom", template: next_template }, { // 10 content: "{% trans "The total duration of the layout will be displayed here in seconds." %}", element: "#layout-editor #layoutInfo .layout-info-duration", placement: "bottom", template: next_template }, { content: "{% trans "This is the Layout View, where you can view your designs as you create them." %}", element: "#layout-editor #layout-viewer-container", placement: "bottom", backdrop: true, template: next_template }, { // 12 content: "{% trans "Here is the Play button which you use to Preview your Layout designs to ensure that it will play as you intend." %}", element: "#layout-editor #layout-editor-bottombar #play-btn", placement: "bottom", template: next_template }, { content: "{% trans "This edit icon will open the Edit Layout mode so you can add, position and resize Regions." %}", element: "#layout-editor #layout-editor-bottombar #navigator-edit-btn", placement: "bottom", template: next_template }, { // 14 content: "{% trans "Use the Edit forms to configure all aspects of your Layout including Regions and Widgets." %}", element: "#properties-panel", placement: "left", backdrop: true, template: next_template }, { content: "{% trans "This is the Layout Timeline which displays the the duration of individual Widgets and will give you an overview of how your media will play on the Layout." %}", element: ".timeline-panel", placement: "top", backdrop: true, boundary: "window", template: next_template }, { // 16 content: "{% trans "The Toolbar includes buttons for you to add media items straight from your Library, apply actions using the Tools menu and assign Widgets to your Layouts." %}", element: "#layout-editor-toolbar nav .toolbar-menu-left", placement: "right", template: next_template }, { content: "{% trans "Let's create a simple layout...Start by clicking on the edit icon." %}", element: "#layout-editor-bottombar #navigator-edit-btn", placement: "top", reflex: true, template: no_nav_template }, { // 18 content: "{% trans "Click anywhere inside the Region to select it so that we can edit." %}", element: '#layout-navigator div[data-type="region"]:last', smartPlacement: true, reflex: true, template: no_nav_template, delay: 400, delayOnElement: { delayElement: "element", maxDelay: 1000 } }, { content: "{% trans "Grab the Region handle, and drag to resize." %}", element: '#layout-navigator div[data-type="region"]:last .ui-resizable-se', placement: "bottom", reflex: "mouseenter", template: no_nav_template, delay: 500, delayOnElement: { delayElement: "element", maxDelay: 1000 } }, { // 20 content: "{% trans "Once positioned, click outside of the Region so that it's deselected or click the blue Save button on the Edit Layout form." %}", element: "#properties-panel button[data-action='save']", placement: "bottom", reflex: true, template: no_nav_template, delay: 1000, delayOnElement: { delayElement: "element", maxDelay: 1000 } }, { content: "{% trans "Click on the back arrow to exit the edit mode and return to the Layout View." %}", element: "#layout-navigator #goBackBtn", placement: "right", delay: 500, reflex: true, template: no_nav_template }, { // 22 container: '#layout-editor', content: "{% trans "You will now have an empty Region, resized and positioned on a default black background." %}", element: '#layout-timeline .designer-region:last', placement: "bottom", template: next_template, delay: 1000, boundary: "window", delayOnElement: { delayElement: "element", maxDelay: 4000 } }, { content: "{% trans "Now let's change the background from black to a colour." %}", element: '#properties-panel', placement: "left", template: next_template, onShown: function (tour) { // If properties panel is not the right one, go to previous step if ($('#properties-panel #layoutEditForm').length === 0) { tour.goTo(21); return false; } } }, { // 24 content: "{% trans "Click in the Background Colour field on the Edit Layout form and select a colour using the colout picker." %}", element: '#properties-panel input#backgroundColor', placement: "left", boundary: "window", template: no_nav_template, reflex: 'click change' }, { content: "{% trans "Click the Save button." %}", element: '#properties-panel button#save', placement: "left", template: no_nav_template, reflex: true }, { // 26 content: "{% trans "Let's add some content! Click the Widgets button on the bottom toolbar to open." %}", element: "#layout-editor-toolbar #btn-menu-0", delay: 500, placement: "right", reflex: true, template: no_nav_template, onShown: function (tour) { // If widgets are selected already, go to next step if ($('#layout-editor-toolbar #btn-menu-1.active').length > 0) { tour.goTo(27); return false; } } }, { content: "{% trans "Scroll or use the search field to find the 'Text' Widget." %}", element: "#layout-editor-toolbar #content-0 .toolbar-pane-container", placement: "right", template: next_template, boundary: "window", delay: 500 }, { // 28 content: "{% trans "Add the Text Widget by using the 'Grab' option and dragging to the Region or click the '+' button to select then click in the target Region. Click Next after adding the Widget." %}", element: '#layout-editor-toolbar .toolbar-card[data-sub-type="text"]', boundary: "window", placement: "right", template: next_template, onShown: function (tour) { // Check if the text widget is into view function isScrolledIntoView(elem, parent) { var parentViewLeft = $(parent).offset().left; var parentViewRight = parentViewLeft + $(parent).width(); var elemLeft = $(elem).offset().left; var elemRight = elemLeft + $(elem).width(); return ((elemRight <= parentViewRight) && (elemLeft >= parentViewLeft)); } // Go back if the element isn't still visible if (!isScrolledIntoView('#layout-editor-toolbar .toolbar-card[data-sub-type="text"]', '.toolbar-pane-container')){ tour.goTo(27); return false; } }, next: 29 }, { content: "{% trans "The Timeline will now update and show that the Text Widget has been added." %}", element: '#layout-timeline', placement: "bottom", backdrop: true, template: next_template, onShown: function (tour) { // If we don't have widget yet, got to the add step if ($('#layout-timeline .designer-widget').length === 0) { tour.goTo(28); return false; } }, next: 30 }, { // 30 content: "{% trans "We can now edit the Text Widget, Click on the Widget in the Timeline (it will go green once selected)." %}", element: '#layout-timeline .designer-widget:first', placement: "top", template: next_template, boundary: "window", onShown: function (tour) { // If the widget is selected, move to the next step if ($('#layout-timeline .designer-widget').hasClass('selected-widget')) { tour.goTo(31); return false; } }, }, { content: "{% trans "Now click on the edit icon so we can easily include some text." %}", element: '#layout-viewer .fa-edit', placement: "right", template: no_nav_template, onShown: function (tour) { // If properties panel is not the right one, go to previous step if ($('#properties-panel .form-title-widget').length === 0) { tour.goTo(30); return false; } }, reflex: true, delay: 500 }, { // 32 content: "{% trans "Add / edit text and format using the inline editor. The thin visible line is showing your Region border. Ensure that any text remains within these lines." %}", element: '#layout-viewer .viewer-element .cke_editable', placement: "bottom", boundary: "body", template: next_template, delay: 500 }, { content: "{% trans "You can optionally give this Widget a name for easier identification." %}", element: '#properties-panel input#name', placement: "left", template: no_nav_template, boundary: "window", reflex: 'click change', }, { // 34 content: "{% trans "Let's override the default time. Click in the Set a duration box." %}", element: '#properties-panel input#useDuration', placement: "left", template: no_nav_template, boundary: "window", reflex: true, delay: 500 }, { content: "{% trans "Enter a time in seconds to override the default." %}", element: '#properties-panel input#duration', placement: "left", template: no_nav_template, boundary: "window", reflex: 'click change', delay: 500 }, { // 36 content: "{% trans "Click Save!" %}", element: '#properties-panel button#save', placement: "left", template: no_nav_template, reflex: true, delay: 500, onShown: function (tour) { // If the input duration is not visible, go back to the checkbox step if (!$('#properties-panel input#duration').is(":visible")) { tour.goTo(34); return false; } } }, { content: "{% trans "The Text Widget will now show the updated duration for the Region in the Timeline." %}", element: '#layout-timeline .designer-widget:first .widgetLabel .widgetDuration', placement: "top", boundary: "window", template: next_template, delayOnElement: { delayElement: "element", maxDelay: 4000 } }, { // 38 content: "{% trans "When happy with your Layout, you will need to set it to Publish before scheduling to Displays." %}", orphan: true, template: next_template }, { content: "{% trans "Do this by clicking on the menu on the top toolbar." %}", element: '#layout-editor-topbar li.navbar-submenu-options a#optionsContainerTop', placement: "left", reflex: true, template: no_nav_template }, { // 40 content: "{% trans "Select Publish!" %}", element: '#layout-editor-topbar #publishLayout', placement: "left", reflex: true, delayOnElement: { delayElement: "element", maxDelay: 4000 }, template: no_nav_template }, { element: '.bootbox .modal-content button.btn-bb-Publish', placement: "bottom", container: '.bootbox', content: "{% trans "You can Publish now or untick this option and provide your own Publish Date, confirm your selection by clicking Publish." %}", template: no_nav_template, reflex: true, delayOnElement: { delayElement: "element", maxDelay: 4000 } }, { // 42 content: "{% trans "Success! Your Layout is now ready for to be scheduled to Displays / Display Groups!" %}", orphan: true, template: next_template, delayOnElement: { delayElement: "#layout-editor.view-mode .container-designer", maxDelay: 10000 } }, { title: "Ready for more?", content: "{% trans "Go back to the Welcome page to learn more about other topics!" %}", orphan: true, template: final_template } ]) }); /* 2 [schedulingTour] : Scheduling tour */ cmsTours.schedulingTour = new Tour({ name: 'schedulingTour', debug: false, onModalHidden: function(tour, stepNumber) { // If the modal is closed between step 6 and 18, go to step 5 automaticaly, if the step was 19 go to next step if(stepNumber > 5 && stepNumber < 19) { return 5; } else if(stepNumber == 19) { return 20; } return false; }, steps: [ { // 0 content: "{% trans "Schedule Layouts / Campaigns to tell the system when they should show and on what Display(s)." %}", orphan: true, template: next_template }, {% if horizontalNav %} { element: '.navbar-nav:eq(0) > li:eq(1) a[href="/schedule/view"]', placement: "right", content: "{% trans "Start by clicking on Schedule on the main menu." %}", reflex: true, template: no_nav_template, onShow: function (tour) { // Open dropdown $('.navbar-nav:eq(0) > li:eq(1) .dropdown-menu').addClass('show'); } }, {% else %} { element: ".sidebar-list:eq(0)", placement: "right", boundary: "window", content: "{% trans "Start by clicking on Schedule on the main menu." %}", reflex: true, template: no_nav_template }, {% endif %} { // 2 element: '#CalendarContainer', delayOnElement: { delayElement: 'element', maxDelay: 5000 }, placement: "top", backdrop: true, content: "{% trans "This is the schedule view which will show the current month by default." %}", template: next_template }, { content: "{% trans "Select the Display / Display Group from the list you want to schedule to." %}", element: ".xibo-calendar-controls #DisplayList + span", placement: "right", reflex: 'click change', template: no_nav_template }, { // 4 content: "{% trans "Any current schedules in the system will show in the calendar for the selected Display(s)." %}", orphan: true, template: next_template }, { element: '.xibo-calendar-controls button.XiboFormButton[href="/schedule/form/add"]', reflex: true, placement: "bottom", content: "{% trans "Create a new schedule by clicking the Add Event button." %}", template: no_nav_template }, { // 6 content: "{% trans "Use the drop down to select the Event type to schedule." %}", element: ".bootbox #scheduleAddForm #eventTypeId", container: '.bootbox', placement: "top", template: next_template, //onElementUnavailableStep: 5 }, { element: '.bootbox #scheduleAddForm select[id="displayGroupIds[]"] + span', content: "{% trans "Check to make sure the correct Display(s) have been selected." %}", placement: "top", template: next_template, onElementUnavailableStep: 5 }, { // 8 content: "{% trans "Now you need to select Custom times or set to be Always showing. You can also select Dayparts from the main menu to create your own predefined chunks of time for selection." %}", orphan: true, template: next_template }, { content: "{% trans "Use the drop down to select the type of Dayparting needed for the Event." %}", element: ".bootbox #scheduleAddForm #dayPartId", container: '.bootbox', placement: "top", template: next_template, onElementUnavailableStep: 10 }, { // 10 content: "{% trans "Give a Start Time!" %}", element: ".bootbox #scheduleAddForm .starttime-control .datePickerHelper", container: '.bootbox', placement: "top", reflex: 'focusout', template: no_nav_template, onElementUnavailableStep: 12 }, { content: "{% trans "and End Time!" %}", element: ".bootbox #scheduleAddForm .endtime-control .datePickerHelper", container: '.bootbox', placement: "top", reflex: 'focusout', template: no_nav_template, onElementUnavailableStep: 12 }, { // 12 content: "{% trans "If you selected an Always Daypart, you do not need to give start and end times." %}", orphan: true, template: next_template }, { content: "{% trans "Use the Layout / Campaign selector to pick the Layout / Campaign you want to show." %}", element: ".bootbox #scheduleAddForm .layout-control .select2-container", container: '.bootbox', placement: "top", template: next_template, onElementUnavailableStep: 14 }, { // 14 content: "{% trans "Enter a number to determine a Display Order when scheduling more than one Event to show at the same time." %}", element: ".bootbox #scheduleAddForm #displayOrder", container: '.bootbox', placement: "bottom", placement: "top", template: next_template, onElementUnavailableStep: 5, delay: 500 }, { content: "{% trans "When left blank Events scheduled at the same time will be shown in fair rotation." %}", orphan: true, template: next_template }, { // 16 content: "{% trans "Assign a Priority to tell the system that the Event needs to appear in precedence over other Events scheduled at the same time." %}", element: ".bootbox #scheduleAddForm #isPriority", container: '.bootbox', placement: "top", template: next_template, onElementUnavailableStep: 5 }, { content: "{% trans "A higher Priority number will take precedence over Priorities with a lower number." %}", orphan: true, template: next_template }, { // 18 content: "{% trans "Run at CMS Time should only be used for Events you need to run according to the set Timezone for the CMS and not the local time set on the Player." %}", orphan: true, template: next_template }, { element: '.bootbox .save-button', content: "{% trans "Save!" %}", container: '.bootbox', placement: "top", template: no_nav_template, onShow: function() { // Scroll to save button if($('.bootbox .save-button').length > 0) { $('.bootbox').animate({ scrollTop: $('.bootbox .save-button').offset().top }, 500); } }, onElementUnavailableStep: 5 }, { // 20 content: "{% trans "The created Event icon will now be available to view in the calendar. Mouse over it to see further details and click on it to make any edits." %}", template: next_template, orphan: true }, { content: "{% trans "Now you have grasped the basics to create Layouts and Schedule them, take a look at the User Manual for top tips and further guidance!" %}", orphan: true, template: next_template }, { // 22 title: "Ready for more?", content: "{% trans "Go back to the Welcome page to learn more about other topics!" %}", orphan: true, template: final_template } ] }); /* 3 [authDisplayTour] : Authorise Displays tour */ cmsTours.authDisplayTour = new Tour({ name: 'authDisplayTour', debug: false, steps: [ { // 0 content: "{% trans "What is a Display? A Display is the connection from the Player to the CMS which groups content and schedule information." %}", orphan: true, template: next_template }, { content: "{% trans "Once the Player software has been installed, licensed (if applicable) and registered with the CMS" %}", orphan: true, template: next_template }, { // 2 content: "{% trans "Displays can be connected to the CMS over the API using 'XMDS' and entering the CMS URL / Key or by using the Add Display (code) button in the CMS." %}", orphan: true, template: next_template }, {% if horizontalNav %} { element: '.navbar-nav:eq(0) > li:eq(4) a[href="/display/view"]', placement: "right", content: "{% trans "Click on Displays under the Displays section of the main menu." %}", reflex: true, template: no_nav_template, onShow: function (tour) { // Open dropdown $('.navbar-nav:eq(0) > li:eq(4) .dropdown-menu').addClass('show'); } }, {% else %} { element: ".sidebar-list a[href='/display/view']", boundary: "window", placement: "right", content: "{% trans "Click on Displays under the Displays section of the main menu." %}", reflex: true, template: no_nav_template }, {% endif %} { // 4 element: '.widget .XiboGrid #displays', backdrop: true, placement: 'top', delayOnElement: { delayElement: 'element', maxDelay: 5000 }, content: "{% trans "This is the Display grid which shows all Displays that have been added and registered." %}", template: next_template }, { element: 'button[href="/display/form/addViaCode"]', content: "{% trans "The Add Display (code) button allows for connection to the CMS by providing a 6 character 'Activation Code' shown on the Player screen, for supported Players. Please refer to the documentation for more information." %}", template: next_template, placement: "left" }, { // 6 element: 'button#refreshGrid', content: "{% trans "If you have yet to complete the Player Installation you can do that now. Click 'Refresh' once installation is complete to continue." %}", placement: "bottom", template: next_template }, { element: '#displays tbody tr:first td button.dropdown-toggle', content: "{% trans "Use the row menu for the Display!" %}", reflex: true, placement: "left", template: no_nav_template }, { // 8 element: '#displays tbody tr:first td div.dropdown-menu .display_button_authorise', content: "{% trans "Now select Authorise!" %}", reflex: true, placement: "left", template: no_nav_template }, { element: '.bootbox .save-button', content: "{% trans "Click Yes to confirm!" %}", reflex: true, container: '.bootbox', placement: "bottom", template: no_nav_template }, { // 10 element: '#displays tbody tr:first td button.dropdown-toggle', content: "{% trans "You may also need to select a Default Layout for your new Player to run, so that in the event you have no scheduled content, the Player will always have a Layout to show." %}", placement: "left", template: next_template, delayOnElement: { delayElement: "element", maxDelay: 4000 } }, { element: '#displays tbody tr:first td button.dropdown-toggle', content: "{% trans "Set this by using the row menu and selecting Default Layout, use the drop down to select the Layout to use." %}", placement: "bottom", template: next_template }, { // 12 title: "Ready for more?", content: "{% trans "Go back to the Welcome page to learn more about other topics!" %}", orphan: true, template: final_template } ] }); /* 4 [layoutEditorTour] : Tour that runs within the layout designer tool */ cmsTours.layoutEditorTour = new Tour({ debug: false, name: 'layoutEditorTour', steps: [ { orphan: true, content: "{% trans "This is the layout designer screen where you will add and configure content. By default, your layout is in read-only mode, and needs to be checked out, to enable editing." %}", template: next_template, }, { // 1 element: "#layout-editor-toolbar #read-only-message", container: '#layout-editor-toolbar .container-toolbar', reflex: true, content: "{% trans "Click on this message to checkout the Layout." %}", placement: "top", delayOnElement: { delayElement: "element", maxDelay: 1000 }, template: no_nav_template, onElementUnavailableStep: 2 }, { element: "#layout-viewer-container", content: "{% trans "This is the <b>Preview</b> window, that shows previews for layouts, regions and widgets." %}", placement: "bottom", backdrop: true, template: next_template }, { // 3 content: "{% trans "This is the <b>Editor</b>, where we can change layout properties, region options and assigned widgets." %}", element: "#properties-panel", placement: "bottom", backdrop: true, template: next_template }, { content: "{% trans "Let's open the Navigator edit mode. Click on the edit button." %}", element: "#layout-editor #layout-editor-bottombar #navigator-edit-btn", placement: "top", reflex: true, template: no_nav_template }, { // 5 element: '#layout-navigator', placement: "bottom", content: "{% trans "This is the Navigator edit mode, where you can edit regions and change their properties." %}", template: next_template }, { content: "{% trans "Click back to go back to the main editor." %}", element: "#layout-navigator #goBackBtn", placement: "top", reflex: true, template: no_nav_template }, { // 7 content: "{% trans "This is the <b>Layout Timeline</b>, which shows the total layout duration as well as the duration of assigned media." %}", element: "#layout-timeline", placement: "bottom", backdrop: true, template: next_template }, { content: "{% trans "This is the <b>Toolbar</b>, used to interact with the layout designer." %}", element: "#layout-editor-toolbar nav", placement: "right", boundary: "window", template: next_template }, { // 9 content: "{% trans "Use the Toolbar tabs to select <b>Widgets</b>" %}", element: "#layout-editor-toolbar #btn-menu-0", placement: "right", reflex: true, template: no_nav_template, onShown: function (tour) { // If widgets are selected already, go to next step if ($('#layout-editor-toolbar #btn-menu-0.active').length > 0) { tour.goTo(10); return false; } } }, { content: "{% trans "These are the widgets you can add." %}", element: "#layout-editor-toolbar #content-0 .toolbar-pane-container", placement: "right", delayOnElement: { delayElement: "element", maxDelay: 4000 }, template: next_template }, { // 11 content: "{% trans "You can take a look at how your layout will look on your displays by clicking on the Play button on the Preview window." %}", element: '#layout-editor-bottombar #play-btn', placement: "bottom", delayOnElement: { delayElement: "element", maxDelay: 2000 }, template: next_template }, { element: '#layout-editor-topbar li.navbar-submenu-options', content: "{% trans "When happy with your layout you will need to publish before being able to schedule to displays." %}", placement: "bottom", template: next_template, delayOnElement: { delayElement: "element", maxDelay: 2000 } }, { // 13 title: "Success!", content: "{% trans "And that is how easy it is to use the layout designer. Ready for more? Jump into the User Manual for guidance and top tips!" %}", orphan: true, template: final_template_2 } ] }); // Handle back to welcome button click $('body').on('click', '.tour button[data-role="backToWelcome"]', function() { var tourPlaying = localStorage.getItem('tour_playing'); cmsTours[tourPlaying].end(); window.location.href = '{{ url_for("welcome.view") }}'; }); // Fix for close button title: Add the title popup message with jquery $('body').on('mouseenter', '.tour .close', function() { $(this).attr('title', end_tour_message); }); // Check if a tour was playing ( && not ended ) already and restart it var tourPlaying = localStorage.getItem('tour_playing'); if(tourPlaying != '' && tourPlaying != null && localStorage.getItem(tourPlaying + '_end') != 'yes') { cmsTours[tourPlaying].start(Number(localStorage[tourPlaying + '_current_step'])); } }); </script>