-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update for Flarum beta 14 and dynamically load library
- Loading branch information
1 parent
9b9761a
commit 91737d5
Showing
16 changed files
with
1,229 additions
and
1,568 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,6 @@ | ||
| MIT License | ||
|
|
||
| Copyright (c) 2017-2019 Clark Winkelmann | ||
| Copyright (c) 2015-2017 Andrey Izman <[email protected]> (copyright owner of the emojionearea code in the js/dist folder) | ||
| Copyright (c) 2017-2020 Clark Winkelmann | ||
|
|
||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1 @@ | ||
| window.emojione = require('emojione'); | ||
| require('emojionearea'); | ||
|
|
||
| export * from './src/forum'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import app from 'flarum/app'; | ||
| import EmojioneAreaSettingsModal from "./modals/EmojioneAreaSettingsModal"; | ||
| import EmojioneAreaSettingsModal from './modals/EmojioneAreaSettingsModal'; | ||
|
|
||
| app.initializers.add('clarkwinkelmann-emojionearea', () => { | ||
| app.extensionSettings['clarkwinkelmann-emojionearea'] = () => app.modal.show(new EmojioneAreaSettingsModal()); | ||
| app.extensionSettings['clarkwinkelmann-emojionearea'] = () => app.modal.show(EmojioneAreaSettingsModal); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,83 +1,128 @@ | ||
| import {extend} from 'flarum/extend'; | ||
| import app from 'flarum/app'; | ||
| import Button from 'flarum/components/Button'; | ||
| import ComposerBody from 'flarum/components/ComposerBody'; | ||
| import TextEditor from 'flarum/components/TextEditor'; | ||
|
|
||
| /* global $ */ | ||
| /* global m, $ */ | ||
|
|
||
| const translationPrefix = 'clarkwinkelmann-emojionearea.forum.'; | ||
|
|
||
| let emojioneAreaLoaded = false; | ||
|
|
||
| function loadEmojioneArea() { | ||
| if (emojioneAreaLoaded) { | ||
| return Promise.resolve(); | ||
| } | ||
|
|
||
| emojioneAreaLoaded = true; | ||
|
|
||
| return new Promise(resolve => { | ||
| const style = document.createElement('link'); | ||
| style.rel = 'stylesheet'; | ||
| style.crossOrigin = 'anonymous'; | ||
| style.integrity = 'sha256-LKawN9UgfpZuYSE2HiCxxDxDgLOVDx2R4ogilBI52oc='; | ||
| style.href = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/emojionearea.min.css'; | ||
| document.head.appendChild(style); | ||
|
|
||
| const script = document.createElement('script'); | ||
| script.crossOrigin = 'anonymous'; | ||
| script.integrity = 'sha256-ImIFrmJd7ymGlVw2MbtI96BNPW4NfcKqM3d1Go665Ig='; | ||
| script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/emojionearea.min.js'; | ||
| script.onload = resolve; | ||
| document.body.appendChild(script); | ||
| }); | ||
| } | ||
|
|
||
| app.initializers.add('clarkwinkelmann-emojionearea', () => { | ||
| extend(ComposerBody.prototype, 'config', function (element, isInitialized, context) { | ||
| if (isInitialized) return; | ||
| TextEditor.prototype.emojioneAreaClickedOutside = function (event) { | ||
| // If a click is triggered before the picker is ready, do not do anything | ||
| if (!this.emojioneArea || !this.emojioneArea.isReady) { | ||
| return; | ||
| } | ||
|
|
||
| const $container = $('<div class="ComposerBody-emojioneareaContainer"/>'); | ||
| this.$('.TextEditor-controls').before($container); | ||
| const $target = $(event.target); | ||
|
|
||
| const area = $('<div />').emojioneArea({ | ||
| standalone: true, // Popup only mode | ||
| search: app.forum.attribute('emojioneAreaEnableSearch'), | ||
| searchPlaceholder: app.translator.trans(translationPrefix + 'search_placeholder'), | ||
| buttonTitle: app.translator.trans(translationPrefix + 'picker_button'), | ||
| recentEmojis: app.forum.attribute('emojioneAreaEnableRecent'), | ||
| filtersPosition: app.forum.attribute('emojioneAreaFiltersPositionBottom') ? 'bottom' : 'top', | ||
| searchPosition: app.forum.attribute('emojioneAreaSearchPositionBottom') ? 'bottom' : 'top', | ||
| container: $container, | ||
| tones: app.forum.attribute('emojioneAreaEnableTones'), | ||
| autocomplete: false, // Do not try to provide autocomplete - will prevent the textcomplete lib from being included | ||
| sprite: false, // Undocumented setting, but disabling it removes an unnecessary CSS file load | ||
| events: { // Listen for clicks to sync with Flarum editor | ||
| emojibtn_click: () => { | ||
| // To get the unicode value, we need to pull it from the invisible insert area | ||
| this.editor.insertAtCursor(this.editor.emojioneArea.getText()); | ||
| }, | ||
| }, | ||
| }); | ||
| // If we clicked on the popup or the editor button we don't do anything | ||
| if ($target.is('.emojionearea') || $target.parents('.emojionearea').length || $target.parents('.Button-emojionearea').length) { | ||
| return; | ||
| } | ||
|
|
||
| this.emojioneArea.hidePicker(); | ||
| } | ||
|
|
||
| this.editor.emojioneArea = area.data('emojioneArea'); | ||
| TextEditor.prototype.configureEmojioneArea = function () { | ||
| if (this.emojioneArea) { | ||
| return Promise.resolve(); | ||
| } | ||
|
|
||
| const clickedOutside = event => { | ||
| // If a click is triggered before the picker is ready, do not do anything | ||
| if (!this.editor.emojioneArea.isReady) { | ||
| return; | ||
| } | ||
| const $container = $('<div class="ComposerBody-emojioneareaContainer"/>'); | ||
| this.$('.TextEditor-controls').before($container); | ||
|
|
||
| const $target = $(event.target); | ||
| return new Promise(resolve => { | ||
| const area = $('<div />').emojioneArea({ | ||
| standalone: true, // Popup only mode | ||
| search: app.forum.attribute('emojioneAreaEnableSearch'), | ||
| searchPlaceholder: app.translator.trans(translationPrefix + 'search_placeholder'), | ||
| buttonTitle: app.translator.trans(translationPrefix + 'picker_button'), | ||
| recentEmojis: app.forum.attribute('emojioneAreaEnableRecent'), | ||
| filtersPosition: app.forum.attribute('emojioneAreaFiltersPositionBottom') ? 'bottom' : 'top', | ||
| searchPosition: app.forum.attribute('emojioneAreaSearchPositionBottom') ? 'bottom' : 'top', | ||
| container: $container, | ||
| tones: app.forum.attribute('emojioneAreaEnableTones'), | ||
| autocomplete: false, // Do not try to provide autocomplete - will prevent the textcomplete lib from being included | ||
| sprite: false, // Undocumented setting, but disabling it removes an unnecessary CSS file load | ||
| events: { // Listen for clicks to sync with Flarum editor | ||
| emojibtn_click: () => { | ||
| // To get the unicode value, we need to pull it from the invisible insert area | ||
| this.attrs.composer.editor.insertAtCursor(this.emojioneArea.getText()); | ||
| }, | ||
| ready: resolve, | ||
| }, | ||
| }); | ||
|
|
||
| // If we clicked on the popup or the editor button we don't do anything | ||
| if ($target.is('.emojionearea') || $target.parents('.emojionearea').length || $target.parents('.Button-emojionearea').length) { | ||
| return; | ||
| } | ||
| this.emojioneArea = area.data('emojioneArea'); | ||
| }); | ||
| } | ||
|
|
||
| this.editor.emojioneArea.hidePicker(); | ||
| }; | ||
| extend(TextEditor.prototype, 'oncreate', function () { | ||
| this.emojioneArea = null; | ||
| this.emojioneAreaLoading = false; | ||
|
|
||
| document.addEventListener('click', clickedOutside); | ||
| document.addEventListener('click', this.emojioneAreaClickedOutside.bind(this)); | ||
| }); | ||
|
|
||
| const previousUnload = context.onunload; | ||
| context.onunload = () => { | ||
| if (previousUnload) { | ||
| previousUnload(); | ||
| } | ||
| document.removeEventListener('click', clickedOutside); | ||
| }; | ||
| extend(TextEditor.prototype, 'onremove', function () { | ||
| document.removeEventListener('click', this.emojioneAreaClickedOutside); | ||
| }); | ||
|
|
||
| extend(TextEditor.prototype, 'toolbarItems', function (items) { | ||
| // Not using the TextEditorButton component because the tooltip apparently won't go away once the picker is open | ||
| items.add('clarkwinkelmann-emojionearea', Button.component({ | ||
| onclick: () => { | ||
| if (this.emojioneArea.button.is('.active')) { | ||
| // Prevent double-clicks while the library is loading | ||
| if (this.emojioneAreaLoading) { | ||
| return; | ||
| } | ||
|
|
||
| if (this.emojioneArea && this.emojioneArea.button.is('.active')) { | ||
| this.emojioneArea.hidePicker(); | ||
| } else { | ||
| const position = this.$('.Button-emojionearea').position(); | ||
| this.$('.emojionearea-picker').css('left', position.left - 290); | ||
| this.emojioneArea.showPicker(); | ||
| this.emojioneAreaLoading = true; | ||
|
|
||
| loadEmojioneArea().then(() => { | ||
| this.configureEmojioneArea().then(() => { | ||
| const position = this.$('.Button-emojionearea').position(); | ||
| this.$('.emojionearea-picker').css('left', position.left - 290); | ||
| this.emojioneArea.showPicker(); | ||
|
|
||
| this.emojioneAreaLoading = false; | ||
| m.redraw(); | ||
| }); | ||
| }); | ||
| } | ||
| }, | ||
| className: 'Button Button--icon Button--link Button-emojionearea', | ||
| icon: 'far fa-smile-beam', | ||
| icon: this.emojioneAreaLoading ? 'fas fa-spinner fa-pulse' : 'far fa-smile-beam', | ||
| title: app.translator.trans(translationPrefix + 'picker_button'), | ||
| })); | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1 @@ | ||
| const flarumConfig = require('flarum-webpack-config'); | ||
| const CopyPlugin = require('copy-webpack-plugin'); | ||
|
|
||
| let config = flarumConfig(); | ||
|
|
||
| config.plugins = config.plugins || []; | ||
| config.plugins.push(new CopyPlugin([ | ||
| // We need to copy the CSS file so it can be bundled with our extension | ||
| // It seems we can't copy outside of the current folder so we put it in dist with the javascript | ||
| { | ||
| from: 'node_modules/emojionearea/dist/emojionearea.min.css', | ||
| to: 'emojionearea.min.css', | ||
| transform(content) { | ||
| // Remove these alpha rules as they can't be understood by the less parser | ||
| return content.toString().replace(/filter:alpha\([A-Za-z0-9=]+\);/g, ''); | ||
| }, | ||
| }, | ||
| ])); | ||
|
|
||
| module.exports = config; | ||
| module.exports = require('flarum-webpack-config')(); |
Oops, something went wrong.