PageRenderTime 61ms CodeModel.GetById 23ms RepoModel.GetById 0ms app.codeStats 1ms

/wp-content/plugins/LayerSlider/builder.php

https://github.com/alniko009/magic
PHP | 1133 lines | 1090 code | 31 blank | 12 comment | 111 complexity | f7a35cbf660e67dfce6d7baf896c5ac8 MD5 | raw file
Possible License(s): GPL-2.0, LGPL-2.1

Large files files are truncated, but you can click here to view the full file

    

  1. <?php
    2. 

  2. 

  3. 	// Custom transitions file
    4. 

  4. 	$upload_dir = wp_upload_dir();
    5. 

  5. 	$custom_trs = $upload_dir['basedir'] . '/layerslider.custom.transitions.js';
    6. 

  6. 

  7. 	// Sample transitions file
    8. 

  8. 	$sample_trs = dirname(__FILE__) . '/sampleslider/sample_transitions.js';
    9. 

  9. 

  10. 	// Get transition file
    11. 

  11. 	if(file_exists($custom_trs)) {
    12. 

  12. 		$data = file_get_contents($custom_trs);
    13. 

  13. 	} else {
    14. 

  14. 		$data = file_get_contents($sample_trs);
    15. 

  15. 	}
    16. 

  16. 

  17. 	// Get JSON part
    18. 

  18. 	$data = substr($data, 35);
    19. 

  19. 	$data = substr($data, 0, -1);
    20. 

  20. 

  21. 

  22. 	// Parse data
    23. 

  23. 	$data = json_decode($data, true);
    24. 

  24. 

  25. 	// Get screen options
    26. 

  26. 	$lsScreenOptions = get_option('lsScreenOptions', '0');
    27. 

  27. 	$lsScreenOptions = ($lsScreenOptions == 0) ? array() : $lsScreenOptions;
    28. 

  28. 	$lsScreenOptions = is_array($lsScreenOptions) ? $lsScreenOptions : unserialize($lsScreenOptions);
    29. 

  29. 

  30. 	// Defaults
    31. 

  31. 	if(!isset($lsScreenOptions['showTooltips'])) {
    32. 

  32. 		$lsScreenOptions['showTooltips'] = 'true';
    33. 

  33. 	}
    34. 

  34. 

  35. 	// Debug
    36. 

  36. 	//print_r($data);
    37. 

  37. 

  38. 

  39. 	// Function to convert array keys to property names
    40. 

  40. 	function lsTrGetProperty($key) {
    41. 

  41. 

  42. 		switch ($key) {
    43. 

  43. 			case 'scale3d' :
    44. 

  44. 				return 'Scale3D';
    45. 

  45. 				break;
    46. 

  46. 

  47. 			case 'rotateX' :
    48. 

  48. 				return 'RotateX';
    49. 

  49. 				break;
    50. 

  50. 

  51. 			case 'rotateY' :
    52. 

  52. 				return 'RotateY';
    53. 

  53. 				break;
    54. 

  54. 

  55. 			case 'x' :
    56. 

  56. 				return 'MoveX';
    57. 

  57. 				break;
    58. 

  58. 

  59. 			case 'y' :
    60. 

  60. 				return 'MoveY';
    61. 

  61. 				break;
    62. 

  62. 

  63. 			case 'delay' :
    64. 

  64. 				return 'Delay';
    65. 

  65. 				break;
    66. 

  66. 

  67. 			default :
    68. 

  68. 				return $key;
    69. 

  69. 				break;
    70. 

  70. 		}
    71. 

  71. 	}
    72. 

  72. ?>
    73. 

  73. 

  74. <div id="ls-screen-options" class="metabox-prefs hidden">
    75. 

  75. 	<div id="screen-options-wrap" class="hidden">
    76. 

  76. 		<form id="ls-screen-options-form" action="<?php echo $_SERVER['REQUEST_URI']?>" method="post">
    77. 

  77. 			<h5>Show on screen</h5>
    78. 

  78. 			<label>
    79. 

  79. 				<input type="checkbox" name="showTooltips"<?php echo $lsScreenOptions['showTooltips'] == 'true' ? ' checked="checked"' : ''?>> Tooltips
    80. 

  80. 			</label>
    81. 

  81. 		</form>
    82. 

  82. 	</div>
    83. 

  83. 	<div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle">
    84. 

  84. 		<a href="#screen-options-wrap" id="show-settings-link" class="show-settings">Screen Options</a>
    85. 

  85. 	</div>
    86. 

  86. </div>
    87. 

  87. 

  88. <div id="ls-tr-sample-3d">
    89. 

  89. 	<div class="ls-transition-item">
    90. 

  90. 		<table class="ls-box ls-tr-settings">
    91. 

  91. 			<thead>
    92. 

  92. 				<tr>
    93. 

  93. 					<td colspan="4"><?php _e('Preview', 'LayerSlider') ?></td>
    94. 

  94. 				</tr>
    95. 

  95. 			</thead>
    96. 

  96. 			<tbody>
    97. 

  97. 				<tr>
    98. 

  98. 					<td colspan="4">
    99. 

  99. 						<div class="ls-builder-preview ls-transition-preview">
    100. 

  100. 							<img src="<?php echo $GLOBALS['lsPluginPath'] ?>img/sample_slide_1.png" alt="preview image">
    101. 

  101. 						</div>
    102. 

  102. 						<div class="ls-builder-preview-button">
    103. 

  103. 							<button class="button">Enter Preview</button>
    104. 

  104. 						</div>
    105. 

  105. 					</td>
    106. 

  106. 				</tr>
    107. 

  107. 			</tbody>
    108. 

  108. 			<thead>
    109. 

  109. 				<tr>
    110. 

  110. 					<td colspan="4"><?php _e('Basic properties', 'LayerSlider') ?></td>
    111. 

  111. 				</tr>
    112. 

  112. 			</thead>
    113. 

  113. 			<tbody class="basic">
    114. 

  114. 				<tr>
    115. 

  115. 					<td class="right"><?php _e('Transition name', 'LayerSlider') ?></td>
    116. 

  116. 					<td colspan="3"><input type="text" name="name" value="Turn top" data-help="<?php _e('The name of your custom transition. When you will edit a slider, it will appear with this name, so you can easily identify the individual transitions.', 'LayerSlider') ?>"></td>
    117. 

  117. 				</tr>
    118. 

  118. 				<tr>
    119. 

  119. 					<td class="right"><?php _e('Rows', 'LayerSlider') ?></td>
    120. 

  120. 					<td><input type="text" name="rows" value="1" data-help="<?php _e('<number> or <min_number>,<max_number> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many rows of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
    121. 

  121. 					<td class="right"><?php _e('Cols', 'LayerSlider') ?></td>
    122. 

  122. 					<td><input type="text" name="cols" value="1" data-help="<?php _e('<number> or <min_number>,<max_number> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many columns of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
    123. 

  123. 				</tr>
    124. 

  124. 			</tbody>
    125. 

  125. 			<thead>
    126. 

  126. 				<tr>
    127. 

  127. 					<td colspan="4"><?php _e('Tiles', 'LayerSlider') ?></td>
    128. 

  128. 				</tr>
    129. 

  129. 			</thead>
    130. 

  130. 			<tbody class="tile">
    131. 

  131. 				<tr>
    132. 

  132. 					<td class="right"><?php _e('Delay', 'LayerSlider') ?></td>
    133. 

  133. 					<td><input type="text" name="delay" value="75" data-help="<?php _e('You can apply a delay between the tiles and postpone their animation relative to each other.', 'LayerSlider') ?>"></td>
    134. 

  134. 					<td class="right"><?php _e('Sequence', 'LayerSlider') ?></td>
    135. 

  135. 					<td>
    136. 

  136. 						<select name="sequence" data-help="<?php _e('You can control the animation order of the tiles here.', 'LayerSlider') ?>">
    137. 

  137. 							<option value="forward"><?php _e('Forward', 'LayerSlider') ?></option>
    138. 

  138. 							<option value="reverse"><?php _e('Reverse', 'LayerSlider') ?></option>
    139. 

  139. 							<option value="col-forward"><?php _e('Col-forward', 'LayerSlider') ?></option>
    140. 

  140. 							<option value="col-reverse"><?php _e('Col-reverse', 'LayerSlider') ?></option>
    141. 

  141. 							<option value="random"><?php _e('Random', 'LayerSlider') ?></option>
    142. 

  142. 						</select>
    143. 

  143. 					</td>
    144. 

  144. 				</tr>
    145. 

  145. 				<tr>
    146. 

  146. 					<td></td>
    147. 

  147. 					<td></td>
    148. 

  148. 					<td class="right"><?php _e('Depth', 'LayerSlider') ?></td>
    149. 

  149. 					<td>
    150. 

  150. 						<label data-help="<?php _e('The script will try to identify the optimal depth for your rotated objects (tiles). With this option, you can force your objects to have large depth when performing 180 degree (and its multiplies) rotation.', 'LayerSlider') ?>">
    151. 

  151. 							<input type="checkbox" class="checkbox" name="depth" value="large">
    152. 

  152. 							Large depth
    153. 

  153. 						</label>
    154. 

  154. 					</td>
    155. 

  155. 				</tr>
    156. 

  156. 			</tbody>
    157. 

  157. 			<thead>
    158. 

  158. 				<tr>
    159. 

  159. 					<td colspan="4">
    160. 

  160. 						<?php _e('Before animation', 'LayerSlider') ?>
    161. 

  161. 						<p class="ls-builder-checkbox">
    162. 

  162. 							<label><input type="checkbox" class="ls-builder-collapse-toggle"> Enabled</label>
    163. 

  163. 						</p>
    164. 

  164. 					</td>
    165. 

  165. 				</tr>
    166. 

  166. 			</thead>
    167. 

  167. 			<tbody class="before ls-builder-collapsed">
    168. 

  168. 				<tr>
    169. 

  169. 					<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
    170. 

  170. 					<td><input type="text" name="duration" value="1000" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
    171. 

  171. 					<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
    172. 

  172. 					<td>
    173. 

  173. 						<select name="easing" data-help="<?php _e('The timing function of the animation, with it you can manipualte the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
    174. 

  174. 							<option>linear</option>
    175. 

  175. 							<option>easeInQuad</option>
    176. 

  176. 							<option>easeOutQuad</option>
    177. 

  177. 							<option>easeInOutQuad</option>
    178. 

  178. 							<option>easeInCubic</option>
    179. 

  179. 							<option>easeOutCubic</option>
    180. 

  180. 							<option>easeInOutCubic</option>
    181. 

  181. 							<option>easeInQuart</option>
    182. 

  182. 							<option>easeOutQuart</option>
    183. 

  183. 							<option>easeInOutQuart</option>
    184. 

  184. 							<option>easeInQuint</option>
    185. 

  185. 							<option>easeOutQuint</option>
    186. 

  186. 							<option selected="selected">easeInOutQuint</option>
    187. 

  187. 							<option>easeInSine</option>
    188. 

  188. 							<option>easeOutSine</option>
    189. 

  189. 							<option>easeInOutSine</option>
    190. 

  190. 							<option>easeInExpo</option>
    191. 

  191. 							<option>easeOutExpo</option>
    192. 

  192. 							<option>easeInOutExpo</option>
    193. 

  193. 							<option>easeInCirc</option>
    194. 

  194. 							<option>easeOutCirc</option>
    195. 

  195. 							<option>easeInOutCirc</option>
    196. 

  196. 							<option>easeInBack</option>
    197. 

  197. 							<option>easeOutBack</option>
    198. 

  198. 							<option>easeInOutBack</option>
    199. 

  199. 						</select>
    200. 

  200. 					</td>
    201. 

  201. 				</tr>
    202. 

  202. 				<tr class="transition">
    203. 

  203. 					<td colspan="4">
    204. 

  204. 						<ul class="ls-tr-tags"></ul>
    205. 

  205. 						<p class="ls-tr-add-property">
    206. 

  206. 							<a href="#" class="ls-icon-tr-add"><?php _e('Add new', 'LayerSlider') ?></a>
    207. 

  207. 							<select>
    208. 

  208. 								<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
    209. 

  209. 								<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
    210. 

  210. 								<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
    211. 

  211. 								<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
    212. 

  212. 							</select>
    213. 

  213. 						</p>
    214. 

  214. 					</td>
    215. 

  215. 				</tr>
    216. 

  216. 			</tbody>
    217. 

  217. 			<thead>
    218. 

  218. 				<tr>
    219. 

  219. 					<td colspan="4">
    220. 

  220. 						<?php _e('Animation', 'LayerSlider') ?>
    221. 

  221. 					</td>
    222. 

  222. 				</tr>
    223. 

  223. 			</thead>
    224. 

  224. 			<tbody class="animation">
    225. 

  225. 				<tr>
    226. 

  226. 					<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
    227. 

  227. 					<td><input type="text" name="duration" value="1000" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
    228. 

  228. 					<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
    229. 

  229. 					<td>
    230. 

  230. 						<select name="easing" data-help="<?php _e('The timing function of the animation, with it you can manipualte the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
    231. 

  231. 							<option>linear</option>
    232. 

  232. 							<option>easeInQuad</option>
    233. 

  233. 							<option>easeOutQuad</option>
    234. 

  234. 							<option>easeInOutQuad</option>
    235. 

  235. 							<option>easeInCubic</option>
    236. 

  236. 							<option>easeOutCubic</option>
    237. 

  237. 							<option>easeInOutCubic</option>
    238. 

  238. 							<option>easeInQuart</option>
    239. 

  239. 							<option>easeOutQuart</option>
    240. 

  240. 							<option>easeInOutQuart</option>
    241. 

  241. 							<option>easeInQuint</option>
    242. 

  242. 							<option>easeOutQuint</option>
    243. 

  243. 							<option selected="selected">easeInOutQuint</option>
    244. 

  244. 							<option>easeInSine</option>
    245. 

  245. 							<option>easeOutSine</option>
    246. 

  246. 							<option>easeInOutSine</option>
    247. 

  247. 							<option>easeInExpo</option>
    248. 

  248. 							<option>easeOutExpo</option>
    249. 

  249. 							<option>easeInOutExpo</option>
    250. 

  250. 							<option>easeInCirc</option>
    251. 

  251. 							<option>easeOutCirc</option>
    252. 

  252. 							<option>easeInOutCirc</option>
    253. 

  253. 							<option>easeInBack</option>
    254. 

  254. 							<option>easeOutBack</option>
    255. 

  255. 							<option>easeInOutBack</option>
    256. 

  256. 						</select>
    257. 

  257. 					</td>
    258. 

  258. 				</tr>
    259. 

  259. 				<tr>
    260. 

  260. 					<td></td>
    261. 

  261. 					<td></td>
    262. 

  262. 					<td class="right"><?php _e('Direction', 'LayerSlider') ?></td>
    263. 

  263. 					<td>
    264. 

  264. 						<select name="direction" data-help="<?php _e('The direction of rotation.', 'LayerSlider') ?>">
    265. 

  265. 							<option value="vertical"><?php _e('Vertical', 'LayerSlider'); ?></option>
    266. 

  266. 							<option value="horizontal" selected="selected"><?php _e('Horizontal', 'LayerSlider') ?></option>
    267. 

  267. 						</select>
    268. 

  268. 					</td>
    269. 

  269. 				</tr>
    270. 

  270. 				<tr class="transition">
    271. 

  271. 					<td colspan="4">
    272. 

  272. 						<ul class="ls-tr-tags">
    273. 

  273. 							<li>
    274. 

  274. 								<p>
    275. 

  275. 									<span><?php _e('RotateX', 'LayerSlider') ?></span>
    276. 

  276. 									<input type="text" name="rotateY" value="90">
    277. 

  277. 								</p>
    278. 

  278. 								<a href="#">x</a>
    279. 

  279. 							</li>
    280. 

  280. 						</ul>
    281. 

  281. 						<p class="ls-tr-add-property">
    282. 

  282. 							<a href="#" class="ls-icon-tr-add"><?php _e('Add new', 'LayerSlider') ?></a>
    283. 

  283. 							<select>
    284. 

  284. 								<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
    285. 

  285. 								<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
    286. 

  286. 								<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
    287. 

  287. 								<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
    288. 

  288. 							</select>
    289. 

  289. 						</p>
    290. 

  290. 					</td>
    291. 

  291. 				</tr>
    292. 

  292. 			</tbody>
    293. 

  293. 			<thead>
    294. 

  294. 				<tr>
    295. 

  295. 					<td colspan="4">
    296. 

  296. 						<?php _e('After animation', 'LayerSlider') ?>
    297. 

  297. 						<p class="ls-builder-checkbox">
    298. 

  298. 							<label><input type="checkbox" class="ls-builder-collapse-toggle"> Enabled</label>
    299. 

  299. 						</p>
    300. 

  300. 					</td>
    301. 

  301. 				</tr>
    302. 

  302. 			</thead>
    303. 

  303. 			<tbody class="after ls-builder-collapsed">
    304. 

  304. 				<tr>
    305. 

  305. 					<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
    306. 

  306. 					<td><input type="text" name="duration" value="1000" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
    307. 

  307. 					<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
    308. 

  308. 					<td>
    309. 

  309. 						<select name="easing" data-help="<?php _e('The timing function of the animation, with it you can manipualte the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
    310. 

  310. 							<option>linear</option>
    311. 

  311. 							<option>easeInQuad</option>
    312. 

  312. 							<option>easeOutQuad</option>
    313. 

  313. 							<option>easeInOutQuad</option>
    314. 

  314. 							<option>easeInCubic</option>
    315. 

  315. 							<option>easeOutCubic</option>
    316. 

  316. 							<option>easeInOutCubic</option>
    317. 

  317. 							<option>easeInQuart</option>
    318. 

  318. 							<option>easeOutQuart</option>
    319. 

  319. 							<option>easeInOutQuart</option>
    320. 

  320. 							<option>easeInQuint</option>
    321. 

  321. 							<option>easeOutQuint</option>
    322. 

  322. 							<option selected="selected">easeInOutQuint</option>
    323. 

  323. 							<option>easeInSine</option>
    324. 

  324. 							<option>easeOutSine</option>
    325. 

  325. 							<option>easeInOutSine</option>
    326. 

  326. 							<option>easeInExpo</option>
    327. 

  327. 							<option>easeOutExpo</option>
    328. 

  328. 							<option>easeInOutExpo</option>
    329. 

  329. 							<option>easeInCirc</option>
    330. 

  330. 							<option>easeOutCirc</option>
    331. 

  331. 							<option>easeInOutCirc</option>
    332. 

  332. 							<option>easeInBack</option>
    333. 

  333. 							<option>easeOutBack</option>
    334. 

  334. 							<option>easeInOutBack</option>
    335. 

  335. 						</select>
    336. 

  336. 					</td>
    337. 

  337. 				</tr>
    338. 

  338. 				<tr class="transition">
    339. 

  339. 					<td colspan="4">
    340. 

  340. 						<ul class="ls-tr-tags"></ul>
    341. 

  341. 						<p class="ls-tr-add-property">
    342. 

  342. 							<a href="#" class="ls-icon-tr-add"><?php _e('Add new', 'LayerSlider') ?></a>
    343. 

  343. 							<select>
    344. 

  344. 								<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
    345. 

  345. 								<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
    346. 

  346. 								<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
    347. 

  347. 								<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
    348. 

  348. 							</select>
    349. 

  349. 						</p>
    350. 

  350. 					</td>
    351. 

  351. 				</tr>
    352. 

  352. 			</tbody>
    353. 

  353. 			<thead>
    354. 

  354. 				<tr>
    355. 

  355. 					<td colspan="4"><?php _e('Transition options', 'LayerSlider') ?></td>
    356. 

  356. 				</tr>
    357. 

  357. 			</thead>
    358. 

  358. 			<tbody>
    359. 

  359. 				<tr>
    360. 

  360. 					<td colspan="4">
    361. 

  361. 						<button class="button-primary ls-tr-remove right"><?php _e('Remove transition', 'LayerSlider') ?></button>
    362. 

  362. 					</td>
    363. 

  363. 				</tr>
    364. 

  364. 			</tbody>
    365. 

  365. 		</table>
    366. 

  366. 	</div>
    367. 

  367. </div>
    368. 

  368. 

  369. 

  370. <div id="ls-tr-sample-2d">
    371. 

  371. 	<div class="ls-transition-item">
    372. 

  372. 		<table class="ls-box ls-tr-settings bottomborder">
    373. 

  373. 			<thead>
    374. 

  374. 				<tr>
    375. 

  375. 					<td colspan="4"><?php _e('Preview', 'LayerSlider') ?></td>
    376. 

  376. 				</tr>
    377. 

  377. 			</thead>
    378. 

  378. 			<tbody>
    379. 

  379. 				<tr>
    380. 

  380. 					<td colspan="4">
    381. 

  381. 						<div class="ls-builder-preview ls-transition-preview">
    382. 

  382. 							<img src="<?php echo $GLOBALS['lsPluginPath'] ?>img/sample_slide_1.png" alt="preview image">
    383. 

  383. 						</div>
    384. 

  384. 						<div class="ls-builder-preview-button">
    385. 

  385. 							<button class="button">Enter Preview</button>
    386. 

  386. 						</div>
    387. 

  387. 					</td>
    388. 

  388. 				</tr>
    389. 

  389. 			</tbody>
    390. 

  390. 			<thead>
    391. 

  391. 				<tr>
    392. 

  392. 					<td colspan="4"><?php _e('Basic properties', 'LayerSlider') ?></td>
    393. 

  393. 				</tr>
    394. 

  394. 			</thead>
    395. 

  395. 			<tbody class="basic">
    396. 

  396. 				<tr>
    397. 

  397. 					<td class="right"><?php _e('Transition name', 'LayerSlider') ?></td>
    398. 

  398. 					<td colspan="3"><input type="text" name="name" value="Turn top" data-help="<?php _e('The name of your custom transition. When you will edit a slider, it will appear with this name, so you can easily identify the individual transitions.', 'LayerSlider') ?>"></td>
    399. 

  399. 				</tr>
    400. 

  400. 				<tr>
    401. 

  401. 					<td class="right"><?php _e('Rows', 'LayerSlider') ?></td>
    402. 

  402. 					<td><input type="text" name="rows" value="1" data-help="<?php _e('<number> or <min_number>,<max_number> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many rows of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
    403. 

  403. 					<td class="right"><?php _e('Cols', 'LayerSlider') ?></td>
    404. 

  404. 					<td><input type="text" name="cols" value="1" data-help="<?php _e('<number> or <min_number>,<max_number> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many columns of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
    405. 

  405. 				</tr>
    406. 

  406. 			</tbody>
    407. 

  407. 			<thead>
    408. 

  408. 				<tr>
    409. 

  409. 					<td colspan="4"><?php _e('Tiles', 'LayerSlider') ?></td>
    410. 

  410. 				</tr>
    411. 

  411. 			</thead>
    412. 

  412. 			<tbody class="tile">
    413. 

  413. 				<tr>
    414. 

  414. 					<td class="right"><?php _e('Delay', 'LayerSlider') ?></td>
    415. 

  415. 					<td><input type="text" name="delay" value="75" data-help="<?php _e('You can apply a delay between the tiles and postpone their animation relative to each other.', 'LayerSlider') ?>"></td>
    416. 

  416. 					<td class="right"><?php _e('Sequence', 'LayerSlider') ?></td>
    417. 

  417. 					<td>
    418. 

  418. 						<select name="sequence" data-help="<?php _e('You can control the animation order of the tiles here.', 'LayerSlider') ?>">
    419. 

  419. 							<option value="forward"><?php _e('Forward', 'LayerSlider') ?></option>
    420. 

  420. 							<option value="reverse"><?php _e('Reverse', 'LayerSlider') ?></option>
    421. 

  421. 							<option value="col-forward"><?php _e('Col-forward', 'LayerSlider') ?></option>
    422. 

  422. 							<option value="col-reverse"><?php _e('Col-reverse', 'LayerSlider') ?></option>
    423. 

  423. 							<option value="random"><?php _e('Random', 'LayerSlider') ?></option>
    424. 

  424. 						</select>
    425. 

  425. 					</td>
    426. 

  426. 				</tr>
    427. 

  427. 			</tbody>
    428. 

  428. 			<thead>
    429. 

  429. 				<tr>
    430. 

  430. 					<td colspan="4"><?php _e('Transition', 'LayerSlider') ?></td>
    431. 

  431. 				</tr>
    432. 

  432. 			</thead>
    433. 

  433. 			<tbody class="transition">
    434. 

  434. 				<tr>
    435. 

  435. 					<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
    436. 

  436. 					<td><input type="text" name="duration" value="1000" data-help="<?php _e('The duration of the animation. This value is in millisecs, so the value 1000 measn 1 second.', 'LayerSlider') ?>"></td>
    437. 

  437. 					<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
    438. 

  438. 					<td>
    439. 

  439. 						<select name="easing" data-help="<?php _e('The timing function of the animation, with it you can manipualte the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
    440. 

  440. 							<option>linear</option>
    441. 

  441. 							<option>swing</option>
    442. 

  442. 							<option>easeInQuad</option>
    443. 

  443. 							<option>easeOutQuad</option>
    444. 

  444. 							<option>easeInOutQuad</option>
    445. 

  445. 							<option>easeInCubic</option>
    446. 

  446. 							<option>easeOutCubic</option>
    447. 

  447. 							<option>easeInOutCubic</option>
    448. 

  448. 							<option>easeInQuart</option>
    449. 

  449. 							<option>easeOutQuart</option>
    450. 

  450. 							<option>easeInOutQuart</option>
    451. 

  451. 							<option>easeInQuint</option>
    452. 

  452. 							<option>easeOutQuint</option>
    453. 

  453. 							<option selected="selected">easeInOutQuint</option>
    454. 

  454. 							<option>easeInSine</option>
    455. 

  455. 							<option>easeOutSine</option>
    456. 

  456. 							<option>easeInOutSine</option>
    457. 

  457. 							<option>easeInExpo</option>
    458. 

  458. 							<option>easeOutExpo</option>
    459. 

  459. 							<option>easeInOutExpo</option>
    460. 

  460. 							<option>easeInCirc</option>
    461. 

  461. 							<option>easeOutCirc</option>
    462. 

  462. 							<option>easeInOutCirc</option>
    463. 

  463. 							<option>easeInElastic</option>
    464. 

  464. 							<option>easeOutElastic</option>
    465. 

  465. 							<option>easeInOutElastic</option>
    466. 

  466. 							<option>easeInBack</option>
    467. 

  467. 							<option>easeOutBack</option>
    468. 

  468. 							<option>easeInOutBack</option>
    469. 

  469. 							<option>easeInBounce</option>
    470. 

  470. 							<option>easeOutBounce</option>
    471. 

  471. 							<option>easeInOutBounce</option>
    472. 

  472. 						</select>
    473. 

  473. 					</td>
    474. 

  474. 				</tr>
    475. 

  475. 				<tr>
    476. 

  476. 					<td class="right"><?php _e('Type', 'LayerSlider') ?></td>
    477. 

  477. 					<td>
    478. 

  478. 						<select name="type" data-help="<?php _e('The type of the animation, either slide, fade or both (mixed).', 'LayerSlider') ?>">
    479. 

  479. 							<option value="slide"><?php _e('Slide', 'LayerSlider') ?></option>
    480. 

  480. 							<option value="fade"><?php _e('Fade', 'LayerSlider') ?></option>
    481. 

  481. 							<option value="mixed"><?php _e('Mixed', 'LayerSlider') ?></option>
    482. 

  482. 						</select>
    483. 

  483. 					</td>
    484. 

  484. 					<td class="right"><?php _e('Direction', 'LayerSlider') ?></td>
    485. 

  485. 					<td>
    486. 

  486. 						<select name="direction" data-help="<?php _e('The direction of the slide or mixed animation if you chose these type in the previous setting.', 'LayerSlider') ?>">
    487. 

  487. 							<option value="top"><?php _e('Top', 'LayerSlider') ?></option>
    488. 

  488. 							<option value="right"><?php _e('Right', 'LayerSlider') ?></option>
    489. 

  489. 							<option value="bottom"><?php _e('Bottom', 'LayerSlider') ?></option>
    490. 

  490. 							<option value="left"><?php _e('Left', 'LayerSlider') ?></option>
    491. 

  491. 							<option value="random"><?php _e('Random', 'LayerSlider') ?></option>
    492. 

  492. 							<option value="topleft"><?php _e('Top left', 'LayerSlider') ?></option>
    493. 

  493. 							<option value="topright"><?php _e('Top right', 'LayerSlider') ?></option>
    494. 

  494. 							<option value="bottomleft"><?php _e('Bottom left', 'LayerSlider') ?></option>
    495. 

  495. 							<option value="bottomright"><?php _e('Bottom right', 'LayerSlider') ?></option>
    496. 

  496. 						</select>
    497. 

  497. 					</td>
    498. 

  498. 				</tr>
    499. 

  499. 				<tr>
    500. 

  500. 					<td class="right"><?php _e('RotateX', 'LayerSlider') ?></td>
    501. 

  501. 					<td><input type="text" name="rotateX" value="0" data-help="The initial rotation of the individual tiles which will be animated to the default (0deg) value around the X axis. You can use negatuve values."></td>
    502. 

  502. 					<td class="right"><?php _e('RotateY', 'LayerSlider') ?></td>
    503. 

  503. 					<td><input type="text" name="rotateY" value="0" data-help="The initial rotation of the individual tiles which will be animated to the default (0deg) value around the Y axis. You can use negatuve values."></td>
    504. 

  504. 				</tr>
    505. 

  505. 				<tr>
    506. 

  506. 					<td class="right"><?php _e('RotateZ', 'LayerSlider') ?></td>
    507. 

  507. 					<td><input type="text" name="rotate" value="0" data-help="The initial rotation of the individual tiles which will be animated to the default (0deg) value around the Z axis. You can use negatuve values."></td>
    508. 

  508. 					<td class="right"><?php _e('Scale', 'LayerSlider') ?></td>
    509. 

  509. 					<td><input type="text" name="scale" value="1.0" data-help="The initial scale of the individual tiles which will be animated to the default (1.0) value."></td>
    510. 

  510. 				</tr>
    511. 

  511. 			</tbody>
    512. 

  512. 			<thead>
    513. 

  513. 				<tr>
    514. 

  514. 					<td colspan="4"><?php _e('Transition options', 'LayerSlider') ?></td>
    515. 

  515. 				</tr>
    516. 

  516. 			</thead>
    517. 

  517. 			<tbody>
    518. 

  518. 				<tr>
    519. 

  519. 					<td colspan="4">
    520. 

  520. 						<button class="button-primary ls-tr-remove"><?php _e('Remove transition', 'LayerSlider') ?></button>
    521. 

  521. 					</td>
    522. 

  522. 				</tr>
    523. 

  523. 			</tbody>
    524. 

  524. 		</table>
    525. 

  525. 	</div>
    526. 

  526. </div>
    527. 

  527. 

  528. 

  529. <div class="wrap">
    530. 

  530. 

  531. 	<!-- Page title -->
    532. 

  532. 	<div class="ls-icon-layers"></div>
    533. 

  533. 	<h2>
    534. 

  534. 		<?php _e('LayerSlider Transition Builder', 'LayerSlider') ?>
    535. 

  535. 		<a href="?page=layerslider" class="add-new-h2"><?php _e('Back to the list', 'LayerSlider') ?></a>
    536. 

  536. 	</h2>
    537. 

  537. 

  538. 	<?php if(isset($_GET['edited'])) : ?>
    539. 

  539. 	<div class="updated"><?php _e('Your changes has been saved!', 'LayerSlider') ?></div>
    540. 

  540. 	<?php  endif; ?>
    541. 

  541. 

  542. 	<!-- Editor box -->
    543. 

  543. 	<form action="<?php echo $_SERVER['REQUEST_URI'] ?>" method="post" id="ls-tr-builder-form">
    544. 

  544. 		<input type="hidden" name="posted_ls_transition_builder" value="1">
    545. 

  545. 		<div class="ls-box ls-tr-builder">
    546. 

  546. 			<h3 class="header">
    547. 

  547. 				<div class="ls-builder-left ls-half">
    548. 

  548. 					<div class="inner">
    549. 

  549. 						<?php _e('3D transitions', 'LayerSlider') ?>
    550. 

  550. 						<p>
    551. 

  551. 							<?php _e('Choose:', 'LayerSlider') ?>
    552. 

  552. 							<select class="ls-tr-builder-tr-select 3d">
    553. 

  553. 								<?php if(isset($data['t3d']) && !empty($data['t3d'])) : ?>
    554. 

  554. 								<?php foreach($data['t3d'] as $tr) : ?>
    555. 

  555. 								<option><?php echo $tr['name'] ?></option>
    556. 

  556. 								<?php endforeach; ?>
    557. 

  557. 								<?php else : ?>
    558. 

  558. 								<option class="notification">No 3D transitions yet</option>
    559. 

  559. 								<?php endif; ?>
    560. 

  560. 							</select>
    561. 

  561. 							<?php _e('or', 'LayerSlider') ?>
    562. 

  562. 							<a href="#" class="ls-icon-tr-add ls-tr-builder-add-tr 3d"><?php _e('Add new', 'LayerSlider') ?></a>
    563. 

  563. 						</p>
    564. 

  564. 					</div>
    565. 

  565. 				</div>
    566. 

  566. 				<div class="ls-builder-right ls-half">
    567. 

  567. 					<div class="inner">
    568. 

  568. 						<?php _e('2D transitions', 'LayerSlider') ?>
    569. 

  569. 						<p>
    570. 

  570. 							<?php _e('Choose:', 'LayerSlider') ?>
    571. 

  571. 							<select class="ls-tr-builder-tr-select 2d">
    572. 

  572. 								<?php if(isset($data['t2d']) && !empty($data['t2d'])) : ?>
    573. 

  573. 								<?php foreach($data['t2d'] as $tr) : ?>
    574. 

  574. 								<option><?php echo $tr['name'] ?></option>
    575. 

  575. 								<?php endforeach; ?>
    576. 

  576. 								<?php else : ?>
    577. 

  577. 								<option class="notification">No 2D transitions yet</option>
    578. 

  578. 								<?php endif; ?>
    579. 

  579. 							</select>
    580. 

  580. 							<?php _e('or', 'LayerSlider') ?>
    581. 

  581. 							<a href="#" class="ls-icon-tr-add ls-tr-builder-add-tr 2d"><?php _e('Add new', 'LayerSlider') ?></a>
    582. 

  582. 						</p>
    583. 

  583. 					</div>
    584. 

  584. 				</div>
    585. 

  585. 			</h3>
    586. 

  586. 			<div class="ls-tr-options">
    587. 

  587. 				<div class="ls-builder-left ls-tr-list-3d">
    588. 

  588. 					<?php if(isset($data['t3d']) && !empty($data['t3d'])) : ?>
    589. 

  589. 					<?php foreach($data['t3d'] as $key => $tr) : ?>
    590. 

  590. 					<?php $activeClass = ($key == 0) ? ' active' : '' ?>
    591. 

  591. 					<div class="ls-transition-item<?php echo $activeClass ?>">
    592. 

  592. 						<table class="ls-box ls-tr-settings">
    593. 

  593. 							<thead>
    594. 

  594. 								<tr>
    595. 

  595. 									<td colspan="4"><?php _e('Preview', 'LayerSlider') ?></td>
    596. 

  596. 								</tr>
    597. 

  597. 							</thead>
    598. 

  598. 							<tbody>
    599. 

  599. 								<tr>
    600. 

  600. 									<td colspan="4">
    601. 

  601. 										<div class="ls-builder-preview ls-transition-preview">
    602. 

  602. 											<img src="<?php echo $GLOBALS['lsPluginPath'] ?>img/sample_slide_1.png" alt="preview image">
    603. 

  603. 										</div>
    604. 

  604. 										<div class="ls-builder-preview-button">
    605. 

  605. 											<button class="button">Enter Preview</button>
    606. 

  606. 										</div>
    607. 

  607. 									</td>
    608. 

  608. 								</tr>
    609. 

  609. 							</tbody>
    610. 

  610. 							<thead>
    611. 

  611. 								<tr>
    612. 

  612. 									<td colspan="4"><?php _e('Basic properties', 'LayerSlider') ?></td>
    613. 

  613. 								</tr>
    614. 

  614. 							</thead>
    615. 

  615. 							<tbody class="basic">
    616. 

  616. 								<tr>
    617. 

  617. 									<td class="right"><?php _e('Transition name', 'LayerSlider') ?></td>
    618. 

  618. 									<td colspan="3"><input type="text" name="name" value="<?php echo $tr['name'] ?>" data-help="<?php _e('The name of your custom transition. When you will edit a slider, it will appear with this name, so you can easily identify the individual transitions.', 'LayerSlider') ?>"></td>
    619. 

  619. 								</tr>
    620. 

  620. 								<tr>
    621. 

  621. 									<?php $tr['rows'] = is_array($tr['rows']) ? implode(',', $tr['rows']) : $tr['rows']; ?>
    622. 

  622. 									<?php $tr['cols'] = is_array($tr['cols']) ? implode(',', $tr['cols']) : $tr['cols']; ?>
    623. 

  623. 									<td class="right"><?php _e('Rows', 'LayerSlider') ?></td>
    624. 

  624. 									<td><input type="text" name="rows" value="<?php echo $tr['rows'] ?>" data-help="<?php _e('<number> or <min_number>,<max_number> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many rows of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
    625. 

  625. 									<td class="right"><?php _e('Cols', 'LayerSlider') ?></td>
    626. 

  626. 									<td><input type="text" name="cols" value="<?php echo $tr['cols'] ?>" data-help="<?php _e('<number> or <min_number>,<max_number> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many columns of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
    627. 

  627. 								</tr>
    628. 

  628. 							</tbody>
    629. 

  629. 							<thead>
    630. 

  630. 								<tr>
    631. 

  631. 									<td colspan="4"><?php _e('Tiles', 'LayerSlider') ?></td>
    632. 

  632. 								</tr>
    633. 

  633. 							</thead>
    634. 

  634. 							<tbody class="tile">
    635. 

  635. 								<tr>
    636. 

  636. 									<td class="right"><?php _e('Delay', 'LayerSlider') ?></td>
    637. 

  637. 									<td><input type="text" name="delay" value="<?php echo $tr['tile']['delay'] ?>" data-help="<?php _e('You can apply a delay between the tiles and postpone their animation relative to each other.', 'LayerSlider') ?>"></td>
    638. 

  638. 									<td class="right"><?php _e('Sequence', 'LayerSlider') ?></td>
    639. 

  639. 									<td>
    640. 

  640. 										<select name="sequence" data-help="<?php _e('You can control the animation order of the tiles here.', 'LayerSlider') ?>">
    641. 

  641. 											<option value="forward"<?php echo ($tr['tile']['sequence'] == 'forward') ? ' selected="selected"' : '' ?>><?php _e('Forward', 'LayerSlider') ?></option>
    642. 

  642. 											<option value="reverse"<?php echo ($tr['tile']['sequence'] == 'reverse') ? ' selected="selected"' : '' ?>><?php _e('Reverse', 'LayerSlider') ?></option>
    643. 

  643. 											<option value="col-forward"<?php echo ($tr['tile']['sequence'] == 'col-forward') ? ' selected="selected"' : '' ?>><?php _e('Col-forward', 'LayerSlider') ?></option>
    644. 

  644. 											<option value="col-reverse"<?php echo ($tr['tile']['sequence'] == 'col-reverse') ? ' selected="selected"' : '' ?>><?php _e('Col-reverse', 'LayerSlider') ?></option>
    645. 

  645. 											<option value="random"<?php echo ($tr['tile']['sequence'] == 'random') ? ' selected="selected"' : '' ?>><?php _e('Random', 'LayerSlider') ?></option>
    646. 

  646. 										</select>
    647. 

  647. 									</td>
    648. 

  648. 								</tr>
    649. 

  649. 								<tr>
    650. 

  650. 									<td></td>
    651. 

  651. 									<td></td>
    652. 

  652. 									<td class="right"><?php _e('Depth', 'LayerSlider') ?></td>
    653. 

  653. 									<td>
    654. 

  654. 										<label data-help="<?php _e('The script will try to identify the optimal depth for your rotated objects (tiles). With this option, you can force your objects to have large depth when performing 180 degree (and its multiplies) rotation.', 'LayerSlider') ?>">
    655. 

  655. 											<input type="checkbox" class="checkbox" name="depth" value="large"<?php echo isset($tr['tile']['depth']) ? ' checked="checked"' : '' ?>>
    656. 

  656. 											Large depth
    657. 

  657. 										</label>
    658. 

  658. 									</td>
    659. 

  659. 								</tr>
    660. 

  660. 							</tbody>
    661. 

  661. 							<?php
    662. 

  662. 								$checkboxProp = isset($tr['before']['enabled']) ? ' checked="checked"' : '';
    663. 

  663. 								$collapseClass = !isset($tr['before']['enabled']) ? ' ls-builder-collapsed' : '';
    664. 

  664. 							?>
    665. 

  665. 							<thead>
    666. 

  666. 								<tr>
    667. 

  667. 									<td colspan="4">
    668. 

  668. 										<span><?php _e('Before animation', 'LayerSlider') ?></span>
    669. 

  669. 										<p class="ls-builder-checkbox">
    670. 

  670. 											<label><input type="checkbox"<?php echo $checkboxProp ?> class="ls-builder-collapse-toggle"> Enabled</label>
    671. 

  671. 										</p>
    672. 

  672. 									</td>
    673. 

  673. 								</tr>
    674. 

  674. 							</thead>
    675. 

  675. 							<tbody class="before<?php echo $collapseClass ?>">
    676. 

  676. 								<tr>
    677. 

  677. 									<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
    678. 

  678. 									<td><input type="text" name="duration" value="<?php echo isset($tr['before']['duration']) ? $tr['before']['duration'] : '1000' ?>" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
    679. 

  679. 									<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
    680. 

  680. 									<td>
    681. 

  681. 										<?php $tr['before']['easing'] = isset($tr['before']['easing']) ? $tr['before']['easing'] : 'easeInOutBack' ?>
    682. 

  682. 										<select name="easing" data-help="<?php _e('The timing function of the animation, with it you can manipualte the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
    683. 

  683. 											<option<?php echo ($tr['before']['easing'] == 'linear') ? ' selected="selected"' : '' ?>>linear</option>
    684. 

  684. 											<option<?php echo ($tr['before']['easing'] == 'easeInQuad') ? ' selected="selected"' : '' ?>>easeInQuad</option>
    685. 

  685. 											<option<?php echo ($tr['before']['easing'] == 'easeOutQuad') ? ' selected="selected"' : '' ?>>easeOutQuad</option>
    686. 

  686. 											<option<?php echo ($tr['before']['easing'] == 'easeInOutQuad') ? ' selected="selected"' : '' ?>>easeInOutQuad</option>
    687. 

  687. 											<option<?php echo ($tr['before']['easing'] == 'easeInCubic') ? ' selected="selected"' : '' ?>>easeInCubic</option>
    688. 

  688. 											<option<?php echo ($tr['before']['easing'] == 'easeOutCubic') ? ' selected="selected"' : '' ?>>easeOutCubic</option>
    689. 

  689. 											<option<?php echo ($tr['before']['easing'] == 'easeInOutCubic') ? ' selected="selected"' : '' ?>>easeInOutCubic</option>
    690. 

  690. 											<option<?php echo ($tr['before']['easing'] == 'easeInQuart') ? ' selected="selected"' : '' ?>>easeInQuart</option>
    691. 

  691. 											<option<?php echo ($tr['before']['easing'] == 'easeOutQuart') ? ' selected="selected"' : '' ?>>easeOutQuart</option>
    692. 

  692. 											<option<?php echo ($tr['before']['easing'] == 'easeInOutQuart') ? ' selected="selected"' : '' ?>>easeInOutQuart</option>
    693. 

  693. 											<option<?php echo ($tr['before']['easing'] == 'easeInQuint') ? ' selected="selected"' : '' ?>>easeInQuint</option>
    694. 

  694. 											<option<?php echo ($tr['before']['easing'] == 'easeOutQuint') ? ' selected="selected"' : '' ?>>easeOutQuint</option>
    695. 

  695. 											<option<?php echo ($tr['before']['easing'] == 'easeInOutQuint') ? ' selected="selected"' : '' ?>>easeInOutQuint</option>
    696. 

  696. 											<option<?php echo ($tr['before']['easing'] == 'easeInSine') ? ' selected="selected"' : '' ?>>easeInSine</option>
    697. 

  697. 											<option<?php echo ($tr['before']['easing'] == 'easeOutSine') ? ' selected="selected"' : '' ?>>easeOutSine</option>
    698. 

  698. 											<option<?php echo ($tr['before']['easing'] == 'easeInOutSine') ? ' selected="selected"' : '' ?>>easeInOutSine</option>
    699. 

  699. 											<option<?php echo ($tr['before']['easing'] == 'easeInExpo') ? ' selected="selected"' : '' ?>>easeInExpo</option>
    700. 

  700. 											<option<?php echo ($tr['before']['easing'] == 'easeOutExpo') ? ' selected="selected"' : '' ?>>easeOutExpo</option>
    701. 

  701. 											<option<?php echo ($tr['before']['easing'] == 'easeInOutExpo') ? ' selected="selected"' : '' ?>>easeInOutExpo</option>
    702. 

  702. 											<option<?php echo ($tr['before']['easing'] == 'easeInCirc') ? ' selected="selected"' : '' ?>>easeInCirc</option>
    703. 

  703. 											<option<?php echo ($tr['before']['easing'] == 'easeOutCirc') ? ' selected="selected"' : '' ?>>easeOutCirc</option>
    704. 

  704. 											<option<?php echo ($tr['before']['easing'] == 'easeInOutCirc') ? ' selected="selected"' : '' ?>>easeInOutCirc</option>
    705. 

  705. 											<option<?php echo ($tr['before']['easing'] == 'easeInBack') ? ' selected="selected"' : '' ?>>easeInBack</option>
    706. 

  706. 											<option<?php echo ($tr['before']['easing'] == 'easeOutBack') ? ' selected="selected"' : '' ?>>easeOutBack</option>
    707. 

  707. 											<option<?php echo ($tr['before']['easing'] == 'easeInOutBack') ? ' selected="selected"' : '' ?>>easeInOutBack</option>
    708. 

  708. 										</select>
    709. 

  709. 									</td>
    710. 

  710. 								</tr>
    711. 

  711. 								<tr class="transition">
    712. 

  712. 									<td colspan="4">
    713. 

  713. 										<ul class="ls-tr-tags">
    714. 

  714. 											<?php if(isset($tr['before']['transition']) && !empty($tr['before']['transition'])) : ?>
    715. 

  715. 											<?php foreach($tr['before']['transition'] as $pkey => $prop) : ?>
    716. 

  716. 											<li>
    717. 

  717. 												<p>
    718. 

  718. 													<span><?php echo lsTrGetProperty($pkey) ?></span>
    719. 

  719. 													<input type="text" name="<?php echo $pkey ?>" value="<?php echo $prop ?>">
    720. 

  720. 												</p>
    721. 

  721. 												<a href="#">x</a>
    722. 

  722. 											</li>
    723. 

  723. 											<?php endforeach; ?>
    724. 

  724. 											<?php endif; ?>
    725. 

  725. 										</ul>
    726. 

  726. 										<p class="ls-tr-add-property">
    727. 

  727. 											<a href="#" class="ls-icon-tr-add"><?php _e('Add new', 'LayerSlider') ?></a>
    728. 

  728. 											<select>
    729. 

  729. 												<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
    730. 

  730. 												<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
    731. 

  731. 												<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
    732. 

  732. 												<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
    733. 

  733. 											</select>
    734. 

  734. 										</p>
    735. 

  735. 									</td>
    736. 

  736. 								</tr>
    737. 

  737. 							</tbody>
    738. 

  738. 							<thead>
    739. 

  739. 								<tr>
    740. 

  740. 									<td colspan="4">
    741. 

  741. 										<?php _e('Animation', 'LayerSlider') ?>
    742. 

  742. 									</td>
    743. 

  743. 								</tr>
    744. 

  744. 							</thead>
    745. 

  745. 							<tbody class="animation">
    746. 

  746. 								<tr>
    747. 

  747. 									<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
    748. 

  748. 									<td><input type="text" name="duration" value="<?php echo $tr['animation']['duration'] ?>" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
    749. 

  749. 									<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
    750. 

  750. 									<td>
    751. 

  751. 										<select name="easing" data-help="<?php _e('The timing function of the animation, with it you can manipualte the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
    752. 

  752. 											<option<?php echo ($tr['animation']['easing'] == 'linear') ? ' selected="selected"' : '' ?>>linear</option>
    753. 

  753. 											<option<?php echo ($tr['animation']['easing'] == 'easeInQuad') ? ' selected="selected"' : '' ?>>easeInQuad</option>
    754. 

  754. 											<option<?php echo ($tr['animation']['easing'] == 'easeOutQuad') ? ' selected="selected"' : '' ?>>easeOutQuad</option>
    755. 

  755. 											<option<?php echo ($tr['animation']['easing'] == 'easeInOutQuad') ? ' selected="selected"' : '' ?>>easeInOutQuad</option>
    756. 

  756. 											<option<?php echo ($tr['animation']['easing'] == 'easeInCubic') ? ' selected="selected"' : '' ?>>easeInCubic</option>
    757. 

  757. 											<option<?php echo ($tr['animation']['easing'] == 'easeOutCubic') ? ' selected="selected"' : '' ?>>easeOutCubic</option>
    758. 

  758. 											<option<?php echo ($tr['animation']['easing'] == 'easeInOutCubic') ? ' selected="selected"' : '' ?>>easeInOutCubic</option>
    759. 

  759. 											<option<?php echo ($tr['animation']['easing'] == 'easeInQuart') ? ' selected="selected"' : '' ?>>easeInQuart</option>
    760. 

  760. 											<option<?php echo ($tr['animation']['easing'] == 'easeOutQuart') ? ' selected="selected"' : '' ?>>easeOutQuart</option>
    761. 

  761. 											<option<?php echo ($tr['animation']['easing'] == 'easeInOutQuart') ? ' selected="selected"' : '' ?>>easeInOutQuart</option>
    762. 

  762. 											<option<?php echo ($tr['animation']['easing'] == 'easeInQuint') ? ' selected="selected"' : '' ?>>easeInQuint</option>
    763. 

  763. 											<option<?php echo ($tr['animation']['easing'] == 'easeOutQuint') ? ' selected="selected"' : '' ?>>easeOutQuint</option>
    764. 

  764. 											<option<?php echo ($tr['animation']['easing'] == 'easeInOutQuint') ? ' selected="selected"' : '' ?>>easeInOutQuint</option>
    765. 

  765. 											<option<?php echo ($tr['animation']['easing'] == 'easeInSine') ? ' selected="selected"' : '' ?>>easeInSine</option>
    766. 

  766. 											<option<?php echo ($tr['animation']['easing'] == 'easeOutSine') ? ' selected="selected"' : '' ?>>easeOutSine</option>
    767. 

  767. 											<option<?php echo ($tr['animation']['easing'] == 'easeInOutSine') ? ' selected="selected"' : '' ?>>easeInOutSine</option>
    768. 

  768. 											<option<?php echo ($tr['animation']['easing'] == 'easeInExpo') ? ' selected="selected"' : '' ?>>easeInExpo</option>
    769. 

  769. 											<option<?php echo ($tr['animation']['easing'] == 'easeOutExpo') ? ' selected="selected"' : '' ?>>easeOutExpo</option>
    770. 

  770. 											<option<?php echo ($tr['animation']['easing'] == 'easeInOutExpo') ? ' selected="selected"' : '' ?>>easeInOutExpo</option>
    771. 

  771. 											<option<?php echo ($tr['animation']['easing'] == 'easeInCirc') ? ' selected="selected"' : '' ?>>easeInCirc</option>
    772. 

  772. 											<option<?php echo ($tr['animation']['easing'] == 'easeOutCirc') ? ' selected="selected"' : '' ?>>easeOutCirc</option>
    773. 

  773. 											<option<?php echo ($tr['animation']['easing'] == 'easeInOutCirc') ? ' selected="selected"' : '' ?>>easeInOutCirc</option>
    774. 

  774. 											<option<?php echo ($tr['animation']['easing'] == 'easeInBack') ? ' selected="selected"' : '' ?>>easeInBack</option>
    775. 

  775. 											<option<?php echo ($tr['animation']['easing'] == 'easeOutBack') ? ' selected="selected"' : '' ?>>easeOutBack</option>
    776. 

  776. 											<option<?php echo ($tr['animation']['easing'] == 'easeInOutBack') ? ' selected="selected"' : '' ?>>easeInOutBack</option>
    777. 

  777. 										</select>
    778. 

  778. 									</td>
    779. 

  779. 								</tr>
    780. 

  780. 								<tr>
    781. 

  781. 									<td></td>
    782. 

  782. 									<td></td>
    783. 

  783. 									<td class="right"><?php _e('Direction', 'LayerSlider') ?></td>
    784. 

  784. 									<td>
    785. 

  785. 										<select name="direction" data-help="<?php _e('The direction of rotation.', 'LayerSlider') ?>">
    786. 

  786. 											<option value="vertical"<?php echo ($tr['animation']['direction'] == 'vertical') ? ' selected="selected"' : '' ?>><?php _e('Vertical', 'LayerSlider'); ?></option>
    787. 

  787. 											<option value="horizontal"<?php echo ($tr['animation']['direction'] == 'horizontal') ? ' selected="selected"' : '' ?>><?php _e('Horizontal', 'LayerSlider') ?></option>
    788. 

  788. 										</select>
    789. 

  789. 									</td>
    790. 

  790. 								</tr>
    791. 

  791. 								<tr class="transition">
    792. 

  792. 									<td colspan="4">
    793. 

  793. 

  794. 										<ul class="ls-tr-tags">
    795. 

  795. 											<?php if(isset($tr['animation']['transition']) && !empty($tr['animation']['transition'])) : ?>
    796. 

  796. 											<?php foreach($tr['animation']['transition'] as $pkey => $prop) : ?>
    797. 

  797. 											<li>
    798. 

  798. 												<p>
    799. 

  799. 													<span><?php echo lsTrGetProperty($pkey) ?></span>
    800. 

  800. 													<input type="text" name="<?php echo $pkey ?>" value="<?php echo $prop ?>">
    801. 

  801. 												</p>
    802. 

  802. 												<a href="#">x</a>
    803. 

  803. 											</li>
    804. 

  804. 											<?php endforeach; ?>
    805. 

  805. 											<?php endif; ?>
    806. 

  806. 										</ul>
    807. 

  807. 										<p class="ls-tr-add-property">
    808. 

  808. 											<a href="#" class="ls-icon-tr-add"><?php _e('Add new', 'LayerSlider') ?></a>
    809. 

  809. 											<select>
    810. 

  810. 												<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
    811. 

  811. 												<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
    812. 

  812. 												<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
    813. 

  813. 												<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
    814. 

  814. 											</select>
    815. 

  815. 										</p>
    816. 

  816. 									</td>
    817. 

  817. 								</tr>
    818. 

  818. 							</tbody>
    819. 

  819. 							<?php
    820. 

  820. 								$checkboxProp = isset($tr['after']['enabled']) ? ' checked="checked"' : '';
    821. 

  821. 								$collapseClass = !isset($tr['after']['enabled']) ? ' ls-builder-collapsed' : '';
    822. 

  822. 							?>
    823. 

  823. 							<thead>
    824. 

  824. 								<tr>
    825. 

  825. 									<td colspan="4">
    826. 

  826. 										<?php _e('After animation', 'LayerSlider') ?>
    827. 

  827. 										<p class="ls-builder-checkbox">
    828. 

  828. 											<label><input type="checkbox"<?php echo $checkboxProp ?> class="ls-builder-collapse-toggle"> Enabled</label>
    829. 

  829. 										</p>
    830. 

  830. 									</td>
    831. 

  831. 								</tr>
    832. 

  832. 							</thead>
    833. 

  833. 							<tbody class="after<?php echo $collapseClass ?>">
    834. 

  834. 								<tr>
    835. 

  835. 									<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
    836. 

  836. 									<td><input type="text" name="duration" value="<?php echo isset($tr['after']['duration']) ? $tr['after']['duration'] : '1000' ?>" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
    837. 

  837. 									<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
    838. 

  838. 									<td>
    839. 

  839. 										<?php $tr['after']['easing'] = isset($tr['after']['easing']) ? $tr['after']['easing'] : 'easeInOutBack' ?>
    840. 

  840. 										<select name="easing" data-help="<?php _e('The timing function of the animation, with it you can manipualte the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
    841. 

  841. 											<option<?php echo ($tr['after']['easing'] == 'linear') ? ' selected="selected"' : '' ?>>linear</option>
    842. 

  842. 											<option<?php echo ($tr['after']['easing'] == 'easeInQuad') ? ' selected="selected"' : '' ?>>easeInQuad</option>
    843. 

  843. 											<option<?php echo ($tr['after']['easing'] == 'easeOutQuad') ? ' selected="selected"' : '' ?>>easeOutQuad</option>
    844. 

  844. 											<option<?php echo ($tr['after']['easing'] == 'easeInOutQuad') ? ' selected="selected"' : '' ?>>easeInOutQuad</option>
    845. 

  845. 											<option<?php echo ($tr['after']['easing'] == 'easeInCubic') ? ' selected="selected"' : '' ?>>easeInCubic</option>
    846. 

  846. 											<option<?php echo ($tr['after']['easing'] == 'easeOutCubic') ? ' selected="selected"' : '' ?>>easeOutCubic</option>
    847. 

  847. 											<option<?php echo ($tr['after']['easing'] == 'easeInOutCubic') ? ' selected="selected"' : '' ?>>easeInOutCubic</option>
    848. 

  848. 											<option<?php echo ($tr['after']['easing'] == 'easeInQuart') ? ' selected="selected"' : '' ?>>easeInQuart</option>
    849. 

  849. 											<option<?php echo ($tr['after']['easing'] == 'easeOutQuart') ? ' selected="selected"' : '' ?>>easeOutQuart</option>
    850. 

  850. 											<option<?php echo ($tr['after']['easing'] == 'easeInOutQuart') ? ' selected="selected"' : '' ?>>easeInOutQuart</option>
    851. 

  851. 											<option<?php echo ($tr['after']['easing'] == 'easeInQuint') ? ' selected="selected"' : '' ?>>easeInQuint</option>
    852. 

  852. 											<option<?php echo ($tr['after']['easing'] == 'easeOutQuint') ? ' selected="selected"' : '' ?>>easeOutQuint</option>
    853. 

  853. 											<option<?php echo ($tr['after']['easing'] == 'easeInOutQuint') ? ' selected="selected"' : '' ?>>easeInOutQuint</option>
    854. 

  854. 											<option<?php echo ($tr['after']['easing'] == 'easeInSine') ? ' selected="selected"' : '' ?>>easeInSine</option>
    855. 

  855. 											<option<?php echo ($tr['after']['easing'] == 'easeOutSine') ? ' selected="selected"' : '' ?>>easeOutSine</option>
    856. 

  856. 											<option<?php echo ($tr['after']['easing'] == 'easeInOutSine') ? ' selected="selected"' : '' ?>>easeInOutSine</option>
    857. 

  857. 											<option<?php echo ($tr['after']['easing'] == 'easeInExpo') ? ' selected="selected"' : '' ?>>easeInExpo</option>
    858. 

  858. 											<option<?php echo ($tr['after']['easing'] == 'easeOutExpo') ? ' selected="selected"' : '' ?>>easeOutExpo</option>
    859. 

  859. 											<option<?php echo ($tr['after']['easing'] == 'easeInOutExpo') ? ' selected="selected"' : '' ?>>easeInOutExpo</option>
    860. 

  860. 											<option<?php echo ($tr['after']['easing'] == 'easeInCirc') ? ' selected="selected"' : '' ?>>easeInCirc</option>
    861. 

  861. 											<option<?php echo ($tr['after']['easing'] == 'easeOutCirc') ? ' selected="selected"' : '' ?>>easeOutCirc</option>
    862. 

  862. 											<option<?php echo ($tr['after']['easing'] == 'easeInOutCirc') ? ' selected="selected"' : '' ?>>easeInOutCirc</option>
    863. 

  863. 											<option<?php echo ($tr['after']['easing'] == 'easeInBack') ? ' selected="selected"' : '' ?>>easeInBack</option>
    864. 

  864. 											<option<?php echo ($tr['after']['easing'] == 'easeOutBack') ? ' selected="selected"' : '' ?>>easeOutBack</option>
    865. 

  865. 											<option<?php echo ($tr['after']['easing'] == 'easeInOutBack') ? ' selected="selected"' : '' ?>>easeInOutBack</option>
    866. 

  866. 										</select>
    867. 

  867. 									</td>
    868. 

  868. 								</tr>
    869. 

  869. 								<tr class="transition">
    870. 

  870. 									<td colspan="4">
    871. 

  871. 										<ul class="ls-tr-tags">
    872. 

  872. 											<?php if(isset($tr['after']['transition']) && !empty($tr['after']['transition'])) : ?>
    873. 

  873. 											<?php foreach($tr['after']['transition'] as $pkey => $prop) : ?>
    874. 

  874. 											<li>
    875. 

  875. 												<p>
    876. 

  876. 													<span><?php echo lsTrGetProperty($pkey) ?></span>
    877. 

  877. 													<input type="text" name="<?php echo $pkey ?>" value="<?php echo $prop ?>">
    878. 

  878. 												</p>
    879. 

  879. 												<a href="#">x</a>
    880. 

  880. 											</li>
    881. 

  881. 											<?php endforeach; ?>
    882. 

  882. 											<?php endif; ?>
    883. 

  883. 										</ul>
    884. 

  884. 										<p class="ls-tr-add-property">
    885. 

  885. 											<a href="#" class="ls-icon-tr-add"><?php _e('Add new', 'LayerSlider') ?></a>
    886. 

  886. 											<select>
    887. 

  887. 												<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
    888. 

  888. 												<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
    889. 

  889. 												<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
    890. 

  890. 												<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
    891. 

  891. 											</select>
    892. 

  892. 										</p>
    893. 

  893. 									</td>
    894. 

  894. 								</tr>
    895. 

  895. 							</tbody>
    896. 

  896. 							<thead>
    897. 

  897. 								<tr>
    898. 

  898. 									<td colspan="4"><?php _e('Transition options', 'LayerSlider') ?></td>
    899. 

  899. 								</tr>
    900. 

  900. 							</thead>
    901. 

  901. 							<tbody>
    902. 

  902. 								<tr>
    903. 

  903. 									<td colspan="4">
    904. 

  904. 										<button class="button-primary ls-tr-remove right"><?php _e('Remove transition', 'LayerSlider') ?></button>
    905. 

  905. 									</td>
    906. 

  906. 								</tr>
    907. 

  907. 							</tbody>
    908. 

  908. 						</table>
    909. 

  909. 					</div>
    910. 

  910. 					<?php endforeach; ?>
    911. 

  911. 					<?php else : ?>
    912. 

  912. 					<div class="ls-no-transitions-notification">
    913. 

  913. 						<h1>You didn't create any 3D transitions yet</h1>
    914. 

  914. 						<p>To create a new transition, click to the "Add new" button above this text.</p>
    915. 

  915. 					</div>
    916. 

  916. 					<?php endif; ?>
    917. 

  917. 				</div>
    918. 

  918. 				<div class="ls-builder-right ls-tr-list-2d">
    919. 

  919. 

  920. 					<?php if(isset($data['t2d']) && !empty($data['t2d'])) : ?>
    921. 

  921. 					<?php foreach($data['t2d'] as $key => $tr) : ?>
    922. 

  922. 					<?php $activeClass = ($key == 0) ? ' active' : '' ?>
    923. 

  923. 					<div class="ls-transition-item<?php echo $activeClass ?>">
    924. 

  924. 						<table class="ls-box ls-tr-settings bottomborder">
    925. 

  925. 							<thead>
    926. 

  926. 								<tr>
    927. 

  927. 									<td colspan="4"><?php _e('Preview', 'LayerSlider') ?></td>
    928. 

  928. 								</tr>
    929. 

  929. 							</thead>
    930. 

  930. 							<tbody>
    931. 

  931. 								<tr>
    932. 

  932. 									<td colspan="4">
    933. 

  933. 										<div class="ls-builder-preview ls-transition-preview">
    934. 

  934. 											<img src="<?php echo $GLOBALS['lsPluginPath'] ?>img/sample_slide_1.png" alt="preview image">
    935. 

  935. 										</div>
    936. 

  936. 										<div class="ls-builder-preview-button">
    937. 

  937. 											<button class="button">Enter Preview</button>
    938. 

  938. 										</div>
    939. 

  939. 									</td>
    940. 

  940. 								</tr>
    941. 

  941. 							</tbody>
    942. 

  942. 							<thead>
    943. 

  943. 								<tr>
    944. 

  944. 									<td colspan="4"><?php _e('Basic properties', 'LayerSlider') ?></td>
    945. 

  945. 								</tr>
    946. 

  946. 							</thead>
    947. 

  947. 							<tbody class="basic">
    948. 

  948. 								<tr>
    949. 

  949. 									<td class="right"><?php _e('Transition name', 'LayerSlider') ?></td>
    950. 

  950. 									<td colspan="3"><input type="text" name="name" value="<?php echo $tr['name'] ?>" data-help="<?php _e('The name of your custom transition. When you will edit a slider, it will appear with this name, so you can easily identify the individual transitions.', 'LayerSlider') ?>"></td>
    951. 

  951. 								</tr>
    952. 

  952. 								<tr>
    953. 

  953. 									<?php $tr['rows'] = is_array($tr['rows']) ? implode(',', $tr['rows']) : $tr['rows']; ?>
    954. 

  954. 									<?php $tr['cols'] = is_array($tr['cols']) ? implode(',', $tr['cols']) : $tr['cols']; ?>
    955. 

  955. 									<td class="right"><?php _e('Rows', 'LayerSlider') ?></td>
    956. 

  956. 									<td><input type="text" name="rows" value="<?php echo $tr['rows'] ?>" data-help="<?php _e('<number> or <min_number>,<max_number> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many rows of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
    957. 

  957. 									<td class="right"><?php _e('Cols', 'LayerSlider') ?></td>
    958. 

  958. 									<…
    959.

Large files files are truncated, but you can click here to view the full file