Skip to content

Instantly share code, notes, and snippets.

@davist11
Created September 23, 2020 19:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davist11/d0630e8e91c8ffa5fd6ebdafd835236b to your computer and use it in GitHub Desktop.
Save davist11/d0630e8e91c8ffa5fd6ebdafd835236b to your computer and use it in GitHub Desktop.
Redactor Language Plugin
(function ($R) {
$R.add("plugin", "language", {
translations: {
en: {
language: "Change Language",
},
},
init: function (app) {
this.app = app;
this.opts = app.opts;
this.lang = app.lang;
this.block = app.block;
this.toolbar = app.toolbar;
this.options = this.opts.languages;
this.currentLangAttr;
},
start: function () {
var dropdown = {};
for (var key in this.options) {
var value = this.options[key];
dropdown[key] = {
title: value,
api: "plugin.language.set",
args: key,
};
}
var $button = this.toolbar.addButton("language", {
title: this.lang.get("language"),
});
$button.setIcon('<i class="re-icon-specialcharacters"></i>');
$button.setDropdown(dropdown);
},
set: function (lang) {
if (!this.currentLangAttr) {
this.addAttribute(lang);
this.currentLangAttr = lang;
} else if (this.currentLangAttr === lang) {
this.removeAttribute();
this.currentLangAttr = null;
} else {
this.removeAttribute();
this.addAttribute(lang);
this.currentLangAttr = lang;
}
},
addAttribute: function (lang) {
var args = {
attr: {
lang: lang,
},
};
this.block.set(args);
},
removeAttribute: function () {
var args = {
attr: {
lang: this.currentLangAttr,
},
};
this.block.toggle(args);
},
});
})(Redactor);
{
"buttons": [
"html",
"formatting",
"bold",
"italic",
"unorderedlist",
"orderedlist",
"link",
"image",
"video"
],
"plugins": [
"fullscreen",
"video",
"language"
],
"toolbarFixed": true,
"languages": {
"en-US": "English (US)",
"en-GB": "English (GB)"
}
}
@peytonchance
Copy link

peytonchance commented Sep 23, 2020

The redactor docs make it seem like fontawesome support is built in, is that true? https://fontawesome.com/v4.7.0/icon/language could be a good fit for the icon.

@davist11
Copy link
Author

The font awesome CSS is not included

@davist11
Copy link
Author

We could potentially submit a PR to the Craft redactor plugin to include classes for some of their other icons.

image

@peytonchance
Copy link

If that were possible, I think the globe would be the most logical fit. If not, the Omega from your screenshot in Slack works fine enough.

How could I test this out? Maybe on Viget.com staging?

As you know, urgency on this is very low, so no need to respond right away.

@davist11
Copy link
Author

How could I test this out?

Spinning up a craft site locally and adding the plugin is likely the easiest method for testing. Not really a whole lot to test though...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment