| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407 | <?php/** * Plugin Icons: Popup helper *  * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html) * @author     Giuseppe Di Terlizzi <giuseppe.diterlizzi@gmail.com> * @copyright  (C) 2015-2018, Giuseppe Di Terlizzi */ #if (!defined('DOKU_INC')) define('DOKU_INC', dirname(__FILE__).'/../../../../');if (!defined('DOKU_INC')) define('DOKU_INC', '/var/www/htdocs/dokuwiki/');define('DOKU_MEDIAMANAGER', 1); // needed to get proper CSS/JSglobal $lang;global $conf;global $JSINFO;require_once(DOKU_INC.'inc/init.php');require_once(DOKU_INC.'inc/template.php');require_once(DOKU_INC.'inc/lang/en/lang.php');require_once(DOKU_INC.'inc/lang/'.$conf['lang'].'/lang.php');$JSINFO['id']        = '';$JSINFO['namespace'] = '';$tmp = array();trigger_event('MEDIAMANAGER_STARTED', $tmp);session_write_close();  //close session$icons_plugin = plugin_load('action','icons');$use_font_awesome   = $icons_plugin->getConf('loadFontAwesome');$use_material_icons = $icons_plugin->getConf('loadMaterialIcons');$use_typicons       = $icons_plugin->getConf('loadTypicons');$use_font_linux     = $icons_plugin->getConf('loadFontlinux');$use_rpg_awesome    = $icons_plugin->getConf('loadRpgAwesome');$use_glyphicons     = false;# Load Bootstrap3 Template assetsif ($conf['template'] == 'bootstrap3') {  include_once(DOKU_INC.'lib/tpl/bootstrap3/tpl_functions.php');  include_once(DOKU_INC.'lib/tpl/bootstrap3/tpl_global.php');  # Glyphicons if bundled into Bootstrap 3.x  $use_glyphicons = true;}$list_material_icons = include(dirname(__FILE__) . '/list-material-icons.php');$list_font_awesome   = include(dirname(__FILE__) . '/list-font-awesome.php');$list_glyphicon      = include(dirname(__FILE__) . '/list-glyphicon.php');$list_typicons       = include(dirname(__FILE__) . '/list-typicons.php');$list_font_linux     = include(dirname(__FILE__) . '/list-font-linux.php');$list_rpg_awesome    = include(dirname(__FILE__) . '/list-rpg-awesome.php');header('Content-Type: text/html; charset=utf-8');header('X-UA-Compatible: IE=edge,chrome=1');?><!DOCTYPE html><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"><head>  <meta charset="UTF-8" />  <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <title>Icons Plugin</title>  <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>  <meta name="viewport" content="width=device-width,initial-scale=1" />  <?php echo tpl_favicon(array('favicon', 'mobile')) ?>  <?php tpl_metaheaders() ?>  <style type="text/css">    body { padding: 20px; }    .btn-icon { margin: 4px; padding: 4px; }    .tab-icons { overflow-y: auto; height: 300px; }    <?php if (! $use_glyphicons): ?>    footer { bottom: 20px; position: fixed; }    .col-sm-6 { width:50%; float: left; }    .tab-pane, .hide { display: none; }    button.active { border-style: inset; }    <?php endif; ?>  </style>  <script type="text/javascript">    jQuery(document).ready(function() {      var is_bootstrap = (typeof jQuery.fn.modal !== "undefined");      var $icon_pack    = jQuery('#icon_pack'),          $icon_name    = jQuery('#icon_name'),          $icon_size    = jQuery('#icon_size'),          $icon_align   = jQuery('#icon_align'),          $output       = jQuery('#output'),          $preview      = jQuery('#preview');      if (! is_bootstrap) {        jQuery('.tab-pane').hide();      }      jQuery('button[data-icon-size]').on('click', function() {        jQuery('button[data-icon-size]').removeClass('active');        jQuery(this).addClass('active');        $icon_size.val(jQuery(this).data('icon-size'));        jQuery(document).trigger('popup:build');      });      jQuery('button[data-icon-align]').on('click', function() {        jQuery('button[data-icon-align]').removeClass('active');        jQuery(this).addClass('active');        $icon_align.val(jQuery(this).data('icon-align'));        jQuery(document).trigger('popup:build');      });      jQuery('ul.nav a').on('click', function() {        if (! is_bootstrap) {          jQuery('.tab-pane').hide();          jQuery('ul.nav li.active').removeClass('active');          jQuery(jQuery(this).attr('href')).show();          jQuery(this).parent().addClass('active');        }        $icon_pack.val(jQuery(this).data('pack'));        jQuery('.preview-box').removeClass('hide');        jQuery(document).trigger('popup:reset');      });      jQuery('.btn-icon').on('click', function() {        $icon_name.val(jQuery(this).data('icon-name'));        jQuery(document).trigger('popup:build');      });      jQuery(document).on('popup:build', function() {        var icon_pack  = $icon_pack.val(),            icon_size  = $icon_size.val(),            icon_align = $icon_align.val(),            icon_name  = $icon_name.val();        if (! icon_name) {          return false;        }        var syntax = [ '{{' ];        if ( icon_align == 'right' || icon_align == 'center') {          syntax.push(' ');        }        syntax.push(icon_pack);        syntax.push('>' + icon_name);        var icon_size_pixel = 0;        switch (icon_size) {          case 'small':            icon_size_pixel = 24;            break;          case 'medium':            icon_size_pixel = 32;            break;          case 'large':            icon_size_pixel = 48;            break;        }        if (icon_size_pixel) {          syntax.push('?' + icon_size_pixel);        }        if ( icon_align == 'left' || icon_align == 'center') {          syntax.push(' ');        }        syntax.push('}}');        $output.val(syntax.join(''));        $preview.text(syntax.join(''));      });      jQuery('#btn-reset').on('click', function() {        jQuery(document).trigger('popup:reset');      });      jQuery(document).on('popup:reset', function() {        jQuery('form').each(function(){          jQuery(this)[0].reset();        });        $output.val('');        $preview.text('');      });      jQuery('#btn-preview, #btn-insert').on('click', function() {        if (jQuery(this).attr('id') === 'btn-insert') {          opener.insertAtCarret('wiki__text', $output.val());          opener.focus();        }      });    });  </script></head><body class="container-fluid dokuwiki">  <ul class="tabs nav nav-tabs" role="tablist">    <?php if ($use_font_awesome): ?>    <li>      <a data-toggle="tab" href="#tab-font-awesome" data-pack="fa">Font-Awesome</a>    </li>    <?php endif; ?>    <?php if ($use_glyphicons): ?>    <li>      <a data-toggle="tab" href="#tab-glyphicon" data-pack="glyphicon">Glyphicons</a>    </li>    <?php endif; ?>    <?php if ($use_material_icons): ?>    <li>      <a data-toggle="tab" href="#tab-material" data-pack="material">Material Icons</a>    </li>    <?php endif; ?>    <?php if ($use_typicons): ?>    <li>      <a data-toggle="tab" href="#tab-typicons" data-pack="typcn">Typicons</a>    </li>    <?php endif; ?>    <?php if ($use_font_linux): ?>    <li>      <a data-toggle="tab" href="#tab-font-linux" data-pack="fl">Font-Linux</a>    </li>    <?php endif; ?>    <?php if ($use_rpg_awesome): ?>    <li>      <a data-toggle="tab" href="#tab-rpg-awesome" data-pack="fl">RPG-Awesome</a>    </li>    <?php endif; ?>  </ul>  <main class="tab-content">    <div id="tab-font-awesome" class="tab-pane fade">      <div class="row tab-icons">        <?php foreach($list_font_awesome as $icon): ?>          <div class="col-sm-6">            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">              <i class="fa fa-fw fa-2x fa-<?php echo $icon ?>"></i>            </button>            <small><?php echo $icon ?></small>          </div>        <?php endforeach ?>      </div>    </div>    <div id="tab-rpg-awesome" class="tab-pane fade">      <div class="row tab-icons">        <?php foreach($list_rpg_awesome as $icon): ?>          <div class="col-sm-6">            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">              <i class="ra ra-fw ra-2x ra-<?php echo $icon ?>"></i>            </button>            <small><?php echo $icon ?></small>          </div>        <?php endforeach ?>      </div>    </div>    <div id="tab-material" class="tab-pane fade">      <div class="row tab-icons">        <?php foreach($list_material_icons as $icon): ?>          <div class="col-sm-6">            <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>            <small><?php echo $icon ?></small>          </div>        <?php endforeach ?>      </div>    </div>    <div id="tab-glyphicon" class="tab-pane fade">      <div class="row tab-icons">        <?php foreach($list_glyphicon as $icon): ?>          <div class="col-sm-6">            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">              <i class="fa-fw fa-2x glyphicon glyphicon-<?php echo $icon ?>"></i>            </button>            <small><?php echo $icon ?></small>          </div>        <?php endforeach ?>      </div>    </div>    <div id="tab-typicons" class="tab-pane fade">      <div class="row tab-icons">        <?php foreach($list_typicons as $icon): ?>          <div class="col-sm-6">            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">              <i class="fa-fw fa-2x typcn typcn-<?php echo $icon ?>"></i>            </button>            <small><?php echo $icon ?></small>          </div>        <?php endforeach ?>      </div>    </div>    <div id="tab-font-linux" class="tab-pane fade">      <div class="row tab-icons">        <?php foreach($list_font_linux as $icon): ?>          <div class="col-sm-6">            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">              <i class="fa-fw fa-2x fl fl-<?php echo $icon ?>"></i>            </button>            <small><?php echo $icon ?></small>          </div>        <?php endforeach ?>      </div>    </div>    <div class="preview-box hide">      <hr/>      <div class="row">        <div class="box-alignment col-sm-6">          <label>Alignment</label>          <div class="btn-group btn-group-xs">            <button class="button btn btn-default active" data-icon-align="" title="Use no align">              <img src="http://localhost/dokuwiki/lib/images/media_align_noalign.png" />            </button><button class="button btn btn-default" data-icon-align="left" title="Align the icon on the left">              <img src="http://localhost/dokuwiki/lib/images/media_align_left.png" />            </button><button class="button btn btn-default" data-icon-align="center" title="Align the icon in the center">              <img src="http://localhost/dokuwiki/lib/images/media_align_center.png" />            </button><button class="button btn btn-default" data-icon-align="right" title="Align the icon on the right">              <img src="http://localhost/dokuwiki/lib/images/media_align_right.png" />            </button>          </div>        </div>        <div class="box-size col-sm-6">          <label>Image size</label>          <div class="btn-group btn-group-xs">            <button class="button btn btn-default" data-icon-size="small" title="Small size">              <img src="http://localhost/dokuwiki/lib/images/media_size_small.png" />            </button><button class="button btn btn-default" data-icon-size="medium" title="Medium size">              <img src="http://localhost/dokuwiki/lib/images/media_size_medium.png" />            </button><button class="button btn btn-default" data-icon-size="large" title="Large size">              <img src="http://localhost/dokuwiki/lib/images/media_size_large.png" />            </button><button class="button btn btn-default active" data-icon-size="original" title="Original size">              <img src="http://localhost/dokuwiki/lib/images/media_size_original.png" />            </button>          </div>        </div>      </div>      <p> </p>      <label>Preview</label>      <pre id="preview"></pre>      <input type="hidden" id="output" />      <input type="hidden" id="icon_pack" />      <input type="hidden" id="icon_name" />      <input type="hidden" id="icon_size" />      <input type="hidden" id="icon_align" />    </div>  </main>  <footer>    <nav class="navbar navbar-default navbar-fixed-bottom">      <div class="container-fluid">        <div class="navbar-text">          <button type="button" id="btn-preview" class="hidden btn btn-default">Preview code</button>          <button type="button" id="btn-insert" class="btn btn-success">Insert</button>          <button type="button" id="btn-reset" class="btn btn-default">Reset</button>        </div>      </div>    </nav>  </footer></body></html>
 |