config.js (8565B)
1 import {__} from '@wordpress/i18n' 2 import {animateScroll} from 'react-scroll'; 3 import {dispatch, select} from '@wordpress/data'; 4 const {setTourActiveButtonGroup, setImportingTemplate} = dispatch('redux-templates/sectionslist'); 5 const {getPageData} = select('redux-templates/sectionslist'); 6 import {ModalManager} from '~redux-templates/modal-manager'; 7 import PreviewModal from '~redux-templates/modal-preview'; 8 export default { 9 initialSecondsLeft: 300, 10 beginningStep: -1, 11 totalStep: 7, 12 list: [ 13 { 14 selector: '[data-tut="tour__navigation"]', 15 caption: __('Template Type Tabs', redux_templates.i18n), 16 offset: { 17 x: 0, 18 y: 50, 19 arrowX: 0, 20 arrowY: -20 21 }, 22 box: { 23 width: 250 24 }, 25 direction: 'top', 26 content: () => ( 27 <div> 28 {__('These are the different types of templates we have.', redux_templates.i18n)} 29 <ul> 30 <li> 31 <strong>{__('Sections', redux_templates.i18n)}</strong> 32 {__(' are the building blocks of a page. Each "row" of content on a page we consider a section.', redux_templates.i18n)} 33 </li> 34 <li> 35 <strong>{__('Pages', redux_templates.i18n)}</strong> 36 {__(' are, you guessed it, a group of multiple sections making up a page.', redux_templates.i18n)} 37 </li> 38 <li> 39 <strong>{__('Template Kits', redux_templates.i18n)}</strong> 40 {__(' are groups of pages that all follow a style or theme.', redux_templates.i18n)} 41 </li> 42 <li> 43 <strong>{__('Saved', redux_templates.i18n)}</strong> 44 {__(' are reusable blocks that you may have previously saved for later.', redux_templates.i18n)} 45 </li> 46 </ul> 47 </div> 48 ) 49 }, 50 { 51 selector: '[data-tut="tour__filtering"]', 52 caption: __('Sidebar', redux_templates.i18n), 53 content: __('This area is where you can search and filter to find the right kind of templates you want.', redux_templates.i18n), 54 direction: 'left', 55 offset: { 56 x: 40, 57 y: 10, 58 arrowX: -20, 59 arrowY: 0 60 }, 61 box: { 62 width: 250, 63 height: 130 64 }, 65 action: () => { 66 animateScroll.scrollToTop({ 67 containerId: 'redux-templates-collection-modal-sidebar', 68 duration: 0, 69 }); 70 }, 71 }, 72 { 73 selector: '[data-tut="tour__filtering"]', 74 caption: __('Plugins Filter', redux_templates.i18n), 75 offset: { 76 x: 40, 77 y: 10, 78 arrowX: -20, 79 arrowY: 0 80 }, 81 box: { 82 width: 290, 83 height: 185 84 }, 85 content: () => ( 86 <div> 87 {__('Some templates require certain plugins. You can filter or select those templates. Hint, if the text is a ', redux_templates.i18n)} 88 <a href="#" className="missing-dependency">{__('little orange', redux_templates.i18n)}</a> 89 {__(', you don`t have that plugin installed yet, but don`t worry. Redux will help you with that too.', redux_templates.i18n)} 90 </div> 91 ), 92 action: () => { 93 animateScroll.scrollToBottom({ 94 containerId: 'redux-templates-collection-modal-sidebar', 95 duration: 0, 96 }); 97 }, 98 direction: 'left' 99 }, 100 { 101 selector: '[data-tut="tour__main_body"]', 102 caption: __('Templates List', redux_templates.i18n), 103 content: __('This area is where the templates will show up that match the filters you\'ve selected. You can click on many of them to preview or import them.', redux_templates.i18n), 104 direction: 'left', 105 offset: { 106 x: 40, 107 y: 10, 108 arrowX: -20, 109 arrowY: 0 110 }, 111 box: { 112 width: 250, 113 height: 150 114 }, 115 action: () => { 116 animateScroll.scrollToTop({ 117 containerId: 'redux-templates-collection-modal-sidebar', 118 duration: 0, 119 }); 120 setTourActiveButtonGroup(null); 121 } 122 }, 123 { 124 selector: '#modalContainer .redux-templates-single-item-inner:first-child', 125 caption: __('Template Hover', redux_templates.i18n), 126 content: __('When you hover over a template you can see via icons what plugins are required for this template. You can then choose to Preview or Import a design.', redux_templates.i18n), 127 action: () => { 128 ModalManager.closeCustomizer(); 129 const pageData = getPageData(); 130 if (pageData && pageData.length > 0) { 131 setTourActiveButtonGroup(pageData[0]) 132 } 133 }, 134 direction: 'left', 135 offset: { 136 x: 40, 137 y: 10, 138 arrowX: -20, 139 arrowY: 0 140 }, 141 box: { 142 width: 240, 143 height: 169 144 }, 145 }, 146 { 147 selector: '.wp-full-overlay-sidebar', 148 caption: __('Preview Dialog', redux_templates.i18n), 149 content: __('This is the preview dialog. It gives more details about the template and helps you to see what you could expect the templates to look like.', redux_templates.i18n), 150 action: () => { 151 setTourActiveButtonGroup(null); 152 setImportingTemplate(null); 153 const pageData = getPageData(); 154 if (pageData && pageData.length > 0) { 155 ModalManager.openCustomizer( 156 <PreviewModal startIndex={0} currentPageData={pageData}/> 157 ) 158 } 159 }, 160 position: 'center' 161 }, 162 { 163 selector: '.redux-templates-import-wizard-wrapper', 164 caption: __('Import Wizard', redux_templates.i18n), 165 content: __('When you click to import a template, sometimes you will be missing one of the required plugins. Redux will do its best to help you install what\'s missing. If some of them are premium plugins, you will be provided details on where you can get them.', redux_templates.i18n), 166 direction: 'right', 167 offset: { 168 x: 0, 169 y: 85, 170 arrowX: 40, 171 arrowY: 25 172 }, 173 box: { 174 width: 250, 175 height: 169 176 }, 177 action: () => { 178 // if (ModalManager.isModalOpened() === false) ModalManager.open(<LibraryModal autoTourStart={false} />) 179 if (document.getElementsByClassName('tooltipster-box')) 180 document.getElementsByClassName('tooltipster-box')[0].style.display = 'none'; 181 ModalManager.show(); 182 ModalManager.closeCustomizer(); 183 const pageData = getPageData(); 184 if (pageData && pageData.length > 0) setImportingTemplate(pageData[0]); 185 setTimeout(() => { 186 const openedPanel = document.getElementsByClassName('redux-templates-modal-wrapper'); 187 if (openedPanel && openedPanel.length > 0) { 188 let openPanel = openedPanel[0].getBoundingClientRect(); 189 let box = {top: openPanel.top + 90, left: openPanel.left - 320}; 190 dispatch('redux-templates/sectionslist').setChallengeTooltipRect(box); 191 } 192 if (document.getElementsByClassName('tooltipster-box')) 193 document.getElementsByClassName('tooltipster-box')[0].style.display = 'block'; 194 }, 0) 195 } 196 } 197 ] 198 };