vision / includes / page-item.php

page-item.php in Vision – Interactive Image Map with Hotspots Builder 1.9.2, at includes/page-item.php

1,152 lines 118.7 KB

Raw Download Zip

1	<?php
2	defined('ABSPATH') \|\| exit;
3
4	$page = sanitize_key(filter_input(INPUT_GET, 'page', FILTER_DEFAULT));
5	?>
6	<!-- /begin vision app -->
7	<div class="vision-root" id="vision-app-item" style="display:none;">
8	<input id="vision-load-config-from-file" type="file" style="display:none;" />
9	<div class="vision-page-header">
10	<div class="vision-title">
11	<i class="icon icon-scan-eye"></i>
12	<span>Vision<sup><?php echo esc_attr(VISION_PLUGIN_PLAN); ?></sup></span>
13	<span> - </span>
14	<span><?php esc_html_e('Item', 'vision'); ?></span>
15	</div>
16	<div class="vision-menu">
17	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
18	<line x1="3" y1="12" x2="21" y2="12"></line>
19	<line x1="3" y1="6" x2="21" y2="6"></line>
20	<line x1="3" y1="18" x2="21" y2="18"></line>
21	</svg>
22	<div class="vision-actions">
23	<a href="#" al-on.click="appData.fn.saveConfigToFile(appData)" title="<?php esc_html_e('Save config to a JSON file', 'vision'); ?>"><?php esc_html_e('Save Config As...', 'vision'); ?></a>
24	<a href="#" al-on.click="appData.fn.loadConfigFromFile(appData)" title="<?php esc_html_e('Load config from a JSON file', 'vision'); ?>"><?php esc_html_e('Load Config As...', 'vision'); ?></a>
25	</div>
26	</div>
27	</div>
28	<div class="vision-messages" id="vision-messages">
29	</div>
30	<div class="vision-app" id="vision-app">
31	<div class="vision-loader-wrap">
32	<div class="vision-loader">
33	<div class="vision-loader-bar"></div>
34	<div class="vision-loader-bar"></div>
35	<div class="vision-loader-bar"></div>
36	<div class="vision-loader-bar"></div>
37	</div>
38	</div>
39	<div class="vision-wrap">
40	<div class="vision-main-header">
41	<input class="vision-title" type="text" al-text="appData.config.title" placeholder="<?php esc_html_e('Title', 'vision'); ?>">
42	</div>
43	<div class="vision-workplace">
44	<div class="vision-main-menu">
45	<div class="vision-left-panel">
46	<div class="vision-list">
47	<a class="vision-item vision-small vision-lite" href="https://1.envato.market/getvision" target="_blank" al-if="appData.plan=='lite'"><?php esc_html_e('Buy pro version', 'vision'); ?></a>
48	</div>
49	</div>
50	<div class="vision-right-panel">
51	<div class="vision-list">
52	<div class="vision-item vision-green" al-on.click="appData.fn.preview(appData);" title="<?php esc_html_e('The item should be saved before preview', 'vision'); ?>" al-if="appData.wp_item_id != null"><?php esc_html_e('Preview', 'vision'); ?></div>
53	<div class="vision-item vision-blue" al-on.click="appData.fn.saveConfig(appData);" title="<?php esc_html_e('Save config to database', 'vision'); ?>"><?php esc_html_e('Save', 'vision'); ?></div>
54	</div>
55	</div>
56	</div>
57	<div class="vision-main-tabs vision-clear-fix">
58	<div class="vision-tab" al-attr.class.vision-active="appData.ui.tabs.builder" al-on.click="appData.fn.onTab(appData, 'builder')"><?php esc_html_e('Builder', 'vision'); ?></div>
59	<div class="vision-tab" al-attr.class.vision-active="appData.ui.tabs.customCSS" al-on.click="appData.fn.onTab(appData, 'customCSS')"><?php esc_html_e('Custom CSS', 'vision'); ?><div class="vision-status" al-if="appData.config.customCSS.active"></div></div>
60	<div class="vision-tab" al-attr.class.vision-active="appData.ui.tabs.customJS" al-on.click="appData.fn.onTab(appData, 'customJS')"><?php esc_html_e('Custom JS', 'vision'); ?><div class="vision-status" al-if="appData.config.customJS.active"></div></div>
61	<div class="vision-tab" al-attr.class.vision-active="appData.ui.tabs.shortcode" al-on.click="appData.fn.onTab(appData, 'shortcode')" al-if="appData.wp_item_id"><?php esc_html_e('Shortcode', 'vision'); ?></div>
62	</div>
63	<div class="vision-main-data">
64	<div class="vision-section" al-attr.class.vision-active="appData.ui.tabs.builder">
65	<div class="vision-stage">
66	<div class="vision-builder">
67	<div class="vision-left-sidebar-panel" al-attr.class.vision-collapsed="!appData.ui.builder.leftSidebar" al-style.width="appData.ui.builder.leftSidebarWidth">
68	<div class="vision-sidebar-resizer" al-on.mousedown="appData.fn.onSidebarResizeStart(appData, $event, 'left')">
69	<div class="vision-sidebar-hide" al-on.click="appData.fn.toggleSidebarPanel(appData, 'left')">
70	<i class="icon icon-chevron-left" al-if="appData.ui.builder.leftSidebar"></i>
71	<i class="icon icon-chevron-right" al-if="!appData.ui.builder.leftSidebar"></i>
72	</div>
73	</div>
74	<div class="vision-tabs">
75	<div class="vision-tab" al-attr.class.vision-active="appData.ui.leftSidebarTabs.general" al-on.click="appData.fn.onLeftSidebarTab(appData, 'general')"><?php esc_html_e('General', 'vision'); ?></div>
76	<div class="vision-tab" al-attr.class.vision-active="appData.ui.leftSidebarTabs.layers" al-on.click="appData.fn.onLeftSidebarTab(appData, 'layers')"><?php esc_html_e('Layers', 'vision'); ?></div>
77	</div>
78	<div class="vision-data" al-attr.class.vision-active="appData.ui.leftSidebarTabs.general">
79	<div class="vision-block" al-attr.class.vision-block-folded="appData.ui.generalTab.main">
80	<div class="vision-block-header" al-on.click="appData.fn.onGeneralTab(appData,'main')">
81	<div class="vision-block-title"><?php esc_html_e('Settings', 'vision'); ?></div>
82	<div class="vision-block-state"></div>
83	</div>
84	<div class="vision-block-data">
85	<div class="vision-control">
86	<div class="vision-helper" title="<?php esc_html_e('Enable/disable item', 'vision'); ?>"></div>
87	<div class="vision-label"><?php esc_html_e('Enable item', 'vision'); ?></div>
88	<div al-toggle="appData.config.active"></div>
89	</div>
90
91	<div class="vision-control">
92	<div class="vision-helper" title="<?php esc_html_e('Sets a map image (jpeg or png format)', 'vision'); ?>"></div>
93	<div class="vision-label"><?php esc_html_e('Map image', 'vision'); ?></div>
94	<div class="vision-input-group">
95	<div class="vision-input-group-cell">
96	<input class="vision-text vision-long vision-no-brr" type="text" al-text="appData.config.image.url" placeholder="<?php esc_html_e('Select an image', 'vision'); ?>">
97	</div>
98	<div class="vision-input-group-cell vision-pinch">
99	<div class="vision-btn vision-default vision-no-bl" al-on.click="appData.fn.selectImage(appData, appData.rootScope, appData.config.image)" title="<?php esc_html_e('Select an image', 'vision'); ?>"><span><i class="icon icon-folder"></i></span></div>
100	</div>
101	</div>
102	</div>
103
104	<div class="vision-control">
105	<div class="vision-helper" title="<?php esc_html_e('Specifies a theme of elements', 'vision'); ?>"></div>
106	<div class="vision-label"><?php esc_html_e('Theme', 'vision'); ?></div>
107	<select class="vision-select vision-capitalize" al-select="appData.config.theme">
108	<option al-option="null"><?php esc_html_e('none', 'vision'); ?></option>
109	<option al-repeat="theme in appData.themes" al-option="theme.id">{{theme.title}}</option>
110	</select>
111	</div>
112	</div>
113	</div>
114	<div class="vision-block" al-attr.class.vision-block-folded="appData.ui.generalTab.container">
115	<div class="vision-block-header" al-on.click="appData.fn.onGeneralTab(appData,'container')">
116	<div class="vision-block-title"><?php esc_html_e('Container', 'vision'); ?></div>
117	<div class="vision-block-state"></div>
118	</div>
119	<div class="vision-block-data">
120	<div class="vision-control">
121	<div class="vision-helper" title="<?php esc_html_e('The container width will be auto calculated', 'vision'); ?>"></div>
122	<div class="vision-label"><?php esc_html_e('Auto width', 'vision'); ?></div>
123	<div al-toggle="appData.config.autoWidth"></div>
124	</div>
125
126	<div class="vision-control" al-if="!appData.config.autoWidth">
127	<div class="vision-helper" title="<?php esc_html_e('Sets the container width, can be any valid CSS units, not just pixels', 'vision'); ?>"></div>
128	<div class="vision-label"><?php esc_html_e('Custom width', 'vision'); ?></div>
129	<input class="vision-text" type="text" al-text="appData.config.containerWidth" placeholder="<?php esc_html_e('Default: auto', 'vision'); ?>">
130	</div>
131
132	<div class="vision-control">
133	<div class="vision-helper" title="<?php esc_html_e('The container height will be auto calculated', 'vision'); ?>"></div>
134	<div class="vision-label"><?php esc_html_e('Auto height', 'vision'); ?></div>
135	<div al-toggle="appData.config.autoHeight"></div>
136	</div>
137
138	<div class="vision-control" al-if="!appData.config.autoHeight">
139	<div class="vision-helper" title="<?php esc_html_e('Sets the container height, can be any valid CSS units, not just pixels', 'vision'); ?>"></div>
140	<div class="vision-label"><?php esc_html_e('Custom height', 'vision'); ?></div>
141	<input class="vision-text" type="text" al-text="appData.config.containerHeight" placeholder="<?php esc_html_e('Default: auto', 'vision'); ?>">
142	</div>
143
144	<div class="vision-control">
145	<div class="vision-helper" title="<?php esc_html_e('Background color in hexadecimal format (#fff or #555555)', 'vision'); ?>"></div>
146	<div class="vision-label"><?php esc_html_e('Background color', 'vision'); ?></div>
147	<div class="vision-color" al-color="appData.config.background.color"></div>
148	</div>
149
150	<div class="vision-control">
151	<div class="vision-helper" title="<?php esc_html_e('Sets a background image (jpeg or png format)', 'vision'); ?>"></div>
152	<div class="vision-label"><?php esc_html_e('Background image', 'vision'); ?></div>
153	<div class="vision-input-group">
154	<div class="vision-input-group-cell">
155	<input class="vision-text vision-long vision-no-brr" type="text" al-text="appData.config.background.image.url" placeholder="<?php esc_html_e('Select an image', 'vision'); ?>">
156	</div>
157	<div class="vision-input-group-cell vision-pinch">
158	<div class="vision-btn vision-default vision-no-bl" al-on.click="appData.fn.selectImage(appData, appData.rootScope, appData.config.background.image)" title="<?php esc_html_e('Select a background image', 'vision'); ?>"><span><i class="icon icon-folder"></i></span></div>
159	</div>
160	</div>
161	</div>
162
163	<div class="vision-control">
164	<div class="vision-helper" title="<?php esc_html_e('Specifies a size of the background image', 'vision'); ?>"></div>
165	<div class="vision-label"><?php esc_html_e('Background size', 'vision'); ?></div>
166	<div class="vision-select" al-backgroundsize="appData.config.background.size"></div>
167	</div>
168
169	<div class="vision-control">
170	<div class="vision-helper" title="<?php esc_html_e('How the background image will be repeated', 'vision'); ?>"></div>
171	<div class="vision-label"><?php esc_html_e('Background repeat', 'vision'); ?></div>
172	<div class="vision-select" al-backgroundrepeat="appData.config.background.repeat"></div>
173	</div>
174
175	<div class="vision-control">
176	<div class="vision-helper" title="<?php esc_html_e('Sets a starting position of the background image', 'vision'); ?>"></div>
177	<div class="vision-label"><?php esc_html_e('Background position', 'vision'); ?></div>
178	<input class="vision-text" type="text" al-text="appData.config.background.position" placeholder="<?php esc_html_e('Example: 50% 50%', 'vision'); ?>">
179	</div>
180
181	<div class="vision-control">
182	<div class="vision-helper" title="<?php esc_html_e('Sets additional css classes to the container', 'vision'); ?>"></div>
183	<div class="vision-label"><?php esc_html_e('Extra CSS classes', 'vision'); ?></div>
184	<input class="vision-text" type="text" al-text="appData.config.class">
185	</div>
186
187	<div class="vision-control">
188	<div class="vision-helper" title="<?php esc_html_e('Sets ID to the container', 'vision'); ?>"></div>
189	<div class="vision-label"><?php esc_html_e('Container ID', 'vision'); ?></div>
190	<input class="vision-text" type="text" al-text="appData.config.containerId">
191	</div>
192
193	<div class="vision-control">
194	<div class="vision-helper" title="<?php esc_html_e('Sets the slug for the vision item', 'vision'); ?>"></div>
195	<div class="vision-label"><?php esc_html_e('Slug', 'vision'); ?></div>
196	<input class="vision-text" type="text" al-text="appData.config.slug" data-regex="^([a-z0-9_-]+)$">
197	</div>
198	</div>
199	</div>
200	</div>
201	<div class="vision-data" al-attr.class.vision-active="appData.ui.leftSidebarTabs.layers">
202	<div al-if="appData.config.image.url == null">
203	<div class="vision-info"><?php esc_html_e('Please set a map image to access settings', 'vision'); ?></div>
204	</div>
205	<div class="vision-layers-wrap" al-if="appData.config.image.url != null">
206	<div class="vision-layers-toolbar">
207	<div class="vision-left-panel" al-attr.class.vision-hidden="appData.ui.activeLayer == null">
208	<i class="icon icon-copy" al-on.click="appData.fn.copyLayer(appData)" title="<?php esc_html_e('copy', 'vision'); ?>"></i>
209	<i class="icon icon-arrow-up-from-line" al-on.click="appData.fn.updownLayer(appData, 'down')" title="<?php esc_html_e('move up', 'vision'); ?>"></i>
210	<i class="icon icon-arrow-down-from-line" al-on.click="appData.fn.updownLayer(appData, 'up')" title="<?php esc_html_e('move down', 'vision'); ?>"></i>
211	</div>
212	<div class="vision-right-panel" al-attr.class.vision-hidden="appData.ui.activeLayer == null">
213	<i class="icon icon-trash-2 icon-color-red" al-on.click="appData.fn.deleteLayer(appData)" title="<?php esc_html_e('delete', 'vision'); ?>"></i>
214	</div>
215	</div>
216	<div class="vision-layers-list">
217	<div class="vision-layer"
218	al-attr.class.vision-active="appData.fn.isLayerActive(appData, layer)"
219	al-on.click="appData.fn.onLayerItemClick(appData, layer)"
220	al-repeat="layer in appData.fn.reverse(appData, appData.config.layers)"
221	>
222	<i class="icon icon-link" al-if="layer.type == 'link'"></i>
223	<i class="icon icon-type" al-if="layer.type == 'text'"></i>
224	<i class="icon icon-image" al-if="layer.type == 'image'"></i>
225	<i class="icon icon-spline" al-if="layer.type == 'svg'"></i>
226	<div class="vision-label">{{layer.title ? layer.title : layer.type}}</div>
227	<div class="vision-actions">
228	<i class="icon icon-message-square-text" al-attr.class.vision-inactive="!layer.tooltip.active" al-on.click="appData.fn.toggleLayerTooltip(appData, layer)" title="<?php esc_html_e('enable/disable tooltip', 'vision'); ?>"></i>
229	<i class="icon icon-notepad-text" al-attr.class.vision-inactive="!layer.popover.active" al-on.click="appData.fn.toggleLayerPopover(appData, layer)" title="<?php esc_html_e('enable/disable popover', 'vision'); ?>"></i>
230	<i class="icon" al-attr.class.icon-eye="layer.visible" al-attr.class.icon-eye-off="!layer.visible" al-on.click="appData.fn.toggleLayerVisible(appData, layer)" title="<?php esc_html_e('show/hide', 'vision'); ?>"></i>
231	<i class="icon" al-attr.class.icon-lock-open="!layer.lock" al-attr.class.icon-lock="layer.lock" al-on.click="appData.fn.toggleLayerLock(appData, layer)" title="<?php esc_html_e('lock/unlock', 'vision'); ?>"></i>
232	</div>
233	</div>
234	</div>
235	</div>
236
237	</div>
238	</div>
239	<div class="vision-main-panel vision-center">
240	<div class="vision-map-blank" al-attr.class.vision-hidden="appData.config.image.url != null">
241	<div class="vision-map-button" al-on.click="appData.fn.selectImage(appData, appData.rootScope, appData.config.image)">
242	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
243	<path d="M16 5h6"/><path d="M19 2v6"/>
244	<path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"/>
245	<path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
246	<circle cx="9" cy="9" r="2"/>
247	</svg>
248	</div>
249	<div class="vision-info"><?php esc_html_e('Please set a map image if you want to create layers on it', 'vision'); ?></div>
250	</div>
251	<div al-attr.class.vision-hidden="appData.config.image.url == null">
252	<div class="vision-edit-layers">
253	<div class="vision-layers-toolbar-top">
254	<div class="vision-layers-toolbar" al-attr.class.vision-hidden="appData.ui.activeLayer == null">
255	<i class="icon icon-chevron-left" al-on.click="appData.fn.prevLayer(appData)" title="<?php esc_html_e('Prev layer', 'vision'); ?>"></i>
256	<i class="icon icon-chevron-right" al-on.click="appData.fn.nextLayer(appData)" title="<?php esc_html_e('Next layer', 'vision'); ?>"></i>
257	</div>
258	<div class="vision-layers-toolbar">
259	<i class="icon icon-link" al-attr.class.vision-active="appData.tools.activeTool == 'link'" al-on.click="appData.fn.addLayerLink(appData)" title="<?php esc_html_e('add link', 'vision'); ?>"></i>
260	<i class="icon icon-type" al-attr.class.vision-active="appData.tools.activeTool == 'text'" al-on.click="appData.fn.addLayerText(appData)" title="<?php esc_html_e('add text', 'vision'); ?>"></i>
261	<i class="icon icon-image" al-attr.class.vision-active="appData.tools.activeTool == 'image'" al-on.click="appData.fn.addLayerImage(appData)" title="<?php esc_html_e('add image', 'vision'); ?>"></i>
262	</div>
263	<div class="vision-layers-toolbar" al-attr.class.vision-hidden="appData.ui.activeLayer == null">
264	<i class="icon icon-copy" al-on.click="appData.fn.copyLayer(appData)" title="<?php esc_html_e('copy', 'vision'); ?>"></i>
265	<i class="icon icon-arrow-up-from-line" al-on.click="appData.fn.updownLayer(appData, 'down')" title="<?php esc_html_e('move up', 'vision'); ?>"></i>
266	<i class="icon icon-arrow-down-from-line" al-on.click="appData.fn.updownLayer(appData, 'up')" title="<?php esc_html_e('move down', 'vision'); ?>"></i>
267	</div>
268	</div>
269	<div class="vision-layers-toolbar-bottom">
270	<div class="vision-layers-toolbar">
271	<div class="vision-icon" al-on.click="appData.fn.canvasZoomIn(appData)" title="<?php esc_html_e('Zoom in', 'vision'); ?>">
272	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
273	<circle cx="11" cy="11" r="8"/>
274	<line x1="21" x2="16.65" y1="21" y2="16.65"/>
275	<line x1="11" x2="11" y1="8" y2="14"/>
276	<line x1="8" x2="14" y1="11" y2="11"/>
277	</svg>
278	</div>
279	<span class="vision-zoom-value">{{appData.fn.getCanvasZoomForLabel(appData)}}%</span>
280	<div class="vision-icon" al-on.click="appData.fn.canvasZoomOut(appData)" title="<?php esc_html_e('Zoom out', 'vision'); ?>">
281	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
282	<circle cx="11" cy="11" r="8"/>
283	<line x1="21" x2="16.65" y1="21" y2="16.65"/>
284	<line x1="8" x2="14" y1="11" y2="11"/>
285	</svg>
286	</div>
287	<div class="vision-icon" al-on.click="appData.fn.canvasZoomFit(appData)" title="<?php esc_html_e('Zoom fit', 'vision'); ?>">
288	<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
289	<path d="M8 3H5a2 2 0 0 0-2 2v3"/>
290	<path d="M21 8V5a2 2 0 0 0-2-2h-3"/>
291	<path d="m3 16v3a2 2 0 0 0 2 2h3"/>
292	<path d="m16 21h3a2 2 0 0 0 2-2v-3"/>
293	<rect x="6" y="6" width="12" height="12" ry="2" fill="currentColor" stroke="none" />
294	</svg>
295	</div>
296	<div class="vision-icon" al-on.click="appData.fn.canvasZoomDefault(appData)" title="<?php esc_html_e('Zoom default', 'vision'); ?>">
297	<svg class="lucide lucide-expand" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
298	<path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"/>
299	<path d="m3 16.2v4.8h4.8m-4.8 0 6-6"/>
300	<path d="m21 7.8v-4.8h-4.8m4.8 0-6 6"/>
301	<path d="M3 7.8V3m0 0h4.8M3 3l6 6"/>
302	</svg>
303	</div>
304	<div class="vision-icon" al-on.click="appData.fn.canvasMoveDefault(appData)" title="<?php esc_html_e('Move default', 'vision'); ?>">
305	<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
306	<path d="m12 9v-7m0 7-3.4041-3.3841m3.4041 3.3841 3.3841-3.4041"/>
307	<path d="m18.399 15.384-3.4041-3.3841 3.3841-3.4041m-3.3841 3.4041h7.0051"/>
308	<path d="m5.5959 8.6159 3.4041 3.3841-3.3841 3.4041m3.3841-3.4041h-7"/>
309	<path d="m15.404 18.384-3.4041-3.3841-3.3841 3.4041m3.3841-3.4041v7"/>
310	</svg>
311	</div>
312	</div>
313	</div>
314	<div id="vision-layers-canvas-wrap" class="vision-layers-canvas-wrap" al-on.mousedown="appData.fn.onMoveCanvasStart(appData, $event)">
315	<div id="vision-layers-canvas" class="vision-layers-canvas">
316	<div id="vision-layers-image" class="vision-layers-image"></div>
317	<div class="vision-layers-stage">
318	<div class="vision-layer"
319	tabindex="1"
320	al-on.click="appData.fn.onLayerClick(appData, layer)"
321	al-on.keydown="appData.fn.onLayerKeyDown(appData, layer, $event, $element)"
322	al-attr.class.vision-active="appData.fn.isLayerActive(appData, layer)"
323	al-attr.class.vision-hidden="!layer.visible"
324	al-attr.class.vision-lock="layer.lock"
325	al-attr.class.vision-layer-link="layer.type == 'link'"
326	al-attr.class.vision-layer-text="layer.type == 'text'"
327	al-attr.class.vision-layer-image="layer.type == 'image'"
328	al-attr.class.vision-layer-svg="layer.type == 'svg'"
329	al-style.top="appData.fn.getLayerStyle(appData, layer, 'y')"
330	al-style.left="appData.fn.getLayerStyle(appData, layer, 'x')"
331	al-style.width="appData.fn.getLayerStyle(appData, layer, 'width')"
332	al-style.height="appData.fn.getLayerStyle(appData, layer, 'height')"
333	al-style.transform="appData.fn.getLayerStyle(appData, layer, 'angle')"
334	al-repeat="layer in appData.config.layers"
335	al-init="appData.fn.initLayer(appData, layer, $element)"
336	>
337	<div class="vision-layer-inner"
338	spellcheck="false"
339	al-style.border-radius="appData.fn.getLayerStyle(appData, layer, 'border-radius')"
340	al-style.background-color="appData.fn.getLayerStyle(appData, layer, 'background-color')"
341	al-style.background-image="appData.fn.getLayerStyle(appData, layer, 'background-image')"
342	al-style.background-size="appData.fn.getLayerStyle(appData, layer, 'background-size')"
343	al-style.background-repeat="appData.fn.getLayerStyle(appData, layer, 'background-repeat')"
344	al-style.background-position="appData.fn.getLayerStyle(appData, layer, 'background-position')"
345	al-style.color="appData.fn.getLayerStyle(appData, layer, 'color')"
346	al-style.font-family="appData.fn.getLayerStyle(appData, layer, 'font-family')"
347	al-style.font-size="appData.fn.getLayerStyle(appData, layer, 'font-size')"
348	al-style.line-height="appData.fn.getLayerStyle(appData, layer, 'line-height')"
349	al-style.text-align="appData.fn.getLayerStyle(appData, layer, 'text-align')"
350	al-style.letter-spacing="appData.fn.getLayerStyle(appData, layer, 'letter-spacing')"
351	al-init="appData.fn.initLayerInner(appData, layer, $element)"
352	>
353	</div>
354	</div>
355	</div>
356	</div>
357	</div>
358	</div>
359	</div>
360	</div>
361	<div class="vision-right-sidebar-panel" al-attr.class.vision-collapsed="!appData.ui.builder.rightSidebar" al-style.width="appData.ui.builder.rightSidebarWidth">
362	<div class="vision-sidebar-resizer" al-on.mousedown="appData.fn.onSidebarResizeStart(appData, $event, 'right')">
363	<div class="vision-sidebar-hide" al-on.click="appData.fn.toggleSidebarPanel(appData, 'right')">
364	<i class="icon icon-chevron-right" al-if="appData.ui.builder.rightSidebar"></i>
365	<i class="icon icon-chevron-left" al-if="!appData.ui.builder.rightSidebar"></i>
366	</div>
367	</div>
368	<div class="vision-tabs">
369	<div class="vision-tab" al-attr.class.vision-active="appData.ui.rightSidebarTabs.layer" al-on.click="appData.fn.onRightSidebarTab(appData, 'layer')"><?php esc_html_e('Layer', 'vision'); ?></div>
370	<div class="vision-tab" al-attr.class.vision-active="appData.ui.rightSidebarTabs.tooltip" al-on.click="appData.fn.onRightSidebarTab(appData, 'tooltip')"><?php esc_html_e('Tooltip', 'vision'); ?><div class="vision-status" al-if="appData.ui.activeLayer != null && appData.ui.activeLayer.tooltip.active"></div></div>
371	<div class="vision-tab" al-attr.class.vision-active="appData.ui.rightSidebarTabs.popover" al-on.click="appData.fn.onRightSidebarTab(appData, 'popover')"><?php esc_html_e('Popover', 'vision'); ?><div class="vision-status" al-if="appData.ui.activeLayer != null && appData.ui.activeLayer.popover.active"></div></div>
372	</div>
373	<div class="vision-data" al-attr.class.vision-active="appData.ui.rightSidebarTabs.layer">
374	<div al-if="appData.ui.activeLayer == null">
375	<div class="vision-info"><?php esc_html_e('Please select a layer to access settings', 'vision'); ?></div>
376	</div>
377	<div al-if="appData.ui.activeLayer != null">
378	<div class="vision-block-list">
379	<div class="vision-block" al-attr.class.vision-block-folded="appData.ui.layerTab.general">
380	<div class="vision-block-header" al-on.click="appData.fn.onLayerTab(appData,'general')">
381	<div class="vision-block-title"><?php esc_html_e('General', 'vision'); ?></div>
382	<div class="vision-block-state"></div>
383	</div>
384	<div class="vision-block-data">
385	<div class="vision-control">
386	<div class="vision-helper" title="<?php esc_html_e('Set layer title', 'vision'); ?>"></div>
387	<div class="vision-label"><?php esc_html_e('Title', 'vision'); ?></div>
388	<input class="vision-text vision-long" type="text" al-text="appData.ui.activeLayer.title">
389	</div>
390
391	<div class="vision-control">
392	<div class="vision-helper" title="<?php esc_html_e('Sets a layer id (allow numbers, chars & specials: "_","-"). Should be unique and not empty.', 'vision'); ?>"></div>
393	<div class="vision-label"><?php esc_html_e('Id', 'vision'); ?></div>
394	<div class="vision-input-group vision-long">
395	<div class="vision-input-group-cell">
396	<input class="vision-text vision-long vision-no-brr" type="text" al-uuid="appData.ui.activeLayer.id">
397	</div>
398	<div class="vision-input-group-cell vision-pinch">
399	<div class="vision-btn vision-default vision-no-bl" al-on.click="appData.fn.generateLayerId(appData, appData.rootScope, appData.ui.activeLayer)" title="<?php esc_html_e('Generate a new ID', 'vision'); ?>"><span><i class="icon icon-refresh-ccw"></i></span></div>
400	</div>
401	</div>
402	</div>
403
404	<div class="vision-control">
405	<div class="vision-helper" title="<?php esc_html_e('Set layer position', 'vision'); ?>"></div>
406	<div class="vision-input-group vision-long">
407	<div class="vision-input-group-cell vision-rgap">
408	<div class="vision-label"><?php esc_html_e('X [px]', 'vision'); ?></div>
409	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.x">
410	</div>
411	<div class="vision-input-group-cell vision-lgap">
412	<div class="vision-label"><?php esc_html_e('Y [px]', 'vision'); ?></div>
413	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.y">
414	</div>
415	</div>
416	</div>
417
418	<div class="vision-control">
419	<div class="vision-helper" title="<?php esc_html_e('Set layer size', 'vision'); ?>"></div>
420	<div class="vision-input-group vision-long">
421	<div class="vision-input-group-cell vision-rgap">
422	<div class="vision-label"><?php esc_html_e('Width [px]', 'vision'); ?></div>
423	<div class="vision-input-group vision-long">
424	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.width">
425	</div>
426	<div class="vision-input-group vision-long">
427	<div class="vision-input-group-cell vision-pinch">
428	<div al-checkbox="appData.ui.activeLayer.autoWidth"></div>
429	</div>
430	<div class="vision-input-group-cell">
431	<?php esc_html_e('Auto width', 'vision'); ?>
432	</div>
433	</div>
434	</div>
435	<div class="vision-input-group-cell vision-lgap">
436	<div class="vision-label"><?php esc_html_e('Height [px]', 'vision'); ?></div>
437	<div class="vision-input-group vision-long">
438	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.height">
439	</div>
440	<div class="vision-input-group vision-long">
441	<div class="vision-input-group-cell vision-pinch">
442	<div al-checkbox="appData.ui.activeLayer.autoHeight"></div>
443	</div>
444	<div class="vision-input-group-cell">
445	<?php esc_html_e('Auto height', 'vision'); ?>
446	</div>
447	</div>
448	</div>
449	</div>
450	</div>
451
452	<div class="vision-control">
453	<div class="vision-helper" title="<?php esc_html_e('Set layer angle', 'vision'); ?>"></div>
454	<div class="vision-label"><?php esc_html_e('Angle [deg]', 'vision'); ?></div>
455	<input class="vision-number vision-long" al-float="appData.ui.activeLayer.angle">
456	</div>
457	</div>
458	</div>
459
460	<div class="vision-block" al-attr.class.vision-block-folded="appData.ui.layerTab.data">
461	<div class="vision-block-header" al-on.click="appData.fn.onLayerTab(appData,'data')">
462	<div class="vision-block-title"><?php esc_html_e('Data', 'vision'); ?></div>
463	<div class="vision-block-state"></div>
464	</div>
465	<div class="vision-block-data">
466	<div class="vision-control">
467	<div class="vision-helper" title="<?php esc_html_e('Adds a specific url to the layer', 'vision'); ?>"></div>
468	<div class="vision-label"><?php esc_html_e('URL', 'vision'); ?></div>
469	<input class="vision-number vision-long" type="text" al-text="appData.ui.activeLayer.url" placeholder="<?php esc_html_e('URL', 'vision'); ?>">
470	<div class="vision-input-group vision-long">
471	<div class="vision-input-group-cell vision-pinch">
472	<div al-checkbox="appData.ui.activeLayer.urlNewWindow"></div>
473	</div>
474	<div class="vision-input-group-cell">
475	<?php esc_html_e('Open url in a new window', 'vision'); ?>
476	</div>
477	</div>
478	<div class="vision-input-group vision-long">
479	<div class="vision-input-group-cell vision-pinch">
480	<div al-checkbox="appData.ui.activeLayer.urlNoFollow"></div>
481	</div>
482	<div class="vision-input-group-cell">
483	<?php esc_html_e('Set the "nofollow" tag', 'vision'); ?>
484	</div>
485	</div>
486	</div>
487
488	<div class="vision-control">
489	<div class="vision-helper" title="<?php esc_html_e('Adds the inner content data to the layer (shortcodes can be used too)', 'vision'); ?>"></div>
490	<div class="vision-label"><?php esc_html_e('Content data', 'vision'); ?></div>
491	<textarea class="vision-long" al-textarea="appData.ui.activeLayer.contentData"></textarea>
492	</div>
493
494	<div class="vision-control">
495	<div class="vision-helper" title="<?php esc_html_e('Adds a specific string data to the layer, if we want to use it in custom code later', 'vision'); ?>"></div>
496	<div class="vision-label"><?php esc_html_e('User data', 'vision'); ?></div>
497	<textarea class="vision-long" al-textarea="appData.ui.activeLayer.userData"></textarea>
498	</div>
499	</div>
500	</div>
501
502	<div class="vision-block" al-attr.class.vision-block-folded="appData.ui.layerTab.appearance">
503	<div class="vision-block-header" al-on.click="appData.fn.onLayerTab(appData,'appearance')">
504	<div class="vision-block-title"><?php esc_html_e('Appearance', 'vision'); ?></div>
505	<div class="vision-block-state"></div>
506	</div>
507	<div class="vision-block-data">
508	<div class="vision-control">
509	<div class="vision-input-group vision-long">
510	<div class="vision-input-group-cell vision-rgap">
511	<div class="vision-helper" title="<?php esc_html_e('The layer size depends on the image size, it scales with the image', 'vision'); ?>"></div>
512	<div class="vision-label"><?php esc_html_e('Zoom with map', 'vision'); ?></div>
513	<div al-toggle="appData.ui.activeLayer.scaling"></div>
514	</div>
515	<div class="vision-input-group-cell vision-lgap">
516	<div class="vision-helper" title="<?php esc_html_e('The layer is never the target of mouse events', 'vision'); ?>"></div>
517	<div class="vision-label"><?php esc_html_e('No events', 'vision'); ?></div>
518	<div al-toggle="appData.ui.activeLayer.noevents"></div>
519	</div>
520	</div>
521	</div>
522
523	<div al-if="appData.ui.activeLayer.type == 'link'">
524	<div class="vision-control">
525	<div class="vision-helper" title="<?php esc_html_e('Normal color in hexadecimal format (#fff or #555555)', 'vision'); ?>"></div>
526	<div class="vision-label"><?php esc_html_e('Normal color', 'vision'); ?></div>
527	<div class="vision-color vision-long" al-color="appData.ui.activeLayer.link.normalColor"></div>
528	</div>
529
530	<div class="vision-control">
531	<div class="vision-helper" title="<?php esc_html_e('Hover color in hexadecimal format (#fff or #555555)', 'vision'); ?>"></div>
532	<div class="vision-label"><?php esc_html_e('Hover color', 'vision'); ?></div>
533	<div class="vision-color vision-long" al-color="appData.ui.activeLayer.link.hoverColor"></div>
534	</div>
535
536	<div class="vision-control">
537	<div class="vision-helper" title="<?php esc_html_e('Sets a radius (5px or 50%)', 'vision'); ?>"></div>
538	<div class="vision-label"><?php esc_html_e('Radius', 'vision'); ?></div>
539	<input class="vision-number vision-long" type="text" al-text="appData.ui.activeLayer.link.radius" placeholder="<?php esc_html_e('Example: 10px', 'vision'); ?>">
540	</div>
541	</div>
542
543	<div al-if="appData.ui.activeLayer.type == 'text'">
544	<div class="vision-control">
545	<div class="vision-helper" title="<?php esc_html_e('Add text', 'vision'); ?>"></div>
546	<div class="vision-label"><?php esc_html_e('Text', 'vision'); ?></div>
547	<input class="vision-number vision-long" type="text" al-text="appData.ui.activeLayer.text.data" placeholder="<?php esc_html_e('Text', 'vision'); ?>">
548	</div>
549
550	<div class="vision-control">
551	<div class="vision-helper" title="<?php esc_html_e('Specifies a font of the text', 'vision'); ?>"></div>
552	<div class="vision-label"><?php esc_html_e('Font', 'vision'); ?></div>
553	<div class="vision-select vision-capitalize vision-long" al-textfont="appData.ui.activeLayer.text.font" data-fonts="appData.fonts"></div>
554	</div>
555
556	<div class="vision-control">
557	<div class="vision-helper" title="<?php esc_html_e('Text color in hexadecimal format (#fff or #555555)', 'vision'); ?>"></div>
558	<div class="vision-label"><?php esc_html_e('Text color', 'vision'); ?></div>
559	<div class="vision-color vision-long" al-color="appData.ui.activeLayer.text.color"></div>
560	</div>
561
562	<div class="vision-control">
563	<div class="vision-input-group vision-long">
564	<div class="vision-input-group-cell vision-rgap">
565	<div class="vision-helper" title="<?php esc_html_e('Sets the text size in px', 'vision'); ?>"></div>
566	<div class="vision-label"><?php esc_html_e('Text size [px]', 'vision'); ?></div>
567	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.text.size" placeholder="<?php esc_html_e('Example: 18', 'vision'); ?>">
568	</div>
569	<div class="vision-input-group-cell vision-lgap">
570	<div class="vision-helper" title="<?php esc_html_e('Sets the text line height in px', 'vision'); ?>"></div>
571	<div class="vision-label"><?php esc_html_e('Line height [px]', 'vision'); ?></div>
572	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.text.lineHeight" placeholder="<?php esc_html_e('Example: 18', 'vision'); ?>">
573	</div>
574	</div>
575	</div>
576
577	<div class="vision-control">
578	<div class="vision-input-group vision-long">
579	<div class="vision-input-group-cell vision-rgap">
580	<div class="vision-helper" title="<?php esc_html_e('Specifies the horizontal alignment of the text', 'vision'); ?>"></div>
581	<div class="vision-label"><?php esc_html_e('Text align', 'vision'); ?></div>
582	<div class="vision-select vision-long" al-textalign="appData.ui.activeLayer.text.align"></div>
583	</div>
584	<div class="vision-input-group-cell vision-lgap">
585	<div class="vision-helper" title="<?php esc_html_e('Specifies the spacing behavior between text characters', 'vision'); ?>"></div>
586	<div class="vision-label"><?php esc_html_e('Letter spacing [px]', 'vision'); ?></div>
587	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.text.letterSpacing" placeholder="<?php esc_html_e('Example: 1', 'vision'); ?>">
588	</div>
589	</div>
590	</div>
591
592	<div class="vision-control">
593	<div class="vision-helper" title="<?php esc_html_e('Sets a background image (jpeg or png format)', 'vision'); ?>"></div>
594	<div class="vision-label"><?php esc_html_e('Background image', 'vision'); ?></div>
595	<div class="vision-input-group vision-long">
596	<div class="vision-input-group-cell">
597	<input class="vision-text vision-long vision-no-brr" type="text" al-text="appData.ui.activeLayer.text.background.file.url" placeholder="<?php esc_html_e('Select an image', 'vision'); ?>">
598	</div>
599	<div class="vision-input-group-cell vision-pinch">
600	<div class="vision-btn vision-default vision-no-bl" al-on.click="appData.fn.selectImage(appData, appData.rootScope, appData.ui.activeLayer.text.background.file)"><span><i class="icon icon-folder"></i></span></div>
601	</div>
602	</div>
603	</div>
604
605	<!-- background color & repeat -->
606	<div class="vision-control">
607	<div class="vision-input-group vision-long">
608	<div class="vision-input-group-cell vision-rgap">
609	<div class="vision-helper" title="<?php esc_html_e('Sets a background color', 'vision'); ?>"></div>
610	<div class="vision-label"><?php esc_html_e('Background color', 'vision'); ?></div>
611	<div class="vision-color vision-long" al-color="appData.ui.activeLayer.text.background.color"></div>
612	</div>
613	<div class="vision-input-group-cell vision-lgap">
614	<div class="vision-helper" title="<?php esc_html_e('How the background image will be repeated', 'vision'); ?>"></div>
615	<div class="vision-label"><?php esc_html_e('Background repeat', 'vision'); ?></div>
616	<div class="vision-select vision-long" al-backgroundrepeat="appData.ui.activeLayer.text.background.repeat"></div>
617	</div>
618	</div>
619	</div>
620
621	<div class="vision-control">
622	<div class="vision-input-group vision-long">
623	<div class="vision-input-group-cell vision-rgap">
624	<div class="vision-helper" title="<?php esc_html_e('Specifies a size of the background image', 'vision'); ?>"></div>
625	<div class="vision-label"><?php esc_html_e('Background size', 'vision'); ?></div>
626	<div class="vision-select vision-long" al-backgroundsize="appData.ui.activeLayer.text.background.size"></div>
627	</div>
628	<div class="vision-input-group-cell vision-lgap">
629	<div class="vision-helper" title="<?php esc_html_e('Sets a starting position of the background image', 'vision'); ?>"></div>
630	<div class="vision-label"><?php esc_html_e('Background position', 'vision'); ?></div>
631	<input class="vision-text vision-long" type="text" al-text="appData.ui.activeLayer.text.background.position" placeholder="<?php esc_html_e('Example: 50% 50%', 'vision'); ?>">
632	</div>
633	</div>
634	</div>
635	</div>
636
637	<div al-if="appData.ui.activeLayer.type == 'image'">
638	<div class="vision-control">
639	<div class="vision-helper" title="<?php esc_html_e('Sets a background image (jpeg or png format)', 'vision'); ?>"></div>
640	<div class="vision-label"><?php esc_html_e('Background image', 'vision'); ?></div>
641	<div class="vision-input-group vision-long">
642	<div class="vision-input-group-cell">
643	<input class="vision-text vision-long vision-no-brr" type="text" al-text="appData.ui.activeLayer.image.background.file.url" placeholder="<?php esc_html_e('Select an image', 'vision'); ?>">
644	</div>
645	<div class="vision-input-group-cell vision-pinch">
646	<div class="vision-btn vision-default vision-no-bl" al-on.click="appData.fn.selectImage(appData, appData.rootScope, appData.ui.activeLayer.image.background.file)"><span><i class="icon icon-folder"></i></span></div>
647	</div>
648	</div>
649	</div>
650
651	<!-- background color & repeat -->
652	<div class="vision-control">
653	<div class="vision-input-group vision-long">
654	<div class="vision-input-group-cell vision-rgap">
655	<div class="vision-helper" title="<?php esc_html_e('Sets a background color', 'vision'); ?>"></div>
656	<div class="vision-label"><?php esc_html_e('Background color', 'vision'); ?></div>
657	<div class="vision-color vision-long" al-color="appData.ui.activeLayer.image.background.color"></div>
658	</div>
659	<div class="vision-input-group-cell vision-lgap">
660	<div class="vision-helper" title="<?php esc_html_e('How the background image will be repeated', 'vision'); ?>"></div>
661	<div class="vision-label"><?php esc_html_e('Background repeat', 'vision'); ?></div>
662	<div class="vision-select vision-long" al-backgroundrepeat="appData.ui.activeLayer.image.background.repeat"></div>
663	</div>
664	</div>
665	</div>
666
667	<div class="vision-control">
668	<div class="vision-input-group vision-long">
669	<div class="vision-input-group-cell vision-rgap">
670	<div class="vision-helper" title="<?php esc_html_e('Specifies a size of the background image', 'vision'); ?>"></div>
671	<div class="vision-label"><?php esc_html_e('Background size', 'vision'); ?></div>
672	<div class="vision-select vision-long" al-backgroundsize="appData.ui.activeLayer.image.background.size"></div>
673	</div>
674	<div class="vision-input-group-cell vision-lgap">
675	<div class="vision-helper" title="<?php esc_html_e('Sets a starting position of the background image', 'vision'); ?>"></div>
676	<div class="vision-label"><?php esc_html_e('Background position', 'vision'); ?></div>
677	<input class="vision-text vision-long" type="text" al-text="appData.ui.activeLayer.image.background.position" placeholder="<?php esc_html_e('Example: 50% 50%', 'vision'); ?>">
678	</div>
679	</div>
680	</div>
681	</div>
682
683	<div al-if="appData.ui.activeLayer.type == 'svg'">
684	<div class="vision-control">
685	<div class="vision-helper" title="<?php esc_html_e('Set svg file', 'vision'); ?>"></div>
686	<div class="vision-label"><?php esc_html_e('File', 'vision'); ?></div>
687	<div class="vision-input-group vision-long">
688	<div class="vision-input-group-cell">
689	<input class="vision-text vision-long" type="text" al-text="appData.ui.activeLayer.svg.file.url" placeholder="<?php esc_html_e('Select a file', 'vision'); ?>">
690	</div>
691	<div class="vision-input-group-cell vision-pinch">
692	<div class="vision-btn vision-default vision-no-bl" al-on.click="appData.fn.selectImage(appData, appData.rootScope, appData.ui.activeLayer.svg.file)"><span><i class="icon icon-folder"></i></span></div>
693	</div>
694	</div>
695	</div>
696	</div>
697
698	<div class="vision-control">
699	<div class="vision-helper" title="<?php esc_html_e('Set additional css classes to the layer', 'vision'); ?>"></div>
700	<div class="vision-label"><?php esc_html_e('Extra CSS classes', 'vision'); ?></div>
701	<input class="vision-number vision-long" type="text" al-text="appData.ui.activeLayer.className">
702	</div>
703	</div>
704	</div>
705	</div>
706	</div>
707	</div>
708	<div class="vision-data" al-attr.class.vision-active="appData.ui.rightSidebarTabs.tooltip">
709	<div class="vision-data-block" al-attr.class.vision-active="appData.ui.activeLayer == null">
710	<div class="vision-info"><?php esc_html_e('Please select a layer to access settings', 'vision'); ?></div>
711	</div>
712	<div class="vision-data-block" al-attr.class.vision-active="appData.ui.activeLayer != null">
713	<div class="vision-block-list">
714	<div class="vision-block" al-attr.class.vision-block-folded="appData.ui.tooltipTab.data">
715	<div class="vision-block-header" al-on.click="appData.fn.onTooltipTab(appData,'data')">
716	<div class="vision-block-title"><?php esc_html_e('Data', 'vision'); ?></div>
717	<div class="vision-block-state"></div>
718	</div>
719	<div class="vision-block-data">
720	<div al-if="appData.ui.activeLayer != null">
721	<div class="vision-control">
722	<div class="vision-helper" title="<?php esc_html_e('Enable/disable tooltip for the selected layer', 'vision'); ?>"></div>
723	<div class="vision-label"><?php esc_html_e('Enable tooltip', 'vision'); ?></div>
724	<div al-toggle="appData.ui.activeLayer.tooltip.active"></div>
725	</div>
726	</div>
727
728	<div class="vision-control">
729	<?php
730	$settings = [
731	'tinymce' => true,
732	'textarea_name' => 'vision-tooltip-text',
733	'wpautop' => false,
734	'editor_height' => 200, // In pixels, takes precedence and has no default value
735	'drag_drop_upload' => true,
736	'media_buttons' => true,
737	'teeny' => true,
738	'quicktags' => true
739	];
740	wp_editor('','vision-tooltip-editor', $settings);
741	?>
742	</div>
743	</div>
744	</div>
745
746	<div class="vision-block" al-attr.class.vision-block-folded="appData.ui.tooltipTab.appearance">
747	<div class="vision-block-header" al-on.click="appData.fn.onTooltipTab(appData,'appearance')">
748	<div class="vision-block-title"><?php esc_html_e('Appearance', 'vision'); ?></div>
749	<div class="vision-block-state"></div>
750	</div>
751	<div class="vision-block-data">
752	<div al-if="appData.ui.activeLayer != null">
753	<div class="vision-control">
754	<div class="vision-input-group vision-long">
755	<div class="vision-input-group-cell vision-rgap">
756	<div class="vision-helper" title="<?php esc_html_e('Specifies a tooltip event trigger', 'vision'); ?>"></div>
757	<div class="vision-label"><?php esc_html_e('Trigger', 'vision'); ?></div>
758	<div class="vision-select vision-long" al-tooltiptrigger="appData.ui.activeLayer.tooltip.trigger"></div>
759	</div>
760	<div class="vision-input-group-cell vision-lgap">
761	<div class="vision-helper" title="<?php esc_html_e('Specifies a tooltip placement', 'vision'); ?>"></div>
762	<div class="vision-label"><?php esc_html_e('Placement', 'vision'); ?></div>
763	<div class="vision-select vision-long" al-tooltipplacement="appData.ui.activeLayer.tooltip.placement"></div>
764	</div>
765	</div>
766	</div>
767
768	<div class="vision-control">
769	<div class="vision-helper" title="<?php esc_html_e('Set tooltip offset', 'vision'); ?>"></div>
770	<div class="vision-input-group vision-long">
771	<div class="vision-input-group-cell vision-rgap">
772	<div class="vision-label"><?php esc_html_e('Offset top [px]', 'vision'); ?></div>
773	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.tooltip.offset.y">
774	</div>
775	<div class="vision-input-group-cell vision-lgap">
776	<div class="vision-label"><?php esc_html_e('Offset left [px]', 'vision'); ?></div>
777	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.tooltip.offset.x">
778	</div>
779	</div>
780	</div>
781
782	<div class="vision-control">
783	<div class="vision-input-group vision-long">
784	<div class="vision-input-group-cell vision-rgap">
785	<div class="vision-helper" title="<?php esc_html_e('The tooltip size depends on the image size', 'vision'); ?>"></div>
786	<div class="vision-label"><?php esc_html_e('Zoom with map', 'vision'); ?></div>
787	<div al-toggle="appData.ui.activeLayer.tooltip.scaling"></div>
788	</div>
789	<div class="vision-input-group-cell vision-lgap">
790	<div class="vision-helper" title="<?php esc_html_e('Determines if the tooltip is placed within the viewport as best it can be if there is not enough space', 'vision'); ?>"></div>
791	<div class="vision-label"><?php esc_html_e('Smart', 'vision'); ?></div>
792	<div al-toggle="appData.ui.activeLayer.tooltip.smart"></div>
793	</div>
794	</div>
795	</div>
796
797	<div class="vision-control">
798	<div class="vision-input-group vision-long">
799	<div class="vision-input-group-cell vision-rgap" al-attr.class.vision-nogap="appData.ui.activeLayer.tooltip.widthFromCSS">
800	<div class="vision-helper" title="<?php esc_html_e('If true, the tooltip width will be taken from CSS rules, dont forget to define them', 'vision'); ?>"></div>
801	<div class="vision-label"><?php esc_html_e('Width from CSS', 'vision'); ?></div>
802	<div al-toggle="appData.ui.activeLayer.tooltip.widthFromCSS"></div>
803	</div>
804	<div class="vision-input-group-cell vision-lgap" al-if="!appData.ui.activeLayer.tooltip.widthFromCSS">
805	<div class="vision-helper" title="<?php esc_html_e('Specifies a tooltip width', 'vision'); ?>"></div>
806	<div class="vision-label"><?php esc_html_e('Width [px]', 'vision'); ?></div>
807	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.tooltip.width" placeholder="<?php esc_html_e('auto', 'vision'); ?>">
808	</div>
809	</div>
810	</div>
811
812	<div class="vision-control" al-if="appData.ui.activeLayer.tooltip.trigger != 'hover'">
813	<div class="vision-helper" title="<?php esc_html_e('The tooltip will be shown immediately once the instance is created', 'vision'); ?>"></div>
814	<div class="vision-label"><?php esc_html_e('Show on init', 'vision'); ?></div>
815	<div al-toggle="appData.ui.activeLayer.tooltip.showOnInit"></div>
816	</div>
817
818	<div class="vision-control" al-if="appData.ui.activeLayer.tooltip.trigger == 'hover'">
819	<div class="vision-input-group vision-long">
820	<!--
821	<div class="vision-input-group-cell vision-rgap">
822	<div class="vision-helper" title="<?php esc_html_e('Enable/disable tooltip follow the cursor as you hover over the layer', 'vision'); ?>"></div>
823	<div class="vision-label"><?php esc_html_e('Follow the cursor', 'vision'); ?></div>
824	<div al-toggle="appData.ui.activeLayer.tooltip.followCursor"></div>
825	</div>
826	-->
827	<div class="vision-input-group-cell vision-rgap">
828	<div class="vision-helper" title="<?php esc_html_e('The tooltip will be shown immediately once the instance is created', 'vision'); ?>"></div>
829	<div class="vision-label"><?php esc_html_e('Show on init', 'vision'); ?></div>
830	<div al-toggle="appData.ui.activeLayer.tooltip.showOnInit"></div>
831	</div>
832	<div class="vision-input-group-cell vision-lgap">
833	<div class="vision-helper" title="<?php esc_html_e('The tooltip won\'t hide when you hover over or click on them', 'vision'); ?>"></div>
834	<div class="vision-label"><?php esc_html_e('Interactive', 'vision'); ?></div>
835	<div al-toggle="appData.ui.activeLayer.tooltip.interactive"></div>
836	</div>
837	</div>
838	</div>
839
840	<div class="vision-control">
841	<div class="vision-helper" title="<?php esc_html_e('Set additional css classes to the tooltip', 'vision'); ?>"></div>
842	<div class="vision-label"><?php esc_html_e('Extra CSS classes', 'vision'); ?></div>
843	<input class="vision-number vision-long" type="text" al-text="appData.ui.activeLayer.tooltip.className">
844	</div>
845
846	<div class="vision-control">
847	<div class="vision-input-group vision-long">
848	<div class="vision-input-group-cell vision-rgap">
849	<div class="vision-helper" title="<?php esc_html_e('Select a show animation effect for the tooltip from the list or write your own', 'vision'); ?>"></div>
850	<div class="vision-label"><?php esc_html_e('Show animation', 'vision'); ?></div>
851	<div class="vision-input-group vision-long">
852	<div class="vision-input-group-cell">
853	<input class="vision-text vision-long vision-no-brr" type="text" al-text="appData.ui.activeLayer.tooltip.showAnimation">
854	</div>
855	<div class="vision-input-group-cell vision-pinch">
856	<div class="vision-btn vision-default vision-no-bl" al-on.click="appData.fn.selectShowAnimation(appData, appData.ui.activeLayer.tooltip)" title="<?php esc_html_e('Select an effect', 'vision'); ?>"><span><i class="icon icon-folder"></i></span></div>
857	</div>
858	</div>
859	</div>
860	<div class="vision-input-group-cell vision-lgap">
861	<div class="vision-helper" title="<?php esc_html_e('Select a hide animation effect for the tooltip from the list or write your own', 'vision'); ?>"></div>
862	<div class="vision-label"><?php esc_html_e('Hide animation', 'vision'); ?></div>
863	<div class="vision-input-group vision-long">
864	<div class="vision-input-group-cell">
865	<input class="vision-text vision-long vision-no-brr" type="text" al-text="appData.ui.activeLayer.tooltip.hideAnimation">
866	</div>
867	<div class="vision-input-group-cell vision-pinch">
868	<div class="vision-btn vision-default vision-no-bl" al-on.click="appData.fn.selectHideAnimation(appData, appData.ui.activeLayer.tooltip)" title="<?php esc_html_e('Select an effect', 'vision'); ?>"><span><i class="icon icon-folder"></i></span></div>
869	</div>
870	</div>
871	</div>
872	</div>
873	</div>
874
875	<div class="vision-control">
876	<div class="vision-helper" title="<?php esc_html_e('Set animation duration for show and hide effects', 'vision'); ?>"></div>
877	<div class="vision-label"><?php esc_html_e('Duration [ms]', 'vision'); ?></div>
878	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.tooltip.duration">
879	</div>
880	</div>
881	</div>
882	</div>
883	</div>
884	</div>
885	</div>
886	<div class="vision-data" al-attr.class.vision-active="appData.ui.rightSidebarTabs.popover">
887	<div class="vision-data-block" al-attr.class.vision-active="appData.ui.activeLayer == null">
888	<div class="vision-info"><?php esc_html_e('Please select a layer to access settings', 'vision'); ?></div>
889	</div>
890	<div class="vision-data-block" al-attr.class.vision-active="appData.ui.activeLayer != null">
891	<div class="vision-block-list">
892	<div class="vision-block" al-attr.class.vision-block-folded="appData.ui.popoverTab.data">
893	<div class="vision-block-header" al-on.click="appData.fn.onPopoverTab(appData,'data')">
894	<div class="vision-block-title"><?php esc_html_e('Data', 'vision'); ?></div>
895	<div class="vision-block-state"></div>
896	</div>
897	<div class="vision-block-data">
898	<div al-if="appData.ui.activeLayer != null">
899	<div class="vision-control">
900	<div class="vision-helper" title="<?php esc_html_e('Enable/disable popover for the selected layer', 'vision'); ?>"></div>
901	<div class="vision-label"><?php esc_html_e('Enable popover', 'vision'); ?></div>
902	<div al-toggle="appData.ui.activeLayer.popover.active"></div>
903	</div>
904	</div>
905
906	<div class="vision-control">
907	<?php
908	$settings = [
909	'tinymce' => true,
910	'textarea_name' => 'vision-popover-text',
911	'wpautop' => false,
912	'editor_height' => 200, // In pixels, takes precedence and has no default value
913	'drag_drop_upload' => true,
914	'media_buttons' => true,
915	'teeny' => true,
916	'quicktags' => true
917	];
918	wp_editor('','vision-popover-editor', $settings);
919	?>
920	</div>
921	</div>
922	</div>
923
924	<div class="vision-block" al-attr.class.vision-block-folded="appData.ui.popoverTab.appearance">
925	<div class="vision-block-header" al-on.click="appData.fn.onPopoverTab(appData,'appearance')">
926	<div class="vision-block-title"><?php esc_html_e('Appearance', 'vision'); ?></div>
927	<div class="vision-block-state"></div>
928	</div>
929	<div class="vision-block-data">
930	<div al-if="appData.ui.activeLayer != null">
931	<div class="vision-control">
932	<div class="vision-input-group vision-long">
933	<div class="vision-input-group-cell vision-rgap">
934	<div class="vision-helper" title="<?php esc_html_e('Specifies a popover desktop type', 'vision'); ?>"></div>
935	<div class="vision-label"><?php esc_html_e('Desktop type', 'vision'); ?></div>
936	<div class="vision-select vision-long" al-popovertype="appData.ui.activeLayer.popover.type"></div>
937	</div>
938	<div class="vision-input-group-cell vision-lgap">
939	<div class="vision-helper" title="<?php esc_html_e('Specifies a popover mobile type', 'vision'); ?>"></div>
940	<div class="vision-label"><?php esc_html_e('Mobile type', 'vision'); ?></div>
941	<div class="vision-select vision-long" al-popovertype="appData.ui.activeLayer.popover.mobileType"></div>
942	</div>
943	</div>
944	</div>
945
946	<div al-if="!(appData.ui.activeLayer.popover.type == 'tooltip' \|\| appData.ui.activeLayer.popover.mobileType == 'tooltip')">
947	<div class="vision-control">
948	<div class="vision-helper" title="<?php esc_html_e('Specifies the event trigger of the popover', 'vision'); ?>"></div>
949	<div class="vision-label"><?php esc_html_e('Trigger', 'vision'); ?></div>
950	<div class="vision-select vision-long" al-popovertrigger="appData.ui.activeLayer.popover.trigger"></div>
951	</div>
952	</div>
953
954	<div al-if="appData.ui.activeLayer.popover.type == 'tooltip' \|\| appData.ui.activeLayer.popover.mobileType == 'tooltip'">
955	<div class="vision-control">
956	<div class="vision-input-group vision-long">
957	<div class="vision-input-group-cell vision-rgap">
958	<div class="vision-helper" title="<?php esc_html_e('Specifies a popover event trigger', 'vision'); ?>"></div>
959	<div class="vision-label"><?php esc_html_e('Trigger', 'vision'); ?></div>
960	<div class="vision-select vision-long" al-tooltiptrigger="appData.ui.activeLayer.popover.trigger"></div>
961	</div>
962	<div class="vision-input-group-cell vision-lgap">
963	<div class="vision-helper" title="<?php esc_html_e('Specifies a popover placement', 'vision'); ?>"></div>
964	<div class="vision-label"><?php esc_html_e('Placement', 'vision'); ?></div>
965	<div class="vision-select vision-long" al-tooltipplacement="appData.ui.activeLayer.popover.placement"></div>
966	</div>
967	</div>
968	</div>
969
970	<div class="vision-control">
971	<div class="vision-helper" title="<?php esc_html_e('Set popover offset', 'vision'); ?>"></div>
972	<div class="vision-input-group vision-long">
973	<div class="vision-input-group-cell vision-rgap">
974	<div class="vision-label"><?php esc_html_e('Offset top [px]', 'vision'); ?></div>
975	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.popover.offset.top">
976	</div>
977	<div class="vision-input-group-cell vision-lgap">
978	<div class="vision-label"><?php esc_html_e('Offset left [px]', 'vision'); ?></div>
979	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.popover.offset.left">
980	</div>
981	</div>
982	</div>
983
984	<div class="vision-control">
985	<div class="vision-input-group vision-long">
986	<div class="vision-input-group-cell vision-rgap">
987	<div class="vision-helper" title="<?php esc_html_e('The popover size depends on the image size', 'vision'); ?>"></div>
988	<div class="vision-label"><?php esc_html_e('Zoom with map', 'vision'); ?></div>
989	<div al-toggle="appData.ui.activeLayer.popover.scaling"></div>
990	</div>
991	<div class="vision-input-group-cell vision-lgap">
992	<div class="vision-helper" title="<?php esc_html_e('Determines if the popover is placed within the viewport as best it can be if there is not enough space', 'vision'); ?>"></div>
993	<div class="vision-label"><?php esc_html_e('Smart', 'vision'); ?></div>
994	<div al-toggle="appData.ui.activeLayer.popover.smart"></div>
995	</div>
996	</div>
997	</div>
998
999	<div class="vision-control">
1000	<div class="vision-input-group vision-long">
1001	<div class="vision-input-group-cell vision-rgap" al-attr.class.vision-nogap="appData.ui.activeLayer.popover.widthFromCSS">
1002	<div class="vision-helper" title="<?php esc_html_e('If true, the tooltip width will be taken from CSS rules, dont forget to define them', 'vision'); ?>"></div>
1003	<div class="vision-label"><?php esc_html_e('Width from CSS', 'vision'); ?></div>
1004	<div al-toggle="appData.ui.activeLayer.popover.widthFromCSS"></div>
1005	</div>
1006	<div class="vision-input-group-cell vision-lgap" al-if="!appData.ui.activeLayer.popover.widthFromCSS">
1007	<div class="vision-helper" title="<?php esc_html_e('Specifies the width of the popover', 'vision'); ?>"></div>
1008	<div class="vision-label"><?php esc_html_e('Width [px]', 'vision'); ?></div>
1009	<input class="vision-number vision-long" al-integer="appData.ui.activeLayer.popover.width" placeholder="<?php esc_html_e('auto', 'vision'); ?>">
1010	</div>
1011	</div>
1012	</div>
1013	</div>
1014
1015	<div class="vision-control" al-if="appData.ui.activeLayer.popover.trigger != 'hover'">
1016	<div class="vision-helper" title="<?php esc_html_e('The popover will be shown immediately once the instance is created', 'vision'); ?>"></div>
1017	<div class="vision-label"><?php esc_html_e('Show on init', 'vision'); ?></div>
1018	<div al-toggle="appData.ui.activeLayer.popover.showOnInit"></div>
1019	</div>
1020
1021	<div class="vision-control" al-if="appData.ui.activeLayer.popover.trigger == 'hover'">
1022	<div class="vision-input-group vision-long">
1023	<!--
1024	<div class="vision-input-group-cell vision-rgap">
1025	<div class="vision-helper" title="<?php esc_html_e('Enable/disable popover follow the cursor as you hover over the layer', 'vision'); ?>"></div>
1026	<div class="vision-label"><?php esc_html_e('Follow the cursor', 'vision'); ?></div>
1027	<div al-toggle="appData.ui.activeLayer.popover.followCursor"></div>
1028	</div>
1029	-->
1030	<div class="vision-input-group-cell vision-rgap">
1031	<div class="vision-helper" title="<?php esc_html_e('The popover will be shown immediately once the instance is created', 'vision'); ?>"></div>
1032	<div class="vision-label"><?php esc_html_e('Show on init', 'vision'); ?></div>
1033	<div al-toggle="appData.ui.activeLayer.popover.showOnInit"></div>
1034	</div>
1035	<div class="vision-input-group-cell vision-lgap">
1036	<div class="vision-helper" title="<?php esc_html_e('The popover won\'t hide when you hover over or click on them', 'vision'); ?>"></div>
1037	<div class="vision-label"><?php esc_html_e('Interactive', 'vision'); ?></div>
1038	<div al-toggle="appData.ui.activeLayer.popover.interactive"></div>
1039	</div>
1040	</div>
1041	</div>
1042
1043	<div class="vision-control">
1044	<div class="vision-helper" title="<?php esc_html_e('Set additional css classes to the popover', 'vision'); ?>"></div>
1045	<div class="vision-label"><?php esc_html_e('Extra CSS classes', 'vision'); ?></div>
1046	<input class="vision-number vision-long" type="text" al-text="appData.ui.activeLayer.popover.className">
1047	</div>
1048	</div>
1049	</div>
1050	</div>
1051	</div>
1052	</div>
1053	</div>
1054	</div>
1055	</div>
1056	</div>
1057	</div>
1058	<div class="vision-section" al-attr.class.vision-active="appData.ui.tabs.customCSS" al-if="appData.ui.tabs.customCSS">
1059	<div class="vision-stage">
1060	<div class="vision-main-panel vision-main-panel-general">
1061	<div class="vision-data vision-active">
1062	<div class="vision-control">
1063	<div class="vision-helper" title="<?php esc_html_e('Enable/disable custom styles', 'vision'); ?>"></div>
1064	<div class="vision-input-group">
1065	<div class="vision-input-group-cell vision-pinch">
1066	<div al-toggle="appData.config.customCSS.active"></div>
1067	</div>
1068	<div class="vision-input-group-cell">
1069	<div class="vision-label vision-offset-top"><?php esc_html_e('Enable styles', 'vision'); ?></div>
1070	</div>
1071	</div>
1072	</div>
1073	<div class="vision-control vision-full-height">
1074	<pre id="vision-notepad-css" class="vision-notepad"></pre>
1075	</div>
1076	</div>
1077	</div>
1078	</div>
1079	</div>
1080	<div class="vision-section" al-attr.class.vision-active="appData.ui.tabs.customJS" al-if="appData.ui.tabs.customJS">
1081	<div class="vision-stage">
1082	<div class="vision-main-panel vision-main-panel-general">
1083	<div class="vision-data vision-active">
1084	<div class="vision-control">
1085	<div class="vision-helper" title="<?php esc_html_e('Enable/disable custom javascript code', 'vision'); ?>"></div>
1086	<div class="vision-input-group">
1087	<div class="vision-input-group-cell vision-pinch">
1088	<div al-toggle="appData.config.customJS.active"></div>
1089	</div>
1090	<div class="vision-input-group-cell">
1091	<div class="vision-label vision-offset-top"><?php esc_html_e('Enable javascript code', 'vision'); ?></div>
1092	</div>
1093	</div>
1094	</div>
1095	<div class="vision-control vision-full-height">
1096	<pre id="vision-notepad-js" class="vision-notepad"></pre>
1097	</div>
1098	</div>
1099	</div>
1100	</div>
1101	</div>
1102	<div class="vision-section" al-attr.class.vision-active="appData.ui.tabs.shortcode" al-if="appData.wp_item_id">
1103	<div class="vision-main-panel vision-main-panel-general">
1104	<div class="vision-data vision-active">
1105	<div class="vision-control">
1106	<div class="vision-info"><?php esc_html_e('Use a shortcode like the one below, copy and paste it into a post or page.', 'vision'); ?></div>
1107	</div>
1108
1109	<div class="vision-control">
1110	<div class="vision-label"><?php esc_html_e('Standard shortcode', 'vision'); ?></div>
1111	<div class="vision-input-group">
1112	<div class="vision-input-group-cell">
1113	<input id="vision-shortcode-1" class="vision-text vision-long" type="text" value='[vision id="{{appData.wp_item_id}}"]' readonly="readonly">
1114	</div>
1115	<div class="vision-input-group-cell vision-pinch">
1116	<div class="vision-btn vision-default vision-no-bl" al-on.click="appData.fn.copyToClipboard(appData, '#vision-shortcode-1')" title="<?php esc_html_e('Copy to clipboard', 'vision'); ?>"><span><i class="icon icon-clipboard"></i></span></div>
1117	</div>
1118	</div>
1119	</div>
1120
1121	<p><?php esc_html_e('Next to that you can also add a few optional arguments to your shortcode:', 'vision'); ?></p>
1122	<table class="vision-table">
1123	<tbody>
1124	<tr>
1125	<th><?php esc_html_e('Variable', 'vision'); ?></th>
1126	<th><?php esc_html_e('Value', 'vision'); ?></th>
1127	</tr>
1128	<tr>
1129	<td><code>id</code></td>
1130	<td><?php esc_html_e('item ID', 'vision'); ?></td>
1131	</tr>
1132	<tr>
1133	<td><code>slug</code></td>
1134	<td><?php esc_html_e('slug identifier', 'vision'); ?></td>
1135	</tr>
1136	<tr>
1137	<td><code>class</code></td>
1138	<td><?php esc_html_e('custom CSS class', 'vision'); ?></td>
1139	</tr>
1140	</tbody>
1141	</table>
1142	</div>
1143	</div>
1144	</div>
1145	</div>
1146	</div>
1147	</div>
1148	<div id="vision-modals" class="vision-modals">
1149	</div>
1150	</div>
1151	</div>
1152	<!-- /end vision app -->