REFACTOR: Remove `.erb` from emoji-picker
We can't use erb in ember-cli, and it seems the emoji groups rarely change anyway. This commit migrates the ERB to pre-rendered javascript that is updated via the `rake javascript:update_constants` task.
This commit is contained in:
Robin Ward
parent
9ec0359022
commit
059e9cb1d2
|
|
@ -0,0 +1,30 @@
|
|||
{{!-- DO NOT EDIT THIS FILE!!! --}}
|
||||
{{!-- Update it by running `rake javascript:update_constants` --}}
|
||||
|
||||
<button type="button" data-section="smileys_&_emotion" {{action onCategorySelection "smileys_&_emotion"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":grinning:"}}
|
||||
</button>
|
||||
<button type="button" data-section="people_&_body" {{action onCategorySelection "people_&_body"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":wave:"}}
|
||||
</button>
|
||||
<button type="button" data-section="animals_&_nature" {{action onCategorySelection "animals_&_nature"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":evergreen_tree:"}}
|
||||
</button>
|
||||
<button type="button" data-section="food_&_drink" {{action onCategorySelection "food_&_drink"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":hamburger:"}}
|
||||
</button>
|
||||
<button type="button" data-section="travel_&_places" {{action onCategorySelection "travel_&_places"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":airplane:"}}
|
||||
</button>
|
||||
<button type="button" data-section="activities" {{action onCategorySelection "activities"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":soccer:"}}
|
||||
</button>
|
||||
<button type="button" data-section="objects" {{action onCategorySelection "objects"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":eyeglasses:"}}
|
||||
</button>
|
||||
<button type="button" data-section="symbols" {{action onCategorySelection "symbols"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":white_check_mark:"}}
|
||||
</button>
|
||||
<button type="button" data-section="flags" {{action onCategorySelection "flags"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":checkered_flag:"}}
|
||||
</button>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,20 +1,16 @@
|
|||
{{#if isActive}}
|
||||
<div class="emoji-picker {{if @isActive 'opened'}}">
|
||||
<div class="emoji-picker {{if @isActive "opened"}}">
|
||||
<div class="emoji-picker-category-buttons">
|
||||
{{#if recentEmojis.length}}
|
||||
<button data-section="recent" {{action "onCategorySelection" "recent"}} class="btn btn-default category-button emoji">
|
||||
<button type="button" data-section="recent" {{action "onCategorySelection" "recent"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":star:"}}
|
||||
</button>
|
||||
{{/if}}
|
||||
|
||||
<% JSON.parse(File.read("lib/emoji/groups.json")).each.with_index do |group, group_index| %>
|
||||
<button data-section="<%= group["name"] %>" {{action "onCategorySelection" "<%= group["name"] %>"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":<%= group["tabicon"] %>:"}}
|
||||
</button>
|
||||
<% end %>
|
||||
{{emoji-group-buttons onCategorySelection=(action "onCategorySelection")}}
|
||||
|
||||
{{#each-in customEmojis as |group emojis|}}
|
||||
<button data-section={{concat "custom-" group}} {{action "onCategorySelection" (concat "custom-" group)}} class="btn btn-default category-button emoji">
|
||||
<button type="button" data-section={{concat "custom-" group}} {{action "onCategorySelection" (concat "custom-" group)}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji (concat ":" emojis.firstObject.code ":")}}
|
||||
</button>
|
||||
{{/each-in}}
|
||||
|
|
@ -35,18 +31,18 @@
|
|||
{{d-icon "search"}}
|
||||
</div>
|
||||
|
||||
<div class="emoji-picker-emoji-area" {{on "click" this.onEmojiSelection}} {{on "mouseover" this.onEmojiHover}}>
|
||||
<div class='results'></div>
|
||||
<div class="emoji-picker-emoji-area" role="button" {{on "click" this.onEmojiSelection}} {{on "mouseover" this.onEmojiHover}}>
|
||||
<div class="results"></div>
|
||||
|
||||
{{#conditional-loading-spinner condition=isLoading}}
|
||||
<div class="emojis-container">
|
||||
{{#if recentEmojis.length}}
|
||||
<div class='section recent' data-section='recent'>
|
||||
<div class='section-header'>
|
||||
<span class="title">{{i18n 'emoji_picker.recent'}}</span>
|
||||
<div class="section recent" data-section="recent">
|
||||
<div class="section-header">
|
||||
<span class="title">{{i18n "emoji_picker.recent"}}</span>
|
||||
{{d-button icon="trash-alt" action=(action "onClearRecents") class="trash-recent"}}
|
||||
</div>
|
||||
<div class='section-group'>
|
||||
<div class="section-group">
|
||||
{{#each recentEmojis as |emoji|}}
|
||||
{{replace-emoji (concat ":" emoji ":") (hash lazy=true)}}
|
||||
{{/each}}
|
||||
|
|
@ -54,30 +50,19 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
<% JSON.parse(File.read("lib/emoji/groups.json")).each.with_index do |group, group_index| %>
|
||||
<div class='section' data-section='<%= group["name"] %>'>
|
||||
<div class='section-header'>
|
||||
<span class="title">{{i18n 'emoji_picker.<%= group["name"] %>'}}</span>
|
||||
</div>
|
||||
<div class='section-group'>
|
||||
<% group["icons"].each do |icon| %>
|
||||
{{replace-emoji ":<%= icon['name'] %>:" (hash lazy=true class="<%= "diversity" if icon["diversity"] %>")}}
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
{{emoji-group-sections}}
|
||||
|
||||
{{#each-in customEmojis as |group emojis|}}
|
||||
<div class='section' data-section='custom-{{group}}'>
|
||||
<div class='section-header'>
|
||||
<div class="section" data-section="custom-{{group}}">
|
||||
<div class="section-header">
|
||||
<span class="title">
|
||||
{{i18n (concat 'emoji_picker.' group)}}
|
||||
{{i18n (concat "emoji_picker." group)}}
|
||||
</span>
|
||||
</div>
|
||||
{{#if emojis.length}}
|
||||
<div class='section-group'>
|
||||
<div class="section-group">
|
||||
{{#each emojis as |emoji|}}
|
||||
<img title="{{emoji.code}}" width="20" height="20" loading="lazy" class="emoji" src="{{emoji.src}}">
|
||||
<img title={{emoji.code}} width="20" height="20" loading="lazy" class="emoji" src={{emoji.src}}>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -109,6 +94,6 @@
|
|||
</div>
|
||||
|
||||
{{#if site.mobileView}}
|
||||
<div class="emoji-picker-modal-overlay" {{on "click" this.onClose}}></div>
|
||||
<div role="button" class="emoji-picker-modal-overlay" {{on "click" this.onClose}}></div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
|
@ -16,6 +16,24 @@ def library_src
|
|||
"#{Rails.root}/node_modules"
|
||||
end
|
||||
|
||||
def html_for_section(group)
|
||||
icons = group["icons"].map do |icon|
|
||||
class_attr = icon["diversity"] ? " class=\"diversity\"" : ""
|
||||
" {{replace-emoji \":#{icon['name']}:\" (hash lazy=true#{class_attr})}}"
|
||||
end
|
||||
|
||||
<<~SECTION
|
||||
<div class="section" data-section="#{group["name"]}">
|
||||
<div class="section-header">
|
||||
<span class="title">{{i18n "emoji_picker.#{group["name"]}"}}</span>
|
||||
</div>
|
||||
<div class="section-group">
|
||||
#{icons.join("\n").strip}
|
||||
</div>
|
||||
</div>
|
||||
SECTION
|
||||
end
|
||||
|
||||
def write_template(path, task_name, template)
|
||||
header = <<~HEADER
|
||||
// DO NOT EDIT THIS FILE!!!
|
||||
|
|
@ -31,6 +49,18 @@ def write_template(path, task_name, template)
|
|||
puts "#{basename} prettified"
|
||||
end
|
||||
|
||||
def write_hbs_template(path, task_name, template)
|
||||
header = <<~HEADER
|
||||
{{!-- DO NOT EDIT THIS FILE!!! --}}
|
||||
{{!-- Update it by running `rake javascript:#{task_name}` --}}
|
||||
HEADER
|
||||
|
||||
basename = File.basename(path)
|
||||
output_path = "#{Rails.root}/app/assets/javascripts/#{path}"
|
||||
File.write(output_path, "#{header}\n#{template}")
|
||||
puts "#{basename} created"
|
||||
end
|
||||
|
||||
def dependencies
|
||||
[
|
||||
{
|
||||
|
|
@ -188,6 +218,23 @@ task 'javascript:update_constants' => :environment do
|
|||
write_template("pretty-text/addon/emoji/version.js", task_name, <<~JS)
|
||||
export const IMAGE_VERSION = "#{Emoji::EMOJI_VERSION}";
|
||||
JS
|
||||
|
||||
groups_json = JSON.parse(File.read("lib/emoji/groups.json"))
|
||||
|
||||
emoji_buttons = groups_json.map do |group|
|
||||
<<~BUTTON
|
||||
<button type="button" data-section="#{group["name"]}" {{action onCategorySelection "#{group["name"]}"}} class="btn btn-default category-button emoji">
|
||||
{{replace-emoji ":#{group["tabicon"]}:"}}
|
||||
</button>
|
||||
BUTTON
|
||||
end
|
||||
|
||||
emoji_sections = groups_json.map { |group| html_for_section(group) }
|
||||
|
||||
components_dir = "discourse/app/templates/components"
|
||||
write_hbs_template("#{components_dir}/emoji-group-buttons.hbs", task_name, emoji_buttons.join)
|
||||
write_hbs_template("#{components_dir}/emoji-group-sections.hbs", task_name, emoji_sections.join)
|
||||
|
||||
end
|
||||
|
||||
task 'javascript:update' => 'clean_up' do
|
||||
|
|
|
|||
Loading…
Reference in New Issue