Make HTML templates output Javascript, part 3. #829

src/Filtering/Filter.coffee

@@ -283,7 +283,7 @@ Filter =
       $('span', notice.el).textContent = "#{notice.filters.length} MD5s filtered."
     else
       msg = $.el 'div',
-        <%= html('<span>MD5 filtered.</span> [<a href="javascript:;">show</a>] [<a href="javascript:;">undo</a>]') %>
+        `<%= html('<span>MD5 filtered.</span> [<a href="javascript:;">show</a>] [<a href="javascript:;">undo</a>]') %>`
       notice = Filter.quickFilterMD5.notice = new Notice 'info', msg, undefined, ->
         delete Filter.quickFilterMD5.notice
       notice.filters = [filter]

src/Filtering/ThreadHiding.coffee

@@ -139,7 +139,7 @@ ThreadHiding =
     a = $.el 'a',
       className: "#{type}-thread-button"
       href:      'javascript:;'
-    $.extend a, <%= html('<span class="fa fa-?{type === "hide"}{minus}{plus}-square"></span>') %>
+    $.extend a, `<%= html('<span class="fa fa-?{type === "hide"}{minus}{plus}-square"></span>') %>`
     a.dataset.fullID = thread.fullID
     $.on a, 'click', ThreadHiding.toggle
     a

src/General/Header.coffee

@@ -11,7 +11,7 @@ Header =
 
     menuButton = $.el 'span',
       className: 'menu-button'
-    $.extend menuButton, <%= html('<i></i>') %>
+    $.extend menuButton, `<%= html('<i></i>') %>`
 
     box = UI.checkbox
 
@@ -142,7 +142,7 @@ Header =
   setBoardList: ->
     Header.boardList = boardList = $.el 'span',
       id: 'board-list'
-    $.extend boardList, <%= html(
+    $.extend boardList, `<%= html(
       '<span id="custom-board-list"></span>' +
       '<span id="full-board-list" hidden>' +
         '<span class="hide-board-list-container brackets-wrap">' +
@@ -151,7 +151,7 @@ Header =
         ' ' +
         '<span class="boardList"></span>' +
       '</span>'
-    ) %>
+    ) %>`
 
     btn = $('.hide-board-list-button', boardList)
     $.on btn, 'click', Header.toggleBoardList
@@ -547,11 +547,11 @@ Header =
         return
 
     el = $.el 'span',
-      <%= html(
+      `<%= html(
         meta.name + ' needs your permission to show desktop notifications. ' +
         '[<a href="' + meta.faq + '#why-is-4chan-x-asking-for-permission-to-show-desktop-notifications" target="_blank">FAQ</a>]<br>' +
         '<button>Authorize</button> or <button>Disable</button>'
-      ) %>
+      ) %>`
     [authorize, disable] = $$ 'button', el
     $.on authorize, 'click', ->
       Notification.requestPermission (status) ->

src/General/Index.coffee

@@ -85,7 +85,7 @@ Index =
 
     # Navigation links at top of index
     @navLinks = $.el 'div', className: 'navLinks json-index'
-    $.extend @navLinks, <%= readHTML('NavLinks.html') %>
+    $.extend @navLinks, `<%= readHTML('NavLinks.html') %>`
     $('.cataloglink a', @navLinks).href = CatalogLinks.catalog()
     $('.archlistlink', @navLinks).hidden = true unless BoardConfig.isArchived(g.BOARD.ID)
     $.on $('#index-last-refresh a', @navLinks), 'click', @cb.refreshFront
@@ -134,7 +134,7 @@ Index =
 
     # Page list
     @pagelist = $.el 'div', className: 'pagelist json-index'
-    $.extend @pagelist, <%= readHTML('PageList.html') %>
+    $.extend @pagelist, `<%= readHTML('PageList.html') %>`
     $('.cataloglink a', @pagelist).href = CatalogLinks.catalog()
     $.on @pagelist, 'click', @cb.pageNav
 
@@ -206,7 +206,7 @@ Index =
         el: $.el 'a',
           href:      'javascript:;'
           className: 'has-shortcut-text'
-        , <%= html('<span></span><span class="shortcut-text">Shift+click</span>') %>
+        , `<%= html('<span></span><span class="shortcut-text">Shift+click</span>') %>`
         order: 20
         open: ({thread}) ->
           return false if Conf['Index Mode'] isnt 'catalog'

src/General/Settings.coffee

@@ -44,7 +44,7 @@ Settings =
     Settings.dialog = dialog = $.el 'div',
       id:        'overlay'
     ,
-      <%= readHTML('Settings.html') %>
+      `<%= readHTML('Settings.html') %>`
 
     $.on $('.export', dialog), 'click',  Settings.export
     $.on $('.import', dialog), 'click',  Settings.import
@@ -112,16 +112,16 @@ Settings =
       $.onExists doc, '.adg-rects > .desktop', (ad) -> $.onExists ad, 'iframe', ->
         url = Redirect.to 'thread', {boardID: 'qa', threadID: 362590}
         cb $.el 'li',
-          <%= html(
+          `<%= html(
             'To protect yourself from <a href="${url}" target="_blank">malicious ads</a>,' +
             ' you should <a href="https://github.com/gorhill/uBlock#ublock-origin" target="_blank">block ads</a> on 4chan.'
-          ) %>
+          ) %>`
 
   main: (section) ->
     warnings = $.el 'fieldset',
       hidden: true
     ,
-      <%= html('<legend>Warnings</legend><ul></ul>') %>
+      `<%= html('<legend>Warnings</legend><ul></ul>') %>`
     addWarning = (item) ->
       $.add $('ul', warnings), item
       warnings.hidden = false
@@ -136,7 +136,7 @@ Settings =
       for key, arr of obj when arr instanceof Array
         description = arr[1]
         div = $.el 'div',
-          <%= html('<label><input type="checkbox" name="${key}">${key}</label><span class="description">: ${description}</span>') %>
+          `<%= html('<label><input type="checkbox" name="${key}">${key}</label><span class="description">: ${description}</span>') %>`
         div.dataset.name = key
         input = $ 'input', div
         $.on input, 'change', $.cb.checked
@@ -154,11 +154,11 @@ Settings =
 
     for keyFS, obj of Config.main
       fs = $.el 'fieldset',
-        <%= html('<legend>${keyFS}</legend>') %>
+        `<%= html('<legend>${keyFS}</legend>') %>`
       addCheckboxes fs, obj
       if keyFS is 'Posting and Captchas'
         $.add fs, $.el 'p',
-          <%= html('For more info on captcha options and issues, see the <a href="' + meta.captchaFAQ + '" target="_blank">captcha FAQ</a>.') %>
+          `<%= html('For more info on captcha options and issues, see the <a href="' + meta.captchaFAQ + '" target="_blank">captcha FAQ</a>.') %>`
       $.add section, fs
     addCheckboxes $('div[data-name="JSON Index"] > .suboption-list', section), Config.Index
 
@@ -175,7 +175,7 @@ Settings =
       return
 
     div = $.el 'div',
-      <%= html('<button></button><span class="description">: Clear manually-hidden threads and posts on all boards. Reload the page to apply.') %>
+      `<%= html('<button></button><span class="description">: Clear manually-hidden threads and posts on all boards. Reload the page to apply.') %>`
     button = $ 'button', div
     $.get {hiddenThreads: {}, hiddenPosts: {}}, ({hiddenThreads, hiddenPosts}) ->
       hiddenNum = 0
@@ -515,7 +515,7 @@ Settings =
           window.location.reload()
 
   filter: (section) ->
-    $.extend section, <%= readHTML('Filter-select.html') %>
+    $.extend section, `<%= readHTML('Filter-select.html') %>`
     select = $ 'select', section
     $.on select, 'change', Settings.selectFilter
     Settings.selectFilter.call select
@@ -534,12 +534,12 @@ Settings =
         $.add div, ta
       return
     filterTypes = Object.keys(Config.filter).filter((x) -> x isnt 'general').map (x, i) ->
-      <%= html('?{i}{,}<wbr>${x}') %>
-    $.extend div, <%= readHTML('Filter-guide.html') %>
+      `<%= html('?{i}{,}<wbr>${x}') %>`
+    $.extend div, `<%= readHTML('Filter-guide.html') %>`
     $('.warning', div).hidden = Conf['Filter']
 
   sauce: (section) ->
-    $.extend section, <%= readHTML('Sauce.html') %>
+    $.extend section, `<%= readHTML('Sauce.html') %>`
     $('.warning', section).hidden = Conf['Sauce']
     ta = $ 'textarea', section
     $.get 'sauces', Conf['sauces'], (item) ->
@@ -548,7 +548,7 @@ Settings =
     $.on ta, 'change', $.cb.value
 
   advanced: (section) ->
-    $.extend section, <%= readHTML('Advanced.html') %>
+    $.extend section, `<%= readHTML('Advanced.html') %>`
     warning.hidden = Conf[warning.dataset.feature] for warning in $$ '.warning', section
 
     inputs = {}
@@ -702,7 +702,7 @@ Settings =
         textContent: archive[1]
       }
 
-    $.extend td, <%= html('<select></select>') %>
+    $.extend td, `<%= html('<select></select>') %>`
     select = td.firstElementChild
     if not (select.disabled = length is 1)
       # XXX GM can't into datasets
@@ -790,15 +790,15 @@ Settings =
     $.cb.checked.call @
 
   keybinds: (section) ->
-    $.extend section, <%= readHTML('Keybinds.html') %>
+    $.extend section, `<%= readHTML('Keybinds.html') %>`
     $('.warning', section).hidden = Conf['Keybinds']
 
     tbody  = $ 'tbody', section
     items  = {}
     inputs = {}
     for key, arr of Config.hotkeys
       tr = $.el 'tr',
-        <%= html('<td>${arr[1]}</td><td><input class="field"></td>') %>
+        `<%= html('<td>${arr[1]}</td><td><input class="field"></td>') %>`
       input = $ 'input', tr
       input.name = key
       input.spellcheck = false

src/Images/Gallery.coffee

@@ -43,7 +43,7 @@ Gallery =
 
     nodes.el = dialog = $.el 'div',
       id: 'a-gallery'
-    $.extend dialog, <%= readHTML('Gallery.html') %>
+    $.extend dialog, `<%= readHTML('Gallery.html') %>`
 
     nodes[key] = $ value, dialog for key, value of {
       buttons: '.gal-buttons'
@@ -388,7 +388,7 @@ Gallery =
     createSubEntries: ->
       subEntries = (Gallery.menu.createSubEntry item for item in ['Hide Thumbnails', 'Fit Width', 'Fit Height', 'Stretch to Fit', 'Scroll to Post'])
 
-      delayLabel = $.el 'label', <%= html('Slide Delay: <input type="number" name="Slide Delay" min="0" step="any" class="field">') %>
+      delayLabel = $.el 'label', `<%= html('Slide Delay: <input type="number" name="Slide Delay" min="0" step="any" class="field">') %>`
       delayInput = delayLabel.firstElementChild
       delayInput.value = Gallery.delay
       $.on delayInput, 'change', Gallery.cb.setDelay

src/Images/ImageExpand.coffee

@@ -12,7 +12,7 @@ ImageExpand =
     Header.addShortcut 'expand-all', @EAI, 520
     $.on d, 'scroll visibilitychange', @cb.playVideos
     @videoControls = $.el 'span', className: 'video-controls'
-    $.extend @videoControls, <%= html(' <a href="javascript:;" title="You can also contract the video by dragging it to the left.">contract</a>') %>
+    $.extend @videoControls, `<%= html(' <a href="javascript:;" title="You can also contract the video by dragging it to the left.">contract</a>') %>`
 
     Callbacks.Post.push
       name: 'Image Expansion'

src/Images/ImageLoader.coffee

@@ -17,7 +17,7 @@ ImageLoader =
     return unless Conf['Image Prefetching'] and g.VIEW in ['index', 'thread']
 
     prefetch = $.el 'label',
-      <%= html('<input type="checkbox" name="prefetch"> Prefetch Images') %>
+      `<%= html('<input type="checkbox" name="prefetch"> Prefetch Images') %>`
 
     @el = prefetch.firstElementChild
     $.on @el, 'change', @toggle

src/Images/Metadata.coffee

@@ -15,7 +15,7 @@ Metadata =
           className: 'webm-title'
         el.dataset.index = i
         $.extend el,
-          <%= html('<a href="javascript:;"></a>') %>
+          `<%= html('<a href="javascript:;"></a>') %>`
         $.add file.text, [$.tn(' '), el]
       $.one el.lastElementChild, 'mouseover focus', Metadata.load if el.children.length is 1
     return

src/Images/Volume.coffee

@@ -29,7 +29,7 @@ Volume =
     volumeEntry = $.el 'label',
       title: 'Default volume for videos.'
     $.extend volumeEntry,
-      <%= html('<input name="Default Volume" type="range" min="0" max="1" step="0.01" value="${Conf["Default Volume"]}"> Volume') %>
+      `<%= html('<input name="Default Volume" type="range" min="0" max="1" step="0.01" value="${Conf["Default Volume"]}"> Volume') %>`
 
     @inputs =
       unmute: unmuteEntry.firstElementChild

src/Linkification/Embedding.coffee

@@ -6,7 +6,7 @@ Embedding =
 
     if Conf['Embedding'] and g.VIEW isnt 'archive'
       @dialog = UI.dialog 'embedding',
-        <%= readHTML('Embed.html') %>
+        `<%= readHTML('Embed.html') %>`
       @media = $ '#media-embed', @dialog
       $.one d, '4chanXInitFinished', @ready
       $.on  d, 'IndexRefreshInternal', ->
@@ -62,7 +62,7 @@ Embedding =
       className:   'embedder'
       href:        'javascript:;'
     ,
-      <%= html('(<span>un</span>embed)') %>
+      `<%= html('(<span>un</span>embed)') %>`
 
     embed.dataset[name] = value for name, value of {key, uid, options, href}
 
@@ -216,7 +216,7 @@ Embedding =
       regExp: /^[^?#]+\.(?:gif|png|jpg|jpeg|bmp)(?::\w+)?(?:[?#]|$)/i
       style: ''
       el: (a) ->
-        $.el 'div', <%= html('<a target="_blank" href="${a.dataset.href}"><img src="${a.dataset.href}" style="max-width: 80vw; max-height: 80vh;"></a>') %>
+        $.el 'div', `<%= html('<a target="_blank" href="${a.dataset.href}"><img src="${a.dataset.href}" style="max-width: 80vw; max-height: 80vh;"></a>') %>`
     ,
       key: 'video'
       regExp: /^[^?#]+\.(?:og[gv]|webm|mp4)(?:[?#]|$)/i

src/Menu/DeleteLink.coffee

@@ -93,7 +93,7 @@ DeleteLink =
 
     link.textContent = DeleteLink.linkText fileOnly
     if resDoc.title is '4chan - Banned' # Ban/warn check
-      el = $.el 'span', <%= html('You can&#039;t delete posts because you are <a href="//www.4chan.org/banned" target="_blank">banned</a>.') %>
+      el = $.el 'span', `<%= html('You can&#039;t delete posts because you are <a href="//www.4chan.org/banned" target="_blank">banned</a>.') %>`
       new Notice 'warning', el, 20
     else if msg = resDoc.getElementById 'errmsg' # error!
       new Notice 'warning', msg.textContent, 20

src/Menu/Menu.coffee

@@ -6,7 +6,7 @@ Menu =
       className: 'menu-button'
       href:      'javascript:;'
 
-    $.extend @button, <%= html('<i class="fa fa-angle-down"></i>') %>
+    $.extend @button, `<%= html('<i class="fa fa-angle-down"></i>') %>`
 
     @menu = new UI.Menu 'post'
     Callbacks.Post.push

src/Miscellaneous/FileInfo.coffee

@@ -29,35 +29,35 @@ FileInfo =
       output.push if c of FileInfo.formatters
         FileInfo.formatters[c].call post
       else
-        <%= html('${s}') %>
+        `<%= html('${s}') %>`
       ''
-    $.extend outputNode, <%= html('@{output}') %>
+    $.extend outputNode, `<%= html('@{output}') %>`
     for a in $$ '.download-button', outputNode
       $.on a, 'click', ImageCommon.download
     for a in $$ '.quick-filter-md5', outputNode
       $.on a, 'click', Filter.quickFilterMD5
     return
 
   formatters:
-    t: -> <%= html('${this.file.url.match(/[^\/]*$/)[0]}') %>
-    T: -> <%= html('<a href="${this.file.url}" target="_blank">&{FileInfo.formatters.t.call(this)}</a>') %>
-    l: -> <%= html('<a href="${this.file.url}" target="_blank">&{FileInfo.formatters.n.call(this)}</a>') %>
-    L: -> <%= html('<a href="${this.file.url}" target="_blank">&{FileInfo.formatters.N.call(this)}</a>') %>
+    t: -> `<%= html('${this.file.url.match(/[^\/]*$/)[0]}') %>`
+    T: -> `<%= html('<a href="${this.file.url}" target="_blank">&{FileInfo.formatters.t.call(this)}</a>') %>`
+    l: -> `<%= html('<a href="${this.file.url}" target="_blank">&{FileInfo.formatters.n.call(this)}</a>') %>`
+    L: -> `<%= html('<a href="${this.file.url}" target="_blank">&{FileInfo.formatters.N.call(this)}</a>') %>`
     n: ->
       fullname  = @file.name
       shortname = g.SITE.Build.shortFilename @file.name, @isReply
       if fullname is shortname
-        <%= html('${fullname}') %>
+        `<%= html('${fullname}') %>`
       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="fa fa-download download-button"></a>') %>
-    f: -> <%= html('<a href="javascript:;" class="fa fa-times quick-filter-md5"></a>') %>
-    p: -> <%= html('?{this.file.isSpoiler}{Spoiler, }') %>
-    s: -> <%= html('${this.file.size}') %>
-    B: -> <%= html('${Math.round(this.file.sizeInBytes)} Bytes') %>
-    K: -> <%= html('${Math.round(this.file.sizeInBytes/1024)} KB') %>
-    M: -> <%= html('${Math.round(this.file.sizeInBytes/1048576*100)/100} MB') %>
-    r: -> <%= html('${this.file.dimensions || "PDF"}') %>
-    g: -> <%= html('?{this.file.tag}{, ${this.file.tag}}{}') %>
-    '%': -> <%= html('%') %>
+        `<%= 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="fa fa-download download-button"></a>') %>`
+    f: -> `<%= html('<a href="javascript:;" class="fa fa-times quick-filter-md5"></a>') %>`
+    p: -> `<%= html('?{this.file.isSpoiler}{Spoiler, }') %>`
+    s: -> `<%= html('${this.file.size}') %>`
+    B: -> `<%= html('${Math.round(this.file.sizeInBytes)} Bytes') %>`
+    K: -> `<%= html('${Math.round(this.file.sizeInBytes/1024)} KB') %>`
+    M: -> `<%= html('${Math.round(this.file.sizeInBytes/1048576*100)/100} MB') %>`
+    r: -> `<%= html('${this.file.dimensions || "PDF"}') %>`
+    g: -> `<%= html('?{this.file.tag}{, ${this.file.tag}}{}') %>`
+    '%': -> `<%= html('%') %>`

src/Miscellaneous/ModContact.coffee

@@ -16,19 +16,19 @@ ModContact =
       $.add @nodes.post, moveNote
 
   template: (capcode) ->
-    <%= html(
+    `<%= html(
       '<a href="https://www.4chan.org/feedback" target="_blank">feedback</a>&{ModContact.specific[capcode]()}'
-    ) %>
+    ) %>`
 
   specific:
-    Mod:       -> <%= html(' <a href="https://www.4chan-x.net/4chan-irc.html" target="_blank">IRC</a>') %>
+    Mod:       -> `<%= html(' <a href="https://www.4chan-x.net/4chan-irc.html" target="_blank">IRC</a>') %>`
     Manager:   -> ModContact.specific.Mod()
-    Developer: -> <%= html(' <a href="https://github.com/4chan" target="_blank">github</a>') %>
-    Admin:     -> <%= html(' <a href="https://twitter.com/hiroyuki_ni" target="_blank">twitter</a>') %>
+    Developer: -> `<%= html(' <a href="https://github.com/4chan" target="_blank">github</a>') %>`
+    Admin:     -> `<%= html(' <a href="https://twitter.com/hiroyuki_ni" target="_blank">twitter</a>') %>`
 
   moveNote:
-    qa: <%= html(
+    qa: `<%= html(
       'Moving a thread to /qa/ does not imply mods will read it. If you wish to contact mods, use ' +
       '<a href="https://www.4chan.org/feedback" target="_blank">feedback</a><span class="invisible"> (https://www.4chan.org/feedback)</span> or ' +
       '<a href="https://www.4chan-x.net/4chan-irc.html" target="_blank">IRC</a><span class="invisible"> (https://www.4chan-x.net/4chan-irc.html)</span>.'
-    ) %>
+    ) %>`

src/Miscellaneous/PostJumper.coffee

@@ -56,7 +56,7 @@ PostJumper =
     classNext = 'next'
     span = $.el 'span',
       className: 'postJumper'
-    $.extend span, <%= html('<a href="javascript:;" class="${classPrev}">${charPrev}</a><a href="javascript:;" class="${classNext}">${charNext}</a>') %>
+    $.extend span, `<%= html('<a href="javascript:;" class="${classPrev}">${charPrev}</a><a href="javascript:;" class="${classNext}">${charNext}</a>') %>`
     span
 
   scroll: (fromJumper, toJumper) ->