Add data-icon attribute to parent, using underscore instead of hyphen. …

…#2395 Also fix alt text not showing up for Catalog Settings button.
ccd0 · Apr 13, 2020 · 180a0fd · 180a0fd
1 parent f43ec21
commit 180a0fd
Show file tree

Hide file tree

Showing 19 changed files with 41 additions and 31 deletions.
diff --git a/src/Filtering/PostHiding.coffee b/src/Filtering/PostHiding.coffee
@@ -158,8 +158,9 @@ PostHiding =
 
   makeButton: (post, type) ->
     span = $.el 'span',
-      className:   "fourchan-x--icon icon--small"
-    $.extend span, `<%= html('&{type === "hide" ? Icons.minus_square_o : Icons.plus_square_o}') %>`
+      className: 'fourchan-x--icon icon--small'
+    icon = (if type is 'hide' then 'minus_square_o' else 'plus_square_o')
+    Icon.set span, icon
     a = $.el 'a',
       className: "#{type}-reply-button"
       href:      'javascript:;'

diff --git a/src/Filtering/ThreadHiding.coffee b/src/Filtering/ThreadHiding.coffee
@@ -139,7 +139,8 @@ ThreadHiding =
     a = $.el 'a',
       className: "#{type}-thread-button"
       href:      'javascript:;'
-    $.extend a, `<%= html('<span class="fourchan-x--icon icon--small">&{type === "hide" ? Icons.minus_square : Icons.plus_square}</span>') %>`
+    icon = (if type is 'hide' then 'minus_square' else 'plus_square')
+    $.extend a, `<%= html('<span class="fourchan-x--icon icon--small" data-icon="${icon}">&{$.getOwn(Icons, icon)}</span>') %>`
     a.dataset.fullID = thread.fullID
     $.on a, 'click', ThreadHiding.toggle
     a

diff --git a/src/General/Header.coffee b/src/General/Header.coffee
@@ -113,9 +113,9 @@ Header =
     if g.SITE.software is 'yotsuba' and (g.VIEW is 'catalog' or !Conf['Disable Native Extension'])
       cs = $.el 'a', href: 'javascript:;'
       if g.VIEW is 'catalog'
-        cs.title = cs.textContent = 'Catalog Settings'
+        cs.title = 'Catalog Settings'
         cs.className = 'fourchan-x--icon icon--large'
-        $.extend cs, `<%= html('&{Icons.book}') %>`
+        Icon.set cs, 'book', 'Catalog Settings'
       else
         cs.title = cs.textContent = '4chan Settings'
         cs.className = 'native-settings'

diff --git a/src/General/Index.coffee b/src/General/Index.coffee
@@ -46,7 +46,7 @@ Index =
       className: 'fourchan-x--icon icon--large'
       title: 'Refresh'
       href: 'javascript:;'
-    $.extend @button, `<%= html('<span class="icon--alt-text">Refresh Index</span>&{Icons.refresh}') %>`
+    Icon.set @button, 'refresh', 'Refresh Index'
     $.on @button, 'click', -> Index.update()
     Header.addShortcut 'index-refresh', @button, 590
 

diff --git a/src/General/Settings.coffee b/src/General/Settings.coffee
@@ -5,7 +5,7 @@ Settings =
       className:   'settings-link fourchan-x--icon icon--large'
       title:       '<%= meta.name %> Settings'
       href:        'javascript:;'
-    $.extend link, `<%= html('<span class="icon--alt-text">Settings</span>&{Icons.wrench}') %>`
+    Icon.set link, 'wrench', 'Settings'
     $.on link, 'click', Settings.open
 
     Header.addShortcut 'settings', link, 820

diff --git a/src/General/Settings/Settings.html b/src/General/Settings/Settings.html
@@ -10,7 +10,7 @@
       <a href="<%= meta.page %>" target="_blank"><%= meta.name %></a>&nbsp|&nbsp
       <a href="<%= meta.changelog %>" target="_blank">${g.VERSION}</a>&nbsp|&nbsp
       <a href="<%= meta.issues %>" target="_blank">Issues</a>&nbsp|&nbsp
-      <a href="javascript:;" class="close fourchan-x--icon" title="Close">&{Icons.close}</a>
+      <a href="javascript:;" class="close fourchan-x--icon" title="Close" data-icon="close">&{Icons.close}</a>
     </div>
   </nav>
   <div class="section-container"><section></section></div>

diff --git a/src/Icons/Icon.coffee b/src/Icons/Icon.coffee
@@ -0,0 +1,8 @@
+Icon =
+  set: (node, name, altText) ->
+    node.dataset.icon = name
+    html = $.getOwn(Icons, name)
+    if altText
+      $.extend node, `<%= html('<span class="icon--alt-text">${altText}</span>&{html}') %>`
+    else
+      $.extend node, html
diff --git a/src/Images/Gallery.coffee b/src/Images/Gallery.coffee
@@ -8,7 +8,7 @@ Gallery =
       href: 'javascript:;'
       title: 'Gallery'
       className: 'fourchan-x--icon icon--large'
-    $.extend el, `<%= html('<span class="icon--alt-text">Gallery</span>&{Icons.picture_o}') %>`
+    Icon.set el, 'picture_o', 'Gallery'
 
     $.on el, 'click', @cb.toggle
 

diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee
@@ -6,7 +6,7 @@ ImageExpand =
       className: 'expand-all-shortcut fourchan-x--icon icon--large'
       title: 'Expand All Images'
       href: 'javascript:;'
-    $.extend @EAI, `<%= html('<span class="icon--alt-text">EAI</span>&{Icons.expand}') %>`
+    Icon.set @EAI, 'expand', 'EAI'
 
     $.on @EAI, 'click', @cb.toggleAll
     Header.addShortcut 'expand-all', @EAI, 520
@@ -68,12 +68,12 @@ ImageExpand =
       if ImageExpand.on = $.hasClass ImageExpand.EAI, 'expand-all-shortcut'
         ImageExpand.EAI.className = 'contract-all-shortcut fourchan-x--icon icon--large'
         ImageExpand.EAI.title     = 'Contract All Images'
-        $.extend ImageExpand.EAI, `<%= html('<span class="icon--alt-text">CAI</span>&{Icons.compress}') %>`
+        Icon.set ImageExpand.EAI, 'compress', 'CAI'
         func = ImageExpand.expand
       else
         ImageExpand.EAI.className = 'expand-all-shortcut fourchan-x--icon icon--large'
         ImageExpand.EAI.title     = 'Expand All Images'
-        $.extend ImageExpand.EAI, `<%= html('<span class="icon--alt-text">EAI</span>&{Icons.expand}') %>`
+        Icon.set ImageExpand.EAI, 'expand', 'EAI'
         func = ImageExpand.contract
 
       g.posts.forEach (post) ->

diff --git a/src/Images/ImageLoader.coffee b/src/Images/ImageLoader.coffee
@@ -21,7 +21,7 @@ ImageLoader =
       href: 'javascript:;'
       title: 'Prefetch Images'
       className: 'fourchan-x--icon icon--large disabled'
-    $.extend el, `<%= html('<span class="icon--alt-text">Prefetch</span>&{Icons.bolt}') %>`
+    Icon.set el, 'bolt', 'Prefetch'
 
     $.on el, 'click', @toggle
 

diff --git a/src/Menu/Menu.coffee b/src/Menu/Menu.coffee
@@ -6,7 +6,7 @@ Menu =
       className: 'menu-button fourchan-x--icon icon--small'
       href:      'javascript:;'
 
-    $.extend @button, `<%= html('&{Icons.angle_down}') %>`
+    Icon.set @button, 'angle_down'
 
     @menu = new UI.Menu 'post'
     Callbacks.Post.push

diff --git a/src/Miscellaneous/FileInfo.coffee b/src/Miscellaneous/FileInfo.coffee
@@ -51,8 +51,8 @@ FileInfo =
       else
         `<%= html('<span class="fnswitch"><span class="fntrunc">${shortname}</span><span class="fnfull">${fullname}</span></span>') %>`
     N: -> `<%= html('${this.file.name}') %>`
-    d: -> `<%= html('<a href="${this.file.url}" download="${this.file.name}" class="download-button fourchan-x--icon">&{Icons.download}</a>') %>`
-    f: -> `<%= html('<a href="javascript:;" class="quick-filter-md5 fourchan-x--icon">&{Icons.close}</a>') %>`
+    d: -> `<%= html('<a href="${this.file.url}" download="${this.file.name}" class="download-button fourchan-x--icon" data-icon="download">&{Icons.download}</a>') %>`
+    f: -> `<%= html('<a href="javascript:;" class="quick-filter-md5 fourchan-x--icon" data-icon="close">&{Icons.close}</a>') %>`
     p: -> `<%= html('?{this.file.isSpoiler}{Spoiler, }') %>`
     s: -> `<%= html('${this.file.size}') %>`
     B: -> `<%= html('${Math.round(this.file.sizeInBytes)} Bytes') %>`

diff --git a/src/Miscellaneous/PSAHiding.coffee b/src/Miscellaneous/PSAHiding.coffee
@@ -27,7 +27,7 @@ PSAHiding =
       title:     'Mark announcement as read and hide.'
       className: 'hide-announcement-button fourchan-x--icon'
       href:      'javascript:;'
-    $.extend btn, `<%= html('&{Icons.minus_square}') %>`
+    Icon.set btn, 'minus_square'
     $.on btn, 'click', PSAHiding.toggle
     if psa.firstChild?.tagName is 'HR'
       $.after psa.firstChild, btn

diff --git a/src/Monitoring/ThreadWatcher.coffee b/src/Monitoring/ThreadWatcher.coffee
@@ -7,7 +7,7 @@ ThreadWatcher =
       title: 'Thread Watcher'
       href: 'javascript:;'
       className: 'fourchan-x--icon icon--large '
-    $.extend sc, `<%= html('<span class="icon--alt-text">Watcher</span>&{Icons.eye}') %>`
+    Icon.set sc, 'eye', 'Watcher'
 
     @db     = new DataBoard 'watchedThreads', @refresh, true
     @dbLM   = new DataBoard 'watcherLastModified', null, true
@@ -92,7 +92,7 @@ ThreadWatcher =
       toggler = $.el 'a',
         href: 'javascript:;'
         className: 'watch-thread-link fourchan-x--icon icon--large'
-      $.extend toggler, `<%= html('&{Icons.heart}') %>`
+      Icon.set toggler, 'heart'
       $.before $('input', @nodes.info), toggler
     siteID = g.SITE.ID
     boardID = @board.ID
@@ -403,7 +403,7 @@ ThreadWatcher =
     x = $.el 'a',
       className: 'fourchan-x--icon'
       href: 'javascript:;'
-    $.extend x, `<%= html('&{Icons.close}') %>`
+    Icon.set x, 'close'
     $.on x, 'click', ThreadWatcher.cb.rm
 
     {excerpt, isArchived} = data

diff --git a/src/Monitoring/ThreadWatcher/ThreadWatcher.html b/src/Monitoring/ThreadWatcher/ThreadWatcher.html
@@ -1,7 +1,7 @@
 <div class="move">
-  Thread Watcher <a class="refresh fourchan-x--icon" title="Check threads" href="javascript:;">&{Icons.refresh}</a>
+  Thread Watcher <a class="refresh fourchan-x--icon" title="Check threads" href="javascript:;" data-icon="refresh">&{Icons.refresh}</a>
   <span id="watcher-status"></span>
-  <a class="menu-button fourchan-x--icon" href="javascript:;">&{Icons.angle_down}</a>
+  <a class="menu-button fourchan-x--icon" href="javascript:;" data-icon="angle_down">&{Icons.angle_down}</a>
   <a class="close" href="javascript:;">×</a>
 </div>
 <div id="watched-threads"></div>
diff --git a/src/Posting/QR.coffee b/src/Posting/QR.coffee
@@ -38,7 +38,7 @@ QR =
       className: 'fourchan-x--icon icon--large disabled'
       title: 'Quick Reply'
       href: 'javascript:;'
-    $.extend sc, `<%= html('<span class="icon--alt-text">QR</span>&{Icons.comment_o}') %>`
+    Icon.set sc, 'comment_o', 'QR'
     $.on sc, 'click', ->
       return unless QR.postingIsEnabled
       if Conf['Persistent QR'] or !QR.nodes or QR.nodes.el.hidden

diff --git a/src/Posting/QR.post.coffee b/src/Posting/QR.post.coffee
@@ -4,7 +4,7 @@ QR.post = class
       className: 'qr-preview'
       draggable: true
       href: 'javascript:;'
-    $.extend el, `<%= html('<a class="remove" title="Remove"><span class="fourchan-x--icon">&{Icons.times_circle}</span></a><label class="qr-preview-spoiler"><input type="checkbox"> Spoiler</label><span></span>') %>`
+    $.extend el, `<%= html('<a class="remove" title="Remove"><span class="fourchan-x--icon" data-icon="times_circle">&{Icons.times_circle}</span></a><label class="qr-preview-spoiler"><input type="checkbox"> Spoiler</label><span></span>') %>`
 
     @nodes =
       el:      el

diff --git a/src/Posting/QR/QuickReply.html b/src/Posting/QR/QuickReply.html
@@ -40,12 +40,12 @@
         <input type="checkbox" id="qr-file-spoiler" title="Spoiler image">
         <a class="checkbox-letter">S</a>
       </label>
-      <a id="qr-oekaki-button" class="fourchan-x--icon" title="Edit in Tegaki">&{Icons.edit}</a>
-      <a href="javascript:;" id="qr-filerm" class="fourchan-x--icon" title="Remove file">&{Icons.times_circle}</a>
-      <a id="url-button" class="fourchan-x--icon" title="Post from URL">&{Icons.link}</a>
-      <a hidden id="paste-area" title="Select to paste images" class="fourchan-x--icon" tabindex="-1" contentEditable="true">&{Icons.clipboard}</a>
-      <a id="custom-cooldown-button" class="fourchan-x--icon disabled" title="Toggle custom cooldown">&{Icons.clock_o}</a>
-      <a id="dump-button" class="fourchan-x--icon" title="Dump list">&{Icons.plus_square}</a>
+      <a id="qr-oekaki-button" class="fourchan-x--icon" title="Edit in Tegaki" data-icon="edit">&{Icons.edit}</a>
+      <a href="javascript:;" id="qr-filerm" class="fourchan-x--icon" title="Remove file" data-icon="times_circle">&{Icons.times_circle}</a>
+      <a id="url-button" class="fourchan-x--icon" title="Post from URL" data-icon="link">&{Icons.link}</a>
+      <a hidden id="paste-area" title="Select to paste images" class="fourchan-x--icon" tabindex="-1" contentEditable="true" data-icon="clipboard">&{Icons.clipboard}</a>
+      <a id="custom-cooldown-button" class="fourchan-x--icon disabled" title="Toggle custom cooldown" data-icon="clock">&{Icons.clock_o}</a>
+      <a id="dump-button" class="fourchan-x--icon" title="Dump list" data-icon="plus_square">&{Icons.plus_square}</a>
     </span>
     <input type="submit">
   </div>

diff --git a/src/classes/Notice.coffee b/src/classes/Notice.coffee
@@ -1,7 +1,7 @@
 class Notice
   constructor: (type, content, @timeout, @onclose) ->
     @el = $.el 'div',
-      `<%= html('<a href="javascript:;" class="close fourchan-x--icon icon--small" title="Close">&{Icons.close}</a><div class="message"></div>') %>`
+      `<%= html('<a href="javascript:;" class="close fourchan-x--icon icon--small" title="Close" data-icon="close">&{Icons.close}</a><div class="message"></div>') %>`
     @el.style.opacity = 0
     @setType type
     $.on @el.firstElementChild, 'click', @close