Develop Reference

Using Material Icons in CKEDITOR

This is kind of an academic question because I've all but given up, but maybe we can learn a few things about CKEditor5 by trying to solve it!
I'm using a pretty bare-bones installation of CKEditor from https://ckeditor.com/ckeditor-5/online-builder with just some basic styling features.
My use case is pretty basic but my users need to enter certain special characters and I want to include support for material icons (from Google)
Something along these lines
If you're not familiar with material icons, they use a special font and some CSS wizardry to display icons similar to font awesome. They are here: https://fonts.google.com/icons?icon.set=Material+Icons they come in two varieties, icons and symbols which are very similar but we're concerned with icons in this case.
The syntax for the icons is
<span class="material-icons-outlined">
emoji_emotions
</span>
and it uses some font wizardry to make that turn into something like
You can also use a single entity such as  to accomplish the same behaviour and it's the option I've opted for in my implementation.
My chosen markup is
<material-icon class='material-icons'></material-icon>
A little redundant I know but I wanted to separate them from just spans.
Anyway, out of the box CKEditor doesn't allow pasting unknown elements and strips it down to just the html entity so you need to add a new schema, something like this
export default function schemaCustomization(editor) {
// Extend schema with custom HTML elements.
const dataFilter = editor.plugins.get('DataFilter');
const dataSchema = editor.plugins.get('DataSchema');
// Inline element
dataSchema.registerInlineElement({
view: 'material-icon',
model: 'materialIcon',
modelSchema: {
inheritAllFrom: '$inlineBlock'
},
attributeProperties: {
copyOnEnter: true,
},
});
// // Custom elements need to be registered using direct API instead of config.
dataFilter.allowElement('material-icon');
dataFilter.allowAttributes({ name: 'element-inline', classes: /^.*$/ });
}
This will register the element with the editor and allow it to be accepted into the document.
Then you add it to your options, alongside the previous htmlSupport plugin and you're good to go!
options = {
toolbar: {
items: [],
},
htmlSupport: {
allow: [
{
name: 'material-icon',
classes: /^.*$/,
},
],
disallow: [
/* HTML features to disallow */
],
},
extraPlugins: [schemaCustomization],
removePlugins: []
};
A lot of documentation I used comes from here: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/schema.html
However, there's one problem!!
The element remains editable and if someone clicks inside the material-icon tag and starts entering text, it gets messed up.
I need a way to make the material-icon element be somehow self-contained or atomic and only allow a single character inside.
I've been playing around with all kinds of settings but I'm not sure which are the correct ones and where they're even meant to go.
For now I've switched to just using unicode emoji but they really don't look as nice.
I've tried a lot of the settings and options from https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/schema.html and I think there are multiple ways to register these sorts of elements.
I was expecting it to work somehow but the ability to edit within the tags and break the layout is an unintended side effect.
Does anyone have any experience with the latest version of CKEditor and performing these sorts of low-level mechanics? Any help is appreciated!

Language translation by PHP and ajax plugin

Hi every one I have been looking for a language translator in drop down with country icons, I dont know if I can use google or not ? but I found really good http://www.jqueryscript.net/text/jQuery-Plugin-To-Translate-Webpage-In-A-Given-Language-localizationTool.html
So I have decided to use this but I am having problem with the multiple languages.
Could any one help me with adding more languages into the drop down .
Here is the code
<script>
$('#selectLanguageDropdown').localizationTool({
'defaultLanguage' : 'en_GB',
'ignoreUnmatchedSelectors': false,
'showFlag' : true,
'showLanguage': true,
'showCountry': true,
'labelTemplate': '{{country}} {{(language)}}',
'languages' : {
},
'strings' : {},
'onLanguageSelected' : function (/* je*/) { return true; }
});
</script>
I just need to add more languages to the drop down, I could not understand the documentation at the website please help/suggest me for language translator with icon drop down and which takes less space .
Thank you.
The main problem in this plugin is that i have to write the content in other language to convert the text. i want to translate the whole website, how can i write everything in all languages. can any one suggest me something like google translator in this design ???

HTML carousel/slide show on apples website

I found this carousel on apples website where it has the 3 radio presenters, and was wondering how i could create this effect or if there is a carousel like this available.
I did some research and found a similar stackoverflow question which links to slick.js so I am wondering if apple use slick and have customized it to do this or they found a new carousel that makes this effect occur.
From inspecting the carousel i found the class zine-gallery-content but searching that didn't help.
Does anyone know how i can make this carousel? It is also responsive.

It looks custom to me. They've called it 'ac-gallery' within their code. They tend to prepend things with ac-, ac-analytics, etc.
I'll let you know how I figured this out. I inspected the slider and was looking for a wrapper class or ID with the words 'gallery', 'carousel', 'slider' or something similar. I noticed the carousel contained the ID #zine-gallery. I then looked for one of their javascript files that looked like the primary file where most of the code is compiled to. I found a file called main.built.js. I opened this file and searched for zine-gallery, which did exist. I then opened my web inspector, opened the "Sources" tab and found main.built.js. I then clicked the "Pretty Print" button (The {} icon next to the line and column number. This formats the uglified javascript and allows you to read it more easily.
The following leads me to believe it's custom:
this.gallery = B.create({
id: this.galleryId,
el: this.wrapper,
section: this,
model: this.slides,
triggerSelector: this.triggerSelector,
trigger: {
events: ["mouseover", "click"]
}
})
Usually a plugin would include it's name in the creation process. Also, right below the following gallery methods are defined:
C._removeActiveStates,
C._animateNewStation,
C._blendToNewBackgroundColor,
C.activate,
C.deactivate,
C.animateIn,
C.onRequestAnimationFrame,
C.onScroll,
C.onResize, etc.

Timeline JS Transparent Background

I spent hours and hours working both with local files, CDNs, etc etc. And the only way I got the timeline showing was using the embeded js . For more information on the JS I am talking about: https://github.com/NUKnightLab/TimelineJS#config-options
So my code looks like something like this:
HTML
<div id="timeline"></div>
<script src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
JS
createStoryJS({
type: 'timeline',
width: '100%',
height: '600',
source: 'my json or excel,
embed_id: 'timeline' // ID of the DIV you want to load the timeline into
});
Once again, to gain more power over the css and js files I DID try downloading the css and js files manually and could not make them to appear.
Now first of, I think I should still be able to override the css settings even though its a CDN (Or can I not?), I spent hours trying to find the right class and ID to make the background transparent (Or at least the color of my choice).
I also tried this document but alot of stuff used in it where outdated and caused issues with jQuery and so on: http://tutorialzine.com/2012/04/timeline-portfolio/
I would really really appreciate it if someone could find this mysterious class/ID so that I can customize this thing. Thanks In advance.
EDIT
To make this easier to understand, Have this codepen for example: http://codepen.io/salmanjalali87/pen/oXMjmy
I got the color working and I can change the color (kind of). But I cant put an image there. Anyone know why?

I got lost on your post, very confused, here is the code just to make it work
(1) - you place this in the < head>
<script src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
(2) - you put your div inside html
<div id="timeline"></div>
(3) - you place the createStoryJS({});
Right after the storyjs-embed.js library call inside a script tag and inside a document ready
$( document ).ready(function() {
createStoryJS({
type: 'timeline',
width: '100%',
height: '600',
source: 'https://docs.google.com/spreadsheets/d/1oZNs-5eEMGbrIup1ZSj3Ovga-8wF2bVdNTBAiXFl08M/edit#gid=0',
embed_id: 'timeline' // ID of the DIV you want to load the timeline into
});
});

Jgrowl like notification using dojo

Is there anything in Dojo like the jquery jgrowl.

There exists dojox.widget.Toaster. (Test-File & API Documentation)
You need to create a new channel with the Toaster, for example.
var errors = new dojox.widget.Toaster({
messageTopic: '/app/error',
positionDirection: 'br-up',
duration: 5000
});
After this you can publish with dojo.publish to the channel /app/error
dojo.publish('/app/error', ["Error sending data"]);
Don't forget to load the Toaster CSS dojox/widget/Toaster/Toaster.css
If you want it black, you need to change the CSS. I created an example with two Toasters, one displays new messages in the right upper corner, the other in the right bottom corner. And i made them black.
JS Fiddle

Check out this github project.
I was looking for the same thing, but with a bit more features than the Toaster widget provided. So I started the dGrowl project.