0byt3m1n1
Path:
/
home
/
mgatv524
/
public_html
/
somares
/
views
/
[
Home
]
File: user-welcome.twig
<style type="text/css"> .popover-double-width { max-width: 652px !important; background-color: #d9edf7 !important; } .popover-normal-width { max-width: 552px !important; min-width: 150px; background-color: #d9edf7 !important; } .padminus { padding-right: 5px !important; } .popover-content-large{ font-size: large !important; } .tour .popover-title{ background-color: #b2bfdc; } </style> <script type="text/javascript"> {% set appName = theme.getThemeConfig("app_name") %} {% set horizontalNav = currentUser.getOptionValue("navigationMenuPosition", theme.getSetting("NAVIGATION_MENU_POSITION", "vertical")) == "horizontal" %} var hasSeenNewUserWizard = {% if currentUser.userTypeId != 0 %}{{currentUser.newUserWizard}}{% else %}-1{% endif %}; $(document).ready(function () { var tour, layoutDesignerTour, no_nav_template, start_template, next_template, final_template; final_template = "<div class='popover popover-double-width tour'><div class='arrow'></div><button type='button' data-role='end' class='close padminus'>×</button><h3 class='popover-title'></h3><div class='popover-content popover-content-large'></div><div class='popover-navigation'><button class='btn btn-default' data-role='end'>{% trans "Close" %}</button>"; next_template = "<div class='popover popover-normal-width tour'><div class='arrow'></div><button type='button' data-role='end' class='close padminus'>×</button><h3 class='popover-title'></h3><div class='popover-content popover-content-large'></div><div class='popover-navigation'><button class='btn btn-default btn-success pull-right' data-role='next'>{% trans "Next" %}</button>"; no_nav_template = "<div class='popover popover-normal-width tour'><div class='arrow'></div><button type='button' data-role='end' class='close padminus'>×</button><h3 class='popover-title'></h3><div class='popover-content popover-content-large'></div>"; start_template = "<div class='popover popover-double-width tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content popover-content-large'></div><div class='popover-navigation'><button class='btn btn-default btn-success' data-role='next'>{% trans "Get started with the basics" %}</button><button class='btn btn-default' data-role='end'>{% trans "Skip this tutorial" %}</button>"; // New wizard tour tour = window.tour = new Tour({ debug: false, framework: "bootstrap3", showProgressBar: false, // don't show the progress bar on this step only showProgressText: false, // don't show the progress text on this step only onEnd: function () { setNewUserWizardState(); }, steps: [ { // 0 orphan: true, placement: "bottom", title: "{% trans %}Welcome to the {{ appName }} CMS!{% endtrans %}", content: "{% trans "We'd like to take you on a short tour of the CMS to get you up and running quickly. If you already know your way around, you can skip the tutorial" %}", template: start_template }, {% if horizontalNav %} { element: ".navbar-nav:eq(0) > li:eq(0)", placement: "bottom", title: "", content: "{% trans "The CMS main menu allows for navigation to all key areas." %}", template: next_template }, { // 2 element: '.navbar-nav:eq(0) > li:eq(2)', placement: "right", title: "", content: "{% trans "Start by clicking on <b>Layouts</b> under the Design section of the main menu." %}", reflex: true, template: no_nav_template, onShown: function (tour) { // Open dropdown $('.navbar-nav:eq(0) > li:eq(2)').addClass('open'); } }, {% else %} { element: ".sidebar-main:eq(0)", placement: "right", title: "", content: "{% trans "The CMS main menu allows for navigation to all key areas." %}", template: next_template }, { // 2 element: ".sidebar-list:eq(3)", placement: "right", title: "", content: "{% trans "Start by clicking on <b>Layouts</b> under the Design section of the main menu." %}", reflex: true, template: no_nav_template }, {% endif %} { element: '#layouts_wrapper', placement: "top", backdrop: true, title: "", delayOnElement: { delayElement: "element", maxDelay: 10000 }, content: "{% trans "This is the layout grid and from here is where you can add new and manage existing layouts." %}", template: next_template }, { // 4 element: ".btn-success a", placement: "left", title: "", content: "{% trans "Create a new layout by clicking on <b>Add Layout</b>" %}", reflex: true, template: no_nav_template }, { element: "#name", placement: "bottom", title: "", delayOnElement: { delayElement: "element", maxDelay: 5000 }, content: "{% trans "Name your layout so you can easily identify it for scheduling." %}", reflex: "blur", template: no_nav_template }, { // 6 element: ".save-button", placement: "left", title: "", content: "{% trans "Press <b>Save</b>." %}", reflex: true, template: no_nav_template, delay: { show: 500, hide: 5000 }, onHidden: function (tour) { if ($(".form-error").length === 1) { tour.goTo(5); return false; } } }, { element: '#layout-editor', orphan: true, title: "", delayOnElement: { delayElement: "element", maxDelay: 10000 }, content: "{% trans "This is the layout designer screen where you will add and configure content." %}", template: next_template }, { // 8 title: "", content: "{% trans "This is the <b>Preview</b> window, that shows previews for layouts, regions and widgets." %}", element: "#layout-editor #layout-viewer-container", placement: "bottom", delayOnElement: { delayElement: "element", maxDelay: 2000 }, backdrop: true, template: next_template }, { title: "", content: "{% trans "This is the <b>Editor</b>, where we can change layout properties, region options and assigned widgets." %}", element: "#properties-panel-parent", placement: "bottom", delayOnElement: { delayElement: "element", maxDelay: 2000 }, backdrop: true, template: next_template }, { // 10 title: "", content: "{% trans "This is the <b>Layout Timeline</b>, which shows the total layout duration as well as the duration of assigned media." %}", element: "#timeline-container", placement: "top", delay: 500, backdrop: true, template: next_template }, { title: "", content: "{% trans "This is the <b>Toolbar</b>, used to interact with the layout designer." %}", element: "#layout-editor-toolbar", placement: "top", delay: 500, backdrop: true, template: next_template, onElementUnavailable: tourStepBroken }, { title: "", content: "{% trans "Let's start by opening the Navigator edit mode. Click on the edit button." %}", element: "#layout-viewer-navbar #navigator-edit-btn", placement: "top", reflex: true, template: no_nav_template }, { // 13 title: "", content: "{% trans "Click anywhere inside the region to edit it" %}", element: '#layout-navigator div[data-type="region"]', smartPlacement: true, delay: 500, reflex: true, template: no_nav_template }, { title: "", content: "{% trans "Grab the region handle, and drag to resize." %}", element: '#layout-navigator div[data-type="region"] .ui-resizable-se', placement: "bottom", delay: 500, reflex: "mouseup", template: no_nav_template, onElementUnavailable: tourStepBroken }, { // 15 title: "", content: "{% trans "When you are happy with your positioning, click save to save changes." %}", element: "#properties-panel button[data-action='save']", placement: "left", reflex: true, template: no_nav_template }, { title: "", content: "{% trans "Click back to go back to the main editor." %}", element: "#layout-navigator #close-btn", placement: "right", reflex: true, delay: 4000, template: no_nav_template }, { // 17 title: "", container: '#layout-editor', content: "{% trans "You will now have an empty region that has been resized and positioned on a black background. Let's add some content!" %}", element: '#layout-timeline .designer-region', placement: "bottom", template: next_template, delay: 1000, onShown: function (tour) { // If we have a widget already, got to the properties step if ($('#layout-timeline .designer-widget').length > 0) { tour.goTo(22); return false; } } }, { // 18 title: "", content: "{% trans "Use the Toolbar tabs to select <b>Widgets</b>" %}", element: "#layout-editor-toolbar #btn-menu-2", placement: "top", reflex: true, template: no_nav_template, onShown: function (tour) { // If widgets are selected already, go to next step if ($('#layout-editor-toolbar #btn-menu-2.active').length > 0) { tour.goTo(19); return false; } } }, { // 19 title: "", content: "{% trans "These are the widgets you can add. Find the <b>Text</b> widget using the right and left buttons." %}", element: "#layout-editor-toolbar #content-2 .toolbar-pane-content", placement: "top", template: next_template, onElementUnavailable: tourStepBroken }, { // 20 title: "", content: "{% trans "Add by <b>dragging</b> the widget to a region, or clicking on the <b>plus button</b> and click on the target region. Click <b>Next</b> after adding the widget." %}", element: '#layout-editor-toolbar .toolbar-card[data-sub-type="text"]', placement: "top", 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-content-container')){ tour.goTo(19); return false; } }, next: 21 }, { // 21 title: "", content: "{% trans "The Layout Timeline will now 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(18); return false; } }, next: 22 }, { // 22 title: "", content: "{% trans "Click on the widget in the Layout Timeline!" %}", element: '#layout-timeline .designer-widget', placement: "bottom", template: next_template }, { title: "", content: "{% trans "Let's edit the template now. Click in the preview window to open the text editor." %}", element: '#layout-viewer', 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(22); return false; } }, reflex: true, delay: 1000 }, { // 24 title: "", content: "{% trans "Add and format your text. The thin red line is showing your region border. Ensure that when you are editing, your text remains within these guidelines." %}", element: '#layout-viewer .viewer-element ', placement: "right", template: next_template, delay: 500 }, { title: "", content: "{% trans "Enter some text, apply some formatting such as font style and size." %}", element: '#layout-viewer .viewer-element ', placement: "right", template: next_template, delay: 500 }, { // 26 title: "", content: "{% trans "Give an optional name to this widget." %}", element: '#properties-panel input#name', placement: "left", template: no_nav_template, reflex: 'focusin', }, { title: "", content: "{% trans "Click in the <b>Set a duration</b> box to select that option." %}", element: '#properties-panel input#useDuration', placement: "left", template: no_nav_template, reflex: true, delay: 500, onElementUnavailable: tourStepBroken }, { // 28 title: "", content: "{% trans "Let’s override the default time to 30 seconds." %}", element: '#properties-panel input#duration', placement: "left", template: no_nav_template, reflex: 'focusin', delay: 500 }, { title: "", content: "{% trans "Click <b>Save</b> to save the widget edits." %}", 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(27); return false; } } }, { // 30 title: "", content: "{% trans "The Region Timeline will now show the new updated duration for this Text widget." %}", element: '#layout-timeline .designer-widget .widgetLabel .widgetDuration', placement: "top", template: next_template, delay: 500 }, { title: "", content: "{% trans "Now change the default background from black to a colour of your choice. Click in the back button to go back to the layout options." %}", element: '#layout-viewer-container #back-btn', placement: "bottom", template: no_nav_template, reflex: "mousedown", delay: 500 }, { // 32 title: "", content: "{% trans "Edit options for the layout will open in the Layout Editor." %}", element: '#properties-panel', placement: "left", template: next_template, delay: 500, onShown: function (tour) { // If properties panel is not the right one, go to previous step if ($('#properties-panel #layoutEditForm').length === 0) { tour.goTo(31); return false; } } }, { title: "", content: "{% trans "Click in the background colour field and select a colour using the colour picker." %}", element: '#properties-panel input#backgroundColor', placement: "left", template: no_nav_template, reflex: 'focusout', delay: 500 }, { // 34 title: "", content: "{% trans "Click <b>Save</b> to save the layout edits." %}", element: '#properties-panel button#save', placement: "left", template: no_nav_template, reflex: true, delay: 500 }, { title: "", 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-viewer #play-btn', placement: "right", delay: 500, template: next_template }, { // 36 title: "", content: "{% trans "When happy with your layout you will need to publish before being able to schedule to displays." %}", orphan: true, placement: "top", template: next_template, delay: 1500 }, { title: "", content: "{% trans "Select <b>Actions</b> to see the publish option." %}", element: '#layout-editor-topbar #actionsSubmenu a', placement: "bottom", reflex: true, template: no_nav_template }, { // 38 title: "", content: "{% trans "Click on the <b>Publish</b> button to open the form." %}", element: '#layout-editor-topbar #publishLayout', placement: "bottom", reflex: true, delay: 500, template: no_nav_template }, { element: '.bootbox button[data-bb-handler="Publish"]', reflex: true, placement: "bottom", container: '.bootbox', title: "", content: "{% trans "Press <b>Publish</b>." %}", template: no_nav_template, delay: 500 }, { // 40 title: "", element: '.welcome-screen-modal .modal-dialog', content: "{% trans "Your layout is now ready to be scheduled to displays / display groups!" %}", orphan: true, placement: "bottom", template: next_template, delay: 3000 }, { title: "Success!", content: "{% trans "And that is how easy it is to create a basic layout. Ready for more? Jump into the User Manual for guidance and top tips!" %}", orphan: true, template: final_template, delay: 300 } ] }); // Layout Designer tour layoutDesignerTour = window.layoutDesignerTour = new Tour({ debug: false, framework: "bootstrap3", showProgressBar: false, // don't show the progress bar on this step only showProgressText: false, // don't show the progress text on this step only steps: [ { container: '#layout-editor', orphan: true, placement: "auto", title: "", 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-topbar #actionsSubmenu', reflex: true, placement: "bottom", title: "", content: "{% trans "Click to open the Actions sub-menu!" %}", template: no_nav_template, delay: 200, onShown: function (tour) { // If we don't have checked out the layout yet, got to the checkout step if (!$('#read-only-message').is(":visible")) { tour.goTo(4); return false; } } }, { element: '#layout-editor-topbar #actionsSubmenu #checkoutLayout', reflex: true, placement: "left", title: "", content: "{% trans "Open the checkout form by clicking on this option!" %}", template: no_nav_template, delay: 200, }, { element: '.bootbox button[data-bb-handler="checkout"]', reflex: true, placement: "bottom", title: "", content: "{% trans "Press <b>Checkout</b>." %}", template: no_nav_template, delay: 200 }, { // 4 title: "", content: "{% trans "This is the <b>Preview</b> window, that shows previews for layouts, regions and widgets." %}", element: "#layout-viewer-container", placement: "bottom", delay: {show: 1500, hide: 100}, backdrop: true, template: next_template }, { title: "", content: "{% trans "This is the <b>Editor</b>, where we can change layout properties, region options and assigned widgets." %}", element: "#properties-panel", placement: "bottom", delay: 100, backdrop: true, template: next_template }, { title: "", content: "{% trans "Let's open the Navigator edit mode. Click on the edit button." %}", element: "#layout-viewer-navbar #navigator-edit-btn", placement: "top", reflex: true, delay: 500, template: no_nav_template }, { //7 element: '#layout-navigator', delay: 500, placement: "bottom", title: "", content: "{% trans "This is the Navigator edit mode, where you can edit regions and change their properties." %}", template: next_template }, { title: "", content: "{% trans "Click back to go back to the main editor." %}", element: "#layout-navigator #close-btn", placement: "top", reflex: true, template: no_nav_template }, { title: "", 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", delay: 1000, backdrop: true, template: next_template }, { //10 title: "", content: "{% trans "This is the <b>Toolbar</b>, used to interact with the layout designer." %}", element: "#layout-editor-toolbar", placement: "top", delay: 500, backdrop: true, template: next_template }, { title: "", content: "{% trans "Use the Toolbar tabs to select <b>Widgets</b>" %}", element: "#layout-editor-toolbar #btn-menu-2", placement: "top", reflex: true, template: no_nav_template, onShown: function (tour) { // If widgets are selected already, go to next step if ($('#layout-editor-toolbar #btn-menu-2.active').length > 0) { tour.goTo(12); return false; } } }, { title: "", content: "{% trans "These are the widgets you can add." %}", element: "#layout-editor-toolbar #content-2 .toolbar-pane-content", placement: "top", delay: 100, template: next_template }, { //13 title: "", 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-viewer-navbar #play-btn', placement: "right", delay: 500, template: next_template }, { title: "", element: '#layout-editor-topbar #actionsSubmenu', content: "{% trans "When happy with your layout you will need to publish before being able to schedule to displays." %}", placement: "bottom", template: next_template, delay: 500 }, { 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, delay: 300 } ] }); if (hasSeenNewUserWizard === 0) { restartTour(tour); } $("#reshowWelcomeMenuItem").on("click", function() { restartTour(tour, true, true); }); }); function tourStepBroken(tour, stepNumber) { restartTour(tour, true, true); } // Restart tour and/or save to prefs function restartTour(tour, saveToPrefs, fromStart) { saveToPrefs = (saveToPrefs === undefined) ? false : saveToPrefs; fromStart = (fromStart === undefined) ? false : fromStart; if(saveToPrefs) { setNewUserWizardState(false); } // Reshow the user welcome wizard if(fromStart) { tour.restart(); } else { tour.start(); } } function setNewUserWizardState(seen) { seen = (seen === undefined) ? true : seen; // If var is invalid, skip set if(hasSeenNewUserWizard == -1) { return; } if(seen) { // Set the new user wizard flag to 1 hasSeenNewUserWizard = 1; $.ajax({ url: '{{ urlFor("welcome.wizard.seen") }}', type: 'PUT' }); } else { // Set the new user wizard flag to 0 $.ajax({ url: '{{ urlFor("welcome.wizard.unseen") }}', type: 'POST' }); hasSeenNewUserWizard = 0; } } </script>