Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-58849

Block hide / show not using FontAwesome when set by the theme.

    Details

    • Type: Bug
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.3
    • Fix Version/s: None
    • Component/s: Blocks
    • Labels:
      None
    • Testing Instructions:
      Hide
      1. Edit the Clean theme config.php file and add '$THEME->iconsystem = \core\output\icon_system::FONTAWESOME;' at the bottom.
      2. Purge all caches.
      3. Login as an administrator.
      4. Navigate to the Dashboard.
      5. On the 'Administration' block observe the use of the FontAwesome fa-minus-square-o icon for block hiding.
      6. Repeat for block showing with fa-plus-square-o.
      Show
      Edit the Clean theme config.php file and add '$THEME->iconsystem = \core\output\icon_system::FONTAWESOME;' at the bottom. Purge all caches. Login as an administrator. Navigate to the Dashboard. On the 'Administration' block observe the use of the FontAwesome fa-minus-square-o icon for block hiding. Repeat for block showing with fa-plus-square-o.
    • Workaround:
      Hide

      Override in a theme.  For example:

      
      // Replacement core JS for using FontAwesome icons instead.
      M.util.init_block_hider = function(Y, config) \{
       Y.use('base', 'node', function(Y) \{
       M.util.block_hider = M.util.block_hider || (function()\{
       var blockhider = function() \{
       blockhider.superclass.constructor.apply(this, arguments);
       };
       blockhider.prototype = \{
       initializer : function(config) \{
       this.set('block', '#' + this.get('id'));
       var b = this.get('block'),
       t = b.one('.title'),
       a = null,
       hide,
       show;
       if (t && (a = t.one('.block_action'))) \{
       hide = Y.Node.create('<i>');
       hide.addClass('block-hider-hide ' + this.get('iconVisible'));
       hide.setAttrs(\{
       'aria-hidden': true,
       'aria-label': config.tooltipVisible,
       tabIndex: 0,
       'title': config.tooltipVisible
       });
       hide.on('keypress', this.updateStateKey, this, true);
       hide.on('click', this.updateState, this, true);
      
      show = Y.Node.create('<i>');
       show.addClass('block-hider-show ' + this.get('iconHidden'));
       show.setAttrs(\{
       'aria-hidden': true,
       'aria-label': config.tooltipVisible,
       tabIndex: 0,
       'title': config.tooltipVisible
       });
       show.on('keypress', this.updateStateKey, this, false);
       show.on('click', this.updateState, this, false);
      
      a.insert(show, 0).insert(hide, 0);
       }
       },
       updateState : function(e, hide) \{
       M.util.set_user_preference(this.get('preference'), hide);
       if (hide) \{
       this.get('block').addClass('hidden');
       this.get('block').one('.block-hider-show').focus();
       } else \{
       this.get('block').removeClass('hidden');
       this.get('block').one('.block-hider-hide').focus();
       }
       },
       updateStateKey : function(e, hide) \{
       if (e.keyCode == 13) \{ // Allow hide/show via enter key.
       this.updateState(this, hide);
       }
       }
       };
       Y.extend(blockhider, Y.Base, blockhider.prototype, \{
       NAME : 'blockhider',
       ATTRS : \{
       id : \{},
       preference : \{},
       iconVisible : \{
       value : 'icon fa fa-plus-square-o fa-fw'
       },
       iconHidden : \{
       value : 'icon fa fa-minus-square-o fa-fw'
       },
       block : \{
       setter : function(node) \{
       return Y.one(node);
       }
       }
       }
       });
       return blockhider;
       })();
       new M.util.block_hider(config);
       });
      };
      
      

       

      Show
      Override in a theme.  For example: // Replacement core JS for using FontAwesome icons instead. M.util.init_block_hider = function(Y, config) \{ Y.use('base', 'node', function(Y) \{ M.util.block_hider = M.util.block_hider || (function()\{ var blockhider = function() \{ blockhider.superclass.constructor.apply( this , arguments); }; blockhider.prototype = \{ initializer : function(config) \{ this .set('block', '#' + this .get('id')); var b = this .get('block'), t = b.one('.title'), a = null , hide, show; if (t && (a = t.one('.block_action'))) \{ hide = Y.Node.create('<i>'); hide.addClass('block-hider-hide ' + this .get('iconVisible')); hide.setAttrs(\{ 'aria-hidden': true , 'aria-label': config.tooltipVisible, tabIndex: 0, 'title': config.tooltipVisible }); hide.on('keypress', this .updateStateKey, this , true ); hide.on('click', this .updateState, this , true ); show = Y.Node.create('<i>'); show.addClass('block-hider-show ' + this .get('iconHidden')); show.setAttrs(\{ 'aria-hidden': true , 'aria-label': config.tooltipVisible, tabIndex: 0, 'title': config.tooltipVisible }); show.on('keypress', this .updateStateKey, this , false ); show.on('click', this .updateState, this , false ); a.insert(show, 0).insert(hide, 0); } }, updateState : function(e, hide) \{ M.util.set_user_preference( this .get('preference'), hide); if (hide) \{ this .get('block').addClass('hidden'); this .get('block').one('.block-hider-show').focus(); } else \{ this .get('block').removeClass('hidden'); this .get('block').one('.block-hider-hide').focus(); } }, updateStateKey : function(e, hide) \{ if (e.keyCode == 13) \{ // Allow hide/show via enter key. this .updateState( this , hide); } } }; Y.extend(blockhider, Y.Base, blockhider.prototype, \{ NAME : 'blockhider', ATTRS : \{ id : \{}, preference : \{}, iconVisible : \{ value : 'icon fa fa-plus-square-o fa-fw' }, iconHidden : \{ value : 'icon fa fa-minus-square-o fa-fw' }, block : \{ setter : function(node) \{ return Y.one(node); } } } }); return blockhider; })(); new M.util.block_hider(config); }); };  
    • Affected Branches:
      MOODLE_33_STABLE

      Description

      In MDL-40759 FontAwesome was added as an icon system to be used by a theme if desired. The title of the issue is 'Use the Font Awesome icon font for all icons in Moodle' however the function 'M.util.init_block_hider' in '/lib/javascript-static.js':

      
      M.util.init_block_hider = function(Y, config) \{
       Y.use('base', 'node', function(Y) \{
       M.util.block_hider = M.util.block_hider || (function()\{
       var blockhider = function() \{
       blockhider.superclass.constructor.apply(this, arguments);
       };
       blockhider.prototype = \{
       initializer : function(config) \{
       this.set('block', '#'+this.get('id'));
       var b = this.get('block'),
       t = b.one('.title'),
       a = null,
       hide,
       show;
       if (t && (a = t.one('.block_action'))) \{
       hide = Y.Node.create('<img />')
       .addClass('block-hider-hide')
       .setAttrs(\{
       alt: config.tooltipVisible,
       src: this.get('iconVisible'),
       tabIndex: 0,
       'title': config.tooltipVisible
       });
       hide.on('keypress', this.updateStateKey, this, true);
       hide.on('click', this.updateState, this, true);
      
      show = Y.Node.create('<img />')
       .addClass('block-hider-show')
       .setAttrs(\{
       alt: config.tooltipHidden,
       src: this.get('iconHidden'),
       tabIndex: 0,
       'title': config.tooltipHidden
       });
       show.on('keypress', this.updateStateKey, this, false);
       show.on('click', this.updateState, this, false);
      
      a.insert(show, 0).insert(hide, 0);
       }
       },
       updateState : function(e, hide) \{
       M.util.set_user_preference(this.get('preference'), hide);
       if (hide) \{
       this.get('block').addClass('hidden');
       this.get('block').one('.block-hider-show').focus();
       } else \{
       this.get('block').removeClass('hidden');
       this.get('block').one('.block-hider-hide').focus();
       }
       },
       updateStateKey : function(e, hide) \{
       if (e.keyCode == 13) \{ //allow hide/show via enter key
       this.updateState(this, hide);
       }
       }
       };
       Y.extend(blockhider, Y.Base, blockhider.prototype, \{
       NAME : 'blockhider',
       ATTRS : \{
       id : \{},
       preference : \{},
       iconVisible : \{
       value : M.util.image_url('t/switch_minus', 'moodle')
       },
       iconHidden : \{
       value : M.util.image_url('t/switch_plus', 'moodle')
       },
       block : \{
       setter : function(node) \{
       return Y.one(node);
       }
       }
       }
       });
       return blockhider;
       })();
       new M.util.block_hider(config);
       });
      };
      
      
      

      ignores this and injects an image directly rather than implementing the intent of the theme configuration setting: $THEME->iconsystem = \core\output\icon_system::FONTAWESOME;

      So that the block hide / show icon is not replaced by a FontAwesome one.

      Therefore 'Use the Font Awesome icon font for all icons in Moodle' is false and incomplete.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  Unassigned
                  Reporter:
                  gb2048 Gareth J Barnard
                  Participants:
                  Component watchers:
                  Adrian Greeve, Mihail Geshoski
                • Votes:
                  1 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                  Dates

                  • Created:
                    Updated: