Skip to content

Commit 3e16cb6

Browse files
ritz078ritz078
committed
refactor(template): removed template variable and returned the string directly
1 parent e604647 commit 3e16cb6

27 files changed

Lines changed: 255 additions & 300 deletions

‎dist/embed.min.js‎

Lines changed: 4 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/embed.js‎

Lines changed: 103 additions & 106 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/embed.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/embed.es6‎

Lines changed: 83 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,45 @@
1-
//The MIT License (MIT)
2-
//Copyright (c) 2015 Ritesh Kumar
3-
//
4-
//Permission is hereby granted, free of charge, to any person obtaining a copy
5-
//of this software and associated documentation files (the "Software"), to deal
6-
//in the Software without restriction, including without limitation the rights
7-
//to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8-
//copies of the Software, and to permit persons to whom the Software is
9-
//furnished to do so, subject to the following conditions:
10-
//
11-
// The above copyright notice and this permission notice shall be included in all
12-
//copies or substantial portions of the Software.
13-
//
14-
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15-
//IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16-
//FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17-
//AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18-
//LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19-
//OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20-
//SOFTWARE.
21-
221
const utils = require('./modules/utils.es6');
232

24-
if (build.EMOJI) var Emoji = require('./modules/emoticons/emoji.es6');
25-
if (build.SMILEY) var Smiley = require('./modules/emoticons/smiley.es6');
26-
if (build.LINK) var Url = require('./modules/url.es6');
3+
/**
4+
*
5+
* `build` object is defined in the file `build.json` present in the root folder of the project
6+
* It is used to create a custom build of the plugin. Webpack uses the object and sets it as a global variable
7+
* while creating the build. Later UglifyJS removes the dead code from the file and a custom build is created.
8+
*
9+
* Eg: Webpack converts
10+
* if (build.EMOJI){
11+
* var Emoji = require('./modules/emoticons/emoji.es6');
12+
* }
13+
* to
14+
* if (true){
15+
* var Emoji = require('./modules/emoticons/emoji.es6');
16+
* }
17+
* assuming that build.EMOJI is set to true in build.json
18+
* While processing UglifyJS removes the conditions if its always true. In case its set to false, UglifyJS
19+
* identifies the code in that block as dead code and removes it as that code won't be executed anyways.
20+
*
21+
* We have used `require` instead of `import` as according to ES6 spec `import` can't be put inside any conditional block
22+
* and it should be present at the top of the file.
23+
*
24+
*/
25+
26+
if (build.EMOJI) var Emoji = require('./modules/emoticons/emoji.es6');
27+
if (build.SMILEY) var Smiley = require('./modules/emoticons/smiley.es6');
28+
if (build.LINK) var Url = require('./modules/url.es6');
2729

28-
if (build.TWITTER) var Twitter = require('./modules/twitter/twitter.es6');
29-
if (build.MAP) var Gmap = require('./modules/map/map.es6');
30-
if (build.MARKDOWN) var Markdown = require('./modules/markdown.es6');
30+
if (build.TWITTER) var Twitter = require('./modules/twitter/twitter.es6');
31+
if (build.MAP) var Gmap = require('./modules/map/map.es6');
32+
if (build.MARKDOWN) var Markdown = require('./modules/markdown.es6');
3133

32-
const Code = require('./modules/code/code.es6');
33-
const Video = require('./modules/video/video.es6');
34-
const Audio = require('./modules/audio/audio.es6');
35-
const Image = require('./modules/image/image.es6');
36-
const helper = require('./modules/video/helper.es6');
34+
const Code = require('./modules/code/code.es6');
35+
const Video = require('./modules/video/video.es6');
36+
const Audio = require('./modules/audio/audio.es6');
37+
const Image = require('./modules/image/image.es6');
38+
const helper = require('./modules/video/helper.es6');
3739

38-
(function() {
40+
(function(window) {
3941

40-
var globalOptions;
42+
var globalOptions = {};
4143

4244
var defaultOptions = {
4345
marked : false,
@@ -107,15 +109,32 @@ const helper = require('./modules/video/helper.es6');
107109
};
108110

109111
class EmbedJS {
112+
/**
113+
* The constructor takes two arguements. The first one is the options object and the second one is the
114+
* optional string . If the user wants to provide a string directly instead of the element, he can do that.
115+
* In case the user provides both the input element and the string, the input string will be taken from the element
116+
* and the provided string won't be processed.
117+
*
118+
* @param {object} options The options object
119+
* @param {string} input [optional] The string to be processed
120+
* @return {null}
121+
*/
110122
constructor(options, input) {
111-
let [defOpts,globOpts]=[utils.cloneObject(defaultOptions),utils.cloneObject(globalOptions)]
123+
/**
124+
* We have created a clone of the original options to make sure that the original object
125+
* isn't altered.
126+
*/
127+
let defOpts = utils.cloneObject(defaultOptions)
128+
let globOpts = utils.cloneObject(globalOptions)
129+
112130
//merge global options with the default options
113131
let globOptions = utils.deepExtend(defOpts, globOpts)
114132

133+
//merge global options with the overriding options provided by the user as an options
134+
//object while creating a new instance of embed.js
115135
this.options = utils.deepExtend(globOptions, options);
116-
if (!this.options.element && !input) {
117-
throw ReferenceError("You need to pass an element or the string that needs to be processed");
118-
}
136+
137+
if (!this.options.element && !input) throw ReferenceError("You need to pass an element or the string that needs to be processed")
119138

120139
if (this.options.element) {
121140
this.element = this.options.element;
@@ -133,16 +152,17 @@ const helper = require('./modules/video/helper.es6');
133152
* @return {string} The processes resulting string
134153
*/
135154
async process() {
136-
let input = this.input;
155+
let input = this.input;
137156
let options = this.options;
138-
let embeds = [];
157+
let embeds = [];
158+
let output = '';
139159

140160
this.options.beforeEmbedJSApply();
141161

142-
let output = options.link && build.LINK ? (new Url(input, options).process()) : input;
162+
output = options.link && build.LINK ? (new Url(input, options).process()) : input;
143163
output = options.marked && build.MARKDOWN ? (new Markdown(output, options).process()) : output;
144-
output = options.emoji && build.EMOJI ? (new Emoji(output, options).process()) : output;
145-
output = options.fontIcons && build.SMILEY ? (new Smiley(output, options).process()) : output;
164+
output = options.emoji && build.EMOJI ? (new Emoji(output, options).process()) : output;
165+
output = options.fontIcons && build.SMILEY ? (new Smiley(output, options).process()) : output;
146166
[output, embeds] = (new Code(input, output, options, embeds).process());
147167
[output, embeds] = await (new Video(input, output, options, embeds).process());
148168
[output, embeds] = options.locationEmbed ? await (new Gmap(input, output, options, embeds).process()) : [output, embeds];
@@ -169,15 +189,16 @@ const helper = require('./modules/video/helper.es6');
169189
* @return {}
170190
*/
171191
async render() {
192+
if(!this.element) throw new Error(`You didn't pass an element while creating this instance. render() method can't work without an element`)
172193
let result = await this.process();
173-
this.options.element.innerHTML = result;
194+
this.element.innerHTML = result;
174195

175196
helper.applyVideoJS(this.options);
176197

177198
helper.play('ejs-video-thumb', this.options);
178199

179200
let event = new Event('rendered');
180-
this.options.element.dispatchEvent(event);
201+
this.element.dispatchEvent(event);
181202

182203
this.options.afterEmbedJSApply();
183204
}
@@ -192,22 +213,28 @@ const helper = require('./modules/video/helper.es6');
192213
callback(result, this.input);
193214
}
194215

216+
/**
217+
* The destroy method destroys all the listeners and replaces the rih text with the original text in the
218+
* element.
219+
* @return {null}
220+
*/
195221
destroy() {
196-
this.options.element.removeEventListener('rendered', this.twitter.load(), false);
197-
helper.destroy('ejs-video-thumb', this.options);
198-
this.options.element.innerHTML = this.input;
222+
if(!this.element) throw new Error(`destroy() method only if an element had been passed in the options object`)
223+
helper.destroy('ejs-video-thumb', this.options)
224+
this.element.removeEventListener('rendered', this.twitter.load(), false)
225+
this.element.innerHTML = this.input
199226
}
200227
}
201228

202229
let ejs = {
203-
instances: [],
204-
elements: [],
230+
instances : [],
231+
elements : [],
205232

206233
/**
207234
* Sets options globally
208235
* @param {object} options
209236
*/
210-
setOptions: function(options) {
237+
setOptions(options) {
211238
globalOptions = utils.deepExtend(defaultOptions, options)
212239
},
213240

@@ -216,7 +243,7 @@ const helper = require('./modules/video/helper.es6');
216243
* @param {string} className
217244
* @return {null}
218245
*/
219-
applyEmbedJS: function(className) {
246+
applyEmbedJS(className) {
220247
this.elements = document.getElementsByClassName(className)
221248
for (let i = 0; i < this.elements.length; i++) {
222249
let option = {
@@ -231,13 +258,14 @@ const helper = require('./modules/video/helper.es6');
231258
* Destroys all the instances of EmbedJS created by using ejs.applyEmbedJS method.
232259
* @return {null}
233260
*/
234-
destroyEmbedJS: function() {
261+
destroyEmbedJS() {
235262
for (let i = 0; i < this.elements.length; i++) {
236263
this.instances[i].destroy()
237264
}
238265
}
239266
}
240267

241268
window.EmbedJS = EmbedJS
242-
window.ejs = ejs
243-
})();
269+
window.ejs = ejs
270+
271+
})(window);

‎src/js/modules/audio/basic.es6‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,7 @@ class BasicAudio extends Base {
88
}
99

1010
template(match) {
11-
let template =
12-
`<div class="ejs-audio ejs-embed">
13-
<audio src="${match}" controls class="video-js ejs-video-js"></audio>
14-
</div>`;
15-
return template;
11+
return `<div class="ejs-audio ejs-embed"><audio src="${match}" controls class="video-js ejs-video-js"></audio></div>`
1612
}
1713
}
1814

‎src/js/modules/audio/soundcloud.es6‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ class SoundCloud extends Base{
99

1010
template(match) {
1111
let config = this.options.soundCloudOptions;
12-
let template =
13-
`<div class="ejs-embed">
12+
return `<div class="ejs-embed">
1413
<iframe height="160" scrolling="no" src="https://w.soundcloud.com/player/?url=${match}
1514
&auto_play = ${config.autoPlay}
1615
&hide_related = ${config.hideRelated}
@@ -21,8 +20,7 @@ class SoundCloud extends Base{
2120
&download = ${config.download}
2221
&color = ${config.themeColor}
2322
&theme_color = ${config.themeColor}"></iframe>
24-
</div>`;
25-
return template;
23+
</div>`
2624
}
2725
}
2826

‎src/js/modules/audio/spotify.es6‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@ class Spotify extends Base{
1010
template(match){
1111
let a = match.split('/')
1212
let id = a[a.length-1]
13-
let template =
14-
`<div class="ejs-embed">
13+
return `<div class="ejs-embed">
1514
<iframe src="https://embed.spotify.com/?uri=spotify:track:${id}" height="80"></iframe>
16-
</div>`;
17-
return template;
15+
</div>`
1816
}
1917
}
2018

‎src/js/modules/code/codepen.es6‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,9 @@ class CodePen extends Base{
88
}
99

1010
template(id){
11-
let template =
12-
`<div class="ejs-embed ejs-codepen">
11+
return `<div class="ejs-embed ejs-codepen">
1312
<iframe scrolling="no" height="${this.options.codeEmbedHeight}" src="${id.replace(/\/pen\//, '/embed/')}/?height=${this.options.codeEmbedHeight}"></iframe>'
14-
</div>`;
15-
return template;
13+
</div>`
1614
}
1715
}
1816

‎src/js/modules/code/gist.es6‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ class Gist extends Base {
1212
}
1313

1414
template(match) {
15-
let template =
16-
`<div class="ejs-gist" data-src="${match}"></div>`
17-
return template;
15+
return `<div class="ejs-gist" data-src="${match}"></div>`
1816
}
1917

2018
load() {

‎src/js/modules/code/highlight.es6‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,7 @@ class Highlight {
4242
* @return {string}
4343
*/
4444
addTemplate(processedCode, language){
45-
let template =
46-
`<pre>
47-
<code class="ejs-code hljs ${language}">${processedCode.value}</code>
48-
</pre>
49-
`;
50-
return template;
45+
return `<pre><code class="ejs-code hljs ${language}">${processedCode.value}</code></pre>`
5146
}
5247

5348
/**

0 commit comments

Comments
 (0)