Icons not showing up - Githubissues

rogerjames1994 commented 4 years ago

I upgraded the Dokuwiki to Hogfather. Had a lot of issues with the nav menu at the top was not working and menu's on the left side was not displaying. So upgraded Bootstrap3 to Developer. Still having issues with the Icon plugin. The side menu when you refresh, several of the icons disappear. When you go to edit the page and hit one of the icons, before the updates, there would be a preview line. But since the upgrade of both Dokuwiki and the Bootstrap3, the preview line is gone. It is just a blank screen. So when you click a icon no matter which one, the preview does not show up so you cannot change the icon or add a icon. Below is a few screen shots.

Before the upgrade: wikiupgrade1

After Upgrade: wikiupgrade2

rogerjames1994 commented 4 years ago

Has any one been about to figure out how to fix this issue? I have tried both Google Chrome and IE and both have the same results. Please let me know if any one is able to figure out a fix for this. Thanks.

donbertone commented 3 years ago

same problem here, firefox and ms edge chromium

inbsp commented 1 year ago

Well, same here.

dokuwiki 2022-07-31 "Igor"
ubuntu 22.04
apache2
php7.4
fontawesome and bootstrap installed via adding cdn versions in <head>

in inspector, there is an error

Uncaught ReferenceError: jQuery is not defined
/lib/plugins/icons/exe/popup.php?ns=playground&edid=wiki__text:42

but in a page source I can see, that jquery 3.1.1 and jquery UI 1.12.1 is present. Maybe something broke since jquery version upgrade, but I am not into javascript stuff at all. *changing jquerycdn option in wiki settings from local to CDN did not make a positive effect.

since this issue exists almost 3 years already, I will just leave a comment here, and hope for the best.

inbsp commented 1 year ago

[SOLVED] so I did some digging. The error I caught (pun is not intended)

Uncaught ReferenceError: jQuery is not defined
/lib/plugins/icons/exe/popup.php?ns=playground&edid=wiki__text:42

was because script, that uses jQuery in /lib/plugins/icons/exe/popup.php calls for jQuery before jQuery is loaded. All of the jQuery is embedded with defer tag, that's why this error occurs.

the safe solution:

make a backup copy of popup.php
copy script, that located inside popup.php (script for reference is on the bottom of this comment)
create file popup_script.js in same catalog and paste this script into it
delete this script from popup.php, and replace it with <script src="/lib/plugins/icons/exe/popup_script.js" defer="defer"></script> and save.

note: browser ignores defer if <script> does not have src directive. That's what this hustle about.

reload page, call popup menu, everything now is working.

Script for reference:

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 = [ '{{' ];

        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) {
          syntax.push('&align=' + icon_align);
        }

        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();
        }

      });

    });

giterlizzi / dokuwiki-plugin-icons

Icons not showing up #26