popup.php 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. <?php
  2. /**
  3. * Plugin Icons: Popup helper
  4. *
  5. * @license GPL 2 (http://www.gnu.org/licenses/gpl.html)
  6. * @author Giuseppe Di Terlizzi <giuseppe.diterlizzi@gmail.com>
  7. * @copyright (C) 2015-2018, Giuseppe Di Terlizzi
  8. */
  9. #if (!defined('DOKU_INC')) define('DOKU_INC', dirname(__FILE__).'/../../../../');
  10. if (!defined('DOKU_INC')) define('DOKU_INC', '/var/www/htdocs/dokuwiki/');
  11. define('DOKU_MEDIAMANAGER', 1); // needed to get proper CSS/JS
  12. global $lang;
  13. global $conf;
  14. global $JSINFO;
  15. require_once(DOKU_INC.'inc/init.php');
  16. require_once(DOKU_INC.'inc/template.php');
  17. require_once(DOKU_INC.'inc/lang/en/lang.php');
  18. require_once(DOKU_INC.'inc/lang/'.$conf['lang'].'/lang.php');
  19. $JSINFO['id'] = '';
  20. $JSINFO['namespace'] = '';
  21. $tmp = array();
  22. trigger_event('MEDIAMANAGER_STARTED', $tmp);
  23. session_write_close(); //close session
  24. $icons_plugin = plugin_load('action','icons');
  25. $use_font_awesome = $icons_plugin->getConf('loadFontAwesome');
  26. $use_material_icons = $icons_plugin->getConf('loadMaterialIcons');
  27. $use_typicons = $icons_plugin->getConf('loadTypicons');
  28. $use_font_linux = $icons_plugin->getConf('loadFontlinux');
  29. $use_rpg_awesome = $icons_plugin->getConf('loadRpgAwesome');
  30. $use_glyphicons = false;
  31. # Load Bootstrap3 Template assets
  32. if ($conf['template'] == 'bootstrap3') {
  33. include_once(DOKU_INC.'lib/tpl/bootstrap3/tpl_functions.php');
  34. include_once(DOKU_INC.'lib/tpl/bootstrap3/tpl_global.php');
  35. # Glyphicons if bundled into Bootstrap 3.x
  36. $use_glyphicons = true;
  37. }
  38. $list_material_icons = include(dirname(__FILE__) . '/list-material-icons.php');
  39. $list_font_awesome = include(dirname(__FILE__) . '/list-font-awesome.php');
  40. $list_glyphicon = include(dirname(__FILE__) . '/list-glyphicon.php');
  41. $list_typicons = include(dirname(__FILE__) . '/list-typicons.php');
  42. $list_font_linux = include(dirname(__FILE__) . '/list-font-linux.php');
  43. $list_rpg_awesome = include(dirname(__FILE__) . '/list-rpg-awesome.php');
  44. header('Content-Type: text/html; charset=utf-8');
  45. header('X-UA-Compatible: IE=edge,chrome=1');
  46. ?><!DOCTYPE html>
  47. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang'] ?>" lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>" class="no-js">
  48. <head>
  49. <meta charset="UTF-8" />
  50. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  51. <title>Icons Plugin</title>
  52. <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
  53. <meta name="viewport" content="width=device-width,initial-scale=1" />
  54. <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
  55. <?php tpl_metaheaders() ?>
  56. <style type="text/css">
  57. body { padding: 20px; }
  58. .btn-icon { margin: 4px; padding: 4px; }
  59. .tab-icons { overflow-y: auto; height: 300px; }
  60. <?php if (! $use_glyphicons): ?>
  61. footer { bottom: 20px; position: fixed; }
  62. .col-sm-6 { width:50%; float: left; }
  63. .tab-pane, .hide { display: none; }
  64. button.active { border-style: inset; }
  65. <?php endif; ?>
  66. </style>
  67. <script type="text/javascript">
  68. jQuery(document).ready(function() {
  69. var is_bootstrap = (typeof jQuery.fn.modal !== "undefined");
  70. var $icon_pack = jQuery('#icon_pack'),
  71. $icon_name = jQuery('#icon_name'),
  72. $icon_size = jQuery('#icon_size'),
  73. $icon_align = jQuery('#icon_align'),
  74. $output = jQuery('#output'),
  75. $preview = jQuery('#preview');
  76. if (! is_bootstrap) {
  77. jQuery('.tab-pane').hide();
  78. }
  79. jQuery('button[data-icon-size]').on('click', function() {
  80. jQuery('button[data-icon-size]').removeClass('active');
  81. jQuery(this).addClass('active');
  82. $icon_size.val(jQuery(this).data('icon-size'));
  83. jQuery(document).trigger('popup:build');
  84. });
  85. jQuery('button[data-icon-align]').on('click', function() {
  86. jQuery('button[data-icon-align]').removeClass('active');
  87. jQuery(this).addClass('active');
  88. $icon_align.val(jQuery(this).data('icon-align'));
  89. jQuery(document).trigger('popup:build');
  90. });
  91. jQuery('ul.nav a').on('click', function() {
  92. if (! is_bootstrap) {
  93. jQuery('.tab-pane').hide();
  94. jQuery('ul.nav li.active').removeClass('active');
  95. jQuery(jQuery(this).attr('href')).show();
  96. jQuery(this).parent().addClass('active');
  97. }
  98. $icon_pack.val(jQuery(this).data('pack'));
  99. jQuery('.preview-box').removeClass('hide');
  100. jQuery(document).trigger('popup:reset');
  101. });
  102. jQuery('.btn-icon').on('click', function() {
  103. $icon_name.val(jQuery(this).data('icon-name'));
  104. jQuery(document).trigger('popup:build');
  105. });
  106. jQuery(document).on('popup:build', function() {
  107. var icon_pack = $icon_pack.val(),
  108. icon_size = $icon_size.val(),
  109. icon_align = $icon_align.val(),
  110. icon_name = $icon_name.val();
  111. if (! icon_name) {
  112. return false;
  113. }
  114. var syntax = [ '{{' ];
  115. if ( icon_align == 'right' || icon_align == 'center') {
  116. syntax.push(' ');
  117. }
  118. syntax.push(icon_pack);
  119. syntax.push('>' + icon_name);
  120. var icon_size_pixel = 0;
  121. switch (icon_size) {
  122. case 'small':
  123. icon_size_pixel = 24;
  124. break;
  125. case 'medium':
  126. icon_size_pixel = 32;
  127. break;
  128. case 'large':
  129. icon_size_pixel = 48;
  130. break;
  131. }
  132. if (icon_size_pixel) {
  133. syntax.push('?' + icon_size_pixel);
  134. }
  135. if ( icon_align == 'left' || icon_align == 'center') {
  136. syntax.push(' ');
  137. }
  138. syntax.push('}}');
  139. $output.val(syntax.join(''));
  140. $preview.text(syntax.join(''));
  141. });
  142. jQuery('#btn-reset').on('click', function() {
  143. jQuery(document).trigger('popup:reset');
  144. });
  145. jQuery(document).on('popup:reset', function() {
  146. jQuery('form').each(function(){
  147. jQuery(this)[0].reset();
  148. });
  149. $output.val('');
  150. $preview.text('');
  151. });
  152. jQuery('#btn-preview, #btn-insert').on('click', function() {
  153. if (jQuery(this).attr('id') === 'btn-insert') {
  154. opener.insertAtCarret('wiki__text', $output.val());
  155. opener.focus();
  156. }
  157. });
  158. });
  159. </script>
  160. </head>
  161. <body class="container-fluid dokuwiki">
  162. <ul class="tabs nav nav-tabs" role="tablist">
  163. <?php if ($use_font_awesome): ?>
  164. <li>
  165. <a data-toggle="tab" href="#tab-font-awesome" data-pack="fa">Font-Awesome</a>
  166. </li>
  167. <?php endif; ?>
  168. <?php if ($use_glyphicons): ?>
  169. <li>
  170. <a data-toggle="tab" href="#tab-glyphicon" data-pack="glyphicon">Glyphicons</a>
  171. </li>
  172. <?php endif; ?>
  173. <?php if ($use_material_icons): ?>
  174. <li>
  175. <a data-toggle="tab" href="#tab-material" data-pack="material">Material Icons</a>
  176. </li>
  177. <?php endif; ?>
  178. <?php if ($use_typicons): ?>
  179. <li>
  180. <a data-toggle="tab" href="#tab-typicons" data-pack="typcn">Typicons</a>
  181. </li>
  182. <?php endif; ?>
  183. <?php if ($use_font_linux): ?>
  184. <li>
  185. <a data-toggle="tab" href="#tab-font-linux" data-pack="fl">Font-Linux</a>
  186. </li>
  187. <?php endif; ?>
  188. <?php if ($use_rpg_awesome): ?>
  189. <li>
  190. <a data-toggle="tab" href="#tab-rpg-awesome" data-pack="fl">RPG-Awesome</a>
  191. </li>
  192. <?php endif; ?>
  193. </ul>
  194. <main class="tab-content">
  195. <div id="tab-font-awesome" class="tab-pane fade">
  196. <div class="row tab-icons">
  197. <?php foreach($list_font_awesome as $icon): ?>
  198. <div class="col-sm-6">
  199. <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  200. <i class="fa fa-fw fa-2x fa-<?php echo $icon ?>"></i>
  201. </button>
  202. <small><?php echo $icon ?></small>
  203. </div>
  204. <?php endforeach ?>
  205. </div>
  206. </div>
  207. <div id="tab-rpg-awesome" class="tab-pane fade">
  208. <div class="row tab-icons">
  209. <?php foreach($list_rpg_awesome as $icon): ?>
  210. <div class="col-sm-6">
  211. <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  212. <i class="ra ra-fw ra-2x ra-<?php echo $icon ?>"></i>
  213. </button>
  214. <small><?php echo $icon ?></small>
  215. </div>
  216. <?php endforeach ?>
  217. </div>
  218. </div>
  219. <div id="tab-material" class="tab-pane fade">
  220. <div class="row tab-icons">
  221. <?php foreach($list_material_icons as $icon): ?>
  222. <div class="col-sm-6">
  223. <button class="btn btn-default btn-xs btn-icon material-icons" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>"><?php echo $icon ?></button>
  224. <small><?php echo $icon ?></small>
  225. </div>
  226. <?php endforeach ?>
  227. </div>
  228. </div>
  229. <div id="tab-glyphicon" class="tab-pane fade">
  230. <div class="row tab-icons">
  231. <?php foreach($list_glyphicon as $icon): ?>
  232. <div class="col-sm-6">
  233. <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  234. <i class="fa-fw fa-2x glyphicon glyphicon-<?php echo $icon ?>"></i>
  235. </button>
  236. <small><?php echo $icon ?></small>
  237. </div>
  238. <?php endforeach ?>
  239. </div>
  240. </div>
  241. <div id="tab-typicons" class="tab-pane fade">
  242. <div class="row tab-icons">
  243. <?php foreach($list_typicons as $icon): ?>
  244. <div class="col-sm-6">
  245. <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  246. <i class="fa-fw fa-2x typcn typcn-<?php echo $icon ?>"></i>
  247. </button>
  248. <small><?php echo $icon ?></small>
  249. </div>
  250. <?php endforeach ?>
  251. </div>
  252. </div>
  253. <div id="tab-font-linux" class="tab-pane fade">
  254. <div class="row tab-icons">
  255. <?php foreach($list_font_linux as $icon): ?>
  256. <div class="col-sm-6">
  257. <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  258. <i class="fa-fw fa-2x fl fl-<?php echo $icon ?>"></i>
  259. </button>
  260. <small><?php echo $icon ?></small>
  261. </div>
  262. <?php endforeach ?>
  263. </div>
  264. </div>
  265. <div class="preview-box hide">
  266. <hr/>
  267. <div class="row">
  268. <div class="box-alignment col-sm-6">
  269. <label>Alignment</label>
  270. <div class="btn-group btn-group-xs">
  271. <button class="button btn btn-default active" data-icon-align="" title="Use no align">
  272. <img src="http://localhost/dokuwiki/lib/images/media_align_noalign.png" />
  273. </button><button class="button btn btn-default" data-icon-align="left" title="Align the icon on the left">
  274. <img src="http://localhost/dokuwiki/lib/images/media_align_left.png" />
  275. </button><button class="button btn btn-default" data-icon-align="center" title="Align the icon in the center">
  276. <img src="http://localhost/dokuwiki/lib/images/media_align_center.png" />
  277. </button><button class="button btn btn-default" data-icon-align="right" title="Align the icon on the right">
  278. <img src="http://localhost/dokuwiki/lib/images/media_align_right.png" />
  279. </button>
  280. </div>
  281. </div>
  282. <div class="box-size col-sm-6">
  283. <label>Image size</label>
  284. <div class="btn-group btn-group-xs">
  285. <button class="button btn btn-default" data-icon-size="small" title="Small size">
  286. <img src="http://localhost/dokuwiki/lib/images/media_size_small.png" />
  287. </button><button class="button btn btn-default" data-icon-size="medium" title="Medium size">
  288. <img src="http://localhost/dokuwiki/lib/images/media_size_medium.png" />
  289. </button><button class="button btn btn-default" data-icon-size="large" title="Large size">
  290. <img src="http://localhost/dokuwiki/lib/images/media_size_large.png" />
  291. </button><button class="button btn btn-default active" data-icon-size="original" title="Original size">
  292. <img src="http://localhost/dokuwiki/lib/images/media_size_original.png" />
  293. </button>
  294. </div>
  295. </div>
  296. </div>
  297. <p>&nbsp;</p>
  298. <label>Preview</label>
  299. <pre id="preview"></pre>
  300. <input type="hidden" id="output" />
  301. <input type="hidden" id="icon_pack" />
  302. <input type="hidden" id="icon_name" />
  303. <input type="hidden" id="icon_size" />
  304. <input type="hidden" id="icon_align" />
  305. </div>
  306. </main>
  307. <footer>
  308. <nav class="navbar navbar-default navbar-fixed-bottom">
  309. <div class="container-fluid">
  310. <div class="navbar-text">
  311. <button type="button" id="btn-preview" class="hidden btn btn-default">Preview code</button>
  312. <button type="button" id="btn-insert" class="btn btn-success">Insert</button>
  313. <button type="button" id="btn-reset" class="btn btn-default">Reset</button>
  314. </div>
  315. </div>
  316. </nav>
  317. </footer>
  318. </body>
  319. </html>