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