Skip to content

Commit a691982

Browse files
ritz078ritz078
committed
commit
1 parent 9f445a9 commit a691982

1 file changed

Lines changed: 111 additions & 51 deletions

File tree

‎index.html‎

Lines changed: 111 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html class="no-js">
33
<head>
44
<meta charset="utf-8">
5-
<title>Emoticons-js | Plugin to convert text into image-based emoticons,supports automatic embedding for media URL</title>
5+
<title>Embed-js | Plugin to convert text into image-based emoticons,supports automatic embedding for media URL</title>
66
<meta name="description" content="A jQuery plugin for converting text emojis into image-based emoticons, also supporting an automatic media embedding system for multimedia URLs">
77
<meta name="viewport" content="width=device-width">
88
<link rel="shortcut icon" href="/6df2b309.favicon.ico">
@@ -19,7 +19,7 @@
1919

2020

2121
<header>
22-
emoticons-js
22+
embed-js
2323
<a href="https://github.com/ritz078/emoticons-js"><i class="fa fa-github"></i></a>
2424
</header>
2525
<div class="sidebar">
@@ -40,15 +40,15 @@
4040

4141
<div class="content">
4242
<div class="card about">
43-
<h5 class="title">emoticons-js</h5>
43+
<h5 class="title">embed-js</h5>
4444
<div style="display: table;margin: 10px auto;">
45-
<iframe src="https://ghbtns.com/github-btn.html?user=ritz078&repo=emoticons-js&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
45+
<iframe src="https://ghbtns.com/github-btn.html?user=ritz078&repo=embed-js&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
4646
<iframe src="https://ghbtns.com/github-btn.html?user=ritz078&type=follow&count=true&size=large" frameborder="0" scrolling="0" width="220px" height="30px"></iframe>
4747

4848
</div>
4949
<p>A jQuery plugin for converting text emojis into image-based emoticons, also supporting an automatic media embedding system for multimedia URLs</p>
5050
<p>A demo is included with the download package.</p>
51-
<p>An <a href="http://rkritesh.in/ngEmoticons">AngularJS version</a> of Emoticons-js is also available.</p>
51+
<p>An <a href="http://rkritesh.in/ngEmoticons">AngularJS version</a> of Embed-js is also available.</p>
5252

5353
<p>Some <a href="#a" class="demo"><b>Demo examples</b></a> with their source code are given below.</p>
5454

@@ -57,58 +57,118 @@ <h5 class="title">emoticons-js</h5>
5757
<div class="card">
5858
<h5 class="title">Features</h5>
5959
<ol>
60-
<li><p>Emoticons-js has apparently evolved from a simple text emoticon to image emoji conversion system into a fully-blown text beautification toolkit.</p></li>
61-
<li> <p>Besides taking emoticons expressed using a text form and converting them to icon font-based or image-based emojis, this plugin can also do some other stuff too.</p></li>
62-
<li><p>This includes parsing the text for links pointing to multimedia assets, and automatically embedding those assets inside the text.</p></li>
63-
<li> <p>YouTube & Vimeo videos, PDF files, images, audio, and video files can all be retrieved and embedded inside the text, allowing users to view their content without having to navigate away to another browser page.</p></li>
64-
<li><p> <b>Emoticons-js can also highlight source code embedded on the page as well, but this requires you to load Highlight.js.</b></p></li>
60+
<li><p>Converts emoticon text codes into emoticons :smile: , :heart:</p></li>
61+
<li><p>Finds links in text input and turns them into html links.</p></li>
62+
<li><p>Youtube and Vimeo video embedding with video details fetched from the api.</p></li>
63+
<li><p>HTML5 player supported media embedding (mp3,mp4,ogg)</p></li>
64+
<li><p>PDF viewing with preview and then the actual pdf in a frame.</p></li>
65+
<li><p>Inline Code Syntax highlighting (uses highlight.js)</p></li>
66+
<li><p>Twitter tweet embedding supported</p></li>
67+
<li><p>Codepen, jsbin, jsfiddle embed supported<p></li>
68+
<li><p>soundcloud and spotify support</p></li>
69+
<li><p>Twitch tv, dotSub, dailymotion, vine,TED and liveLeak support.</p></li>
70+
<li><p>Google map location embed</p></li>
6571
</ol>
66-
67-
68-
69-
70-
71-
7272
</div>
7373
<div class="card">
7474
<h5 class="title">Documentation</h5>
7575
<pre><code>
76-
$('#element').emoticons({
77-
//Instructs the library whether or not to embed urls
78-
link : true,
79-
//same as the target attribute in html anchor tag . supports all html supported target values.
80-
linkTarget : '_blank',
81-
//Array of extensions to be excluded from converting into links
82-
linkExclude : ['jpg','pdf'],
83-
//set true to show a preview of pdf links
84-
pdfEmbed : true,
85-
//set true to embed images
86-
imageEmbed : true,
87-
//set true to embed audio
88-
audioEmbed : false,
89-
//set true to show a preview of youtube/vimeo videos with details
90-
videoEmbed : true,
91-
//set true to show basic video files like mp4 etc. (supported by html5 player)
92-
basicVideoEmbed : true,
93-
//width of the video frame (in pixels)
94-
videoWidth : 640,
95-
//height of the video frame (in pixels)
96-
videoHeight : 390,
97-
//( Mandatory ) The authorization key obtained from google's developer console for using youtube data api
98-
ytAuthKey : 'xxxxxxx',
99-
//Instructs the library whether or not to highlight code syntax.
100-
highlightCode : true,
101-
//callback before pdf preview
102-
beforePdfPreview : function(){},
103-
//callback after pdf preview
104-
afterPdfPreview : function(){},
105-
// callback on video frame view
106-
onVideoShow:function(){},
107-
//callback on video load (youtube/vimeo)
108-
onVideoLoad:function(){}
10976

110-
});
111-
</code></pre>
77+
$('#element').emoticons({
78+
//Instructs the library whether or not to embed urls
79+
link : true,
80+
//same as the target attribute in html anchor tag . supports all html supported target values.
81+
linkTarget : '_blank',
82+
//Array of extensions to be excluded from converting into links
83+
linkExclude : ['jpg','pdf'],
84+
//set true to show a preview of pdf links
85+
pdfEmbed : true,
86+
//set true to embed images
87+
imageEmbed : true,
88+
//set true to embed audio
89+
audioEmbed : false,
90+
//set true to show a preview of youtube/vimeo videos with details
91+
videoEmbed : true,
92+
//set true to show basic video files like mp4 etc. (supported by html5 player)
93+
basicVideoEmbed : true,
94+
//width of the video frame (in pixels)
95+
videoWidth : 640,
96+
//height of the video frame (in pixels)
97+
videoHeight : 390,
98+
//( Mandatory ) The authorization key obtained from google's developer console for
99+
//using youtube data api and map embed api
100+
gdevAuthKey : 'xxxxxxx',
101+
//Set google map location embed
102+
// Use @(place-name) to use this feature . Eg: @(Sydney)
103+
locationEmbed :true,
104+
//Instructs the library whether or not to highlight code syntax.
105+
highlightCode : true,
106+
//Instructs the library whether or not embed the tweets
107+
tweetsEmbed : true,
108+
tweetOptions:{
109+
//The maximum width of a rendered Tweet in whole pixels. Must be between 220 and 550 inclusive.
110+
maxWidth : 550,
111+
//When set to true or 1 links in a Tweet are not expanded to photo, video, or link previews.
112+
hideMedia : false,
113+
//When set to true or 1 a collapsed version of the previous Tweet in a conversation thread
114+
//will not be displayed when the requested Tweet is in reply to another Tweet.
115+
hideThread : false,
116+
//Specifies whether the embedded Tweet should be floated left, right, or center in
117+
//the page relative to the parent element.Valid values are left, right, center, and none.
118+
//Defaults to none, meaning no alignment styles are specified for the Tweet.
119+
align : 'none',
120+
//Request returned HTML and a rendered Tweet in the specified.
121+
//Supported Languages listed here (https://dev.twitter.com/web/overview/languages)
122+
lang : 'en'
123+
},
124+
//set to true to embed codepen
125+
codepenEmbed :true,
126+
//codepen height (width can be adjusted by css)
127+
codepenHeight :300,
128+
//set to true to embed jsfiddle
129+
jsfiddleEmbed :true,
130+
//jsfiddle height (width can be adjusted by css)
131+
jsfiddleHeight :300,
132+
//set to true to embed jsbin
133+
jsbinEmbed :true,
134+
//jsbin height (width can be adjusted by css)
135+
jsbinHeight :300,
136+
//set to true to embed soundcloud
137+
spotifyEmbed :true,
138+
soundCloudEmbed : true,
139+
soundCloudOptions: {
140+
height : 160,
141+
themeColor : 'f50000', //Hex Code of the player theme color
142+
autoPlay : false,
143+
hideRelated : false,
144+
showComments: true,
145+
showUser : true, //Show or hide the uploader name, useful e.g. in tiny players to save space)
146+
showReposts : false,
147+
visual : false, //Show/hide the big preview image
148+
download : false //Show/Hide download buttons
149+
},
150+
twitchtvEmbed :true,
151+
dotsubEmbed :true,
152+
dailymotionEmbed :true,
153+
vineEmbed : true,
154+
vineOptions:{
155+
width:500,
156+
type:'postcard' //'postcard' or 'simple' embedding
157+
},
158+
tedEmbed :true,
159+
liveleakEmbed :true,
160+
//callback before pdf preview
161+
beforePdfPreview : function(){},
162+
//callback after pdf preview
163+
afterPdfPreview : function(){},
164+
// callback on video frame view
165+
onVideoShow:function(){},
166+
//callback on video load (youtube/vimeo)
167+
onVideoLoad:function(){}
168+
169+
});
170+
171+
</code></pre>
112172
</div>
113173
<div class="card" id="a">
114174
<h5 class="title">Examples</h5>

0 commit comments

Comments
 (0)