pandao
6 years ago
9 changed files with 549 additions and 525 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,191 +1,195 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>Emoji - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
<style> |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>Emoji 表情</h1> |
|||
<p>Supports:</p> |
|||
<ul style="margin: 10px 0 0 18px;"> |
|||
<li>Github emoji : <a href="http://www.emoji-cheat-sheet.com/" target="_blank">http://www.emoji-cheat-sheet.com/</a></li> |
|||
<li>Twitter Emoji(Twemoji) : <a href="http://twitter.github.io/twemoji/preview.html" target="_blank">http://twitter.github.io/twemoji/preview.html</a></li> |
|||
<li>FontAwesome icon font emoji : <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">http://fortawesome.github.io/Font-Awesome/icons/</a></li> |
|||
<li>Editor.md logo icon font emoji</li> |
|||
</ul> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">### Emoji 表情 :smiley: |
|||
|
|||
[TOC] |
|||
|
|||
### Emoji |
|||
|
|||
Emoji cheat sheet for Campfire and GitHub. |
|||
|
|||
[http://www.emoji-cheat-sheet.com/](http://www.emoji-cheat-sheet.com/) |
|||
|
|||
**Usage:** |
|||
|
|||
:emoji-name: |
|||
|
|||
**Examples:** |
|||
|
|||
:heart: :smiley: :+1: :-1: :black_large_square: :waxing_gibbous_moon: :moon: :crescent_moon: |
|||
|
|||
### Twitter Emoji (Twemoji) |
|||
|
|||
**Usage:** |
|||
|
|||
:tw-xxxx: |
|||
|
|||
**Examples:** |
|||
|
|||
:tw-1f504: :tw-30-20e3: :tw-31-20e3: :tw-32-20e3: :tw-33-20e3: :tw-34-20e3: :tw-35-20e3: :tw-36-20e3: :tw-37-20e3: :tw-38-20e3: :tw-39-20e3: :tw-1f51f: |
|||
|
|||
[http://twitter.github.io/twemoji/preview.html](http://twitter.github.io/twemoji/preview.html) |
|||
|
|||
### Fortawesome icons |
|||
|
|||
[http://fortawesome.github.io/Font-Awesome/icons/](http://fortawesome.github.io/Font-Awesome/icons/) |
|||
|
|||
**Usage:** |
|||
|
|||
:fa-xxxx: |
|||
|
|||
**Examples:** |
|||
|
|||
:fa-wifi: :fa-twitter: :fa-google-plus: :fa-git-square: :fa-github-alt: :fa-external-link-square: |
|||
|
|||
### Editor.md logos |
|||
|
|||
**Usage:** |
|||
|
|||
:editormd-logo: |
|||
:editormd-logo-1x: |
|||
... |
|||
:editormd-logo-8x: |
|||
|
|||
**Examples:** |
|||
|
|||
:editormd-logo: :editormd-logo-1x: :editormd-logo-2x: :editormd-logo-3x: :editormd-logo-4x: :editormd-logo-5x: :editormd-logo-6x: :editormd-logo-7x: :editormd-logo-8x: |
|||
|
|||
### Mixed tests |
|||
|
|||
> Blockquotes :star: |
|||
|
|||
@pandao dasfsadfasdf:fa-edit: :warning: :smiley:dsafsdfsad\:fdsfdf\:f dfdf: :fa-save::fa-star: :fa-truck: |
|||
**fdfasd:smiley:dsfsdfsfd** ~~fsdfds:smiley:dfsdfsdf :fa-info:~~ @pandao |
|||
|
|||
:fa-weixin: :fa-qq: :fa-weibo: :fa-tencent-weibo: :fa-github: :fa-git: |
|||
|
|||
*dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf* |
|||
|
|||
___Emphasis :fa-gear: Italic:smiley:___ __Emphasis:smiley:__ |
|||
|
|||
# H1 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star: |
|||
## H2 dsfd:fa-star:fsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star: |
|||
### H3 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf @pandao |
|||
#### H4 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf |
|||
##### H5 dsfdfsfd:smiley:dsfsfd @pandao sfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf |
|||
###### H6 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-star:dsfsdf |
|||
|
|||
[:smiley:](http://www.emoji-cheat-sheet.com/ "link + emoji") link + emoji |
|||
|
|||
- dafs@pandao sdfsdaf:smiley:dfsdfsdf |
|||
- dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
- dafssdfsdaf:smiley:dfsdfsdf |
|||
- dafss:fa-truck:dfsdaf:smiley:dfsd @pandao fsdf |
|||
- dafssd: :fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck: |
|||
+ dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
+ dafs@pandao s:fa-truck:dfsdaf:smiley:dfsdfsdf |
|||
|
|||
|
|||
1. :smiley:第一行:fa-truck:fsdaf:smiley:dfs@pandao dfsdf :fa-save:: :fa-truck: |
|||
- dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
- dafss:fa-truck:dfsdaf:smiley:dfsdfsdf |
|||
2. :smiley:第二行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck: |
|||
3. 第三行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save:: :fa-truck: |
|||
|
|||
> Blockquotes @pandao |
|||
|
|||
> dd:smiley:引用文本(Blockquotes:smiley:)fdasfad :fa-star:: dfd :fa-truck: @pandao |
|||
|
|||
#### Datetime test |
|||
|
|||
02:21:47 |
|||
|
|||
2015-03-12 02:21:47 |
|||
|
|||
### In table |
|||
|
|||
|:100: First Header | Second:smiley: Header:smiley: | |
|||
| ------------- | ------------- | |
|||
| Content:fa-truck: Cell | :smiley:Content Cell :smiley: | |
|||
| Con:fa-truck:tent Cell:bangbang: | Content Cell dfsdfsdf :fa-star: :dfdf :fa-truck: | |
|||
|
|||
### Editor.md logo emoji |
|||
|
|||
:fa-heart:fasdfsdfsfddffd:editormd-logo: :editormd-logo: :editormd-logo-4x: |
|||
|
|||
dfasfasdfasdf:bangbang: |
|||
|
|||
This is an H1 :editormd-logo-4x: @pandao |
|||
============= |
|||
|
|||
@pandao This :fa-save:: :fa-truck:is an H2 :100: |
|||
------------- |
|||
|
|||
### GFM task lists :editormd-logo-5x: |
|||
|
|||
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:; |
|||
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:; |
|||
- [x] [ ] :smiley: this is a complete item :smiley:; |
|||
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao; |
|||
- [ ] [ ]this is an incomplete item; |
|||
- [ ] :smiley: this is an incomplete item [test link](#); |
|||
- [ ] :smiley: this is an incomplete item [test link](#); |
|||
|
|||
</textarea> |
|||
</div> |
|||
</div> |
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
|
|||
// You can custom Emoji's graphics files url path |
|||
editormd.emoji = { |
|||
path : "http://www.emoji-cheat-sheet.com/graphics/emojis/", |
|||
ext : ".png" |
|||
}; |
|||
|
|||
// Twitter Emoji (Twemoji) graphics files url path |
|||
editormd.twemoji = { |
|||
path : "http://twemoji.maxcdn.com/72x72/", |
|||
ext : ".png" |
|||
}; |
|||
|
|||
testEditor = editormd("test-editormd", { |
|||
width : "90%", |
|||
height : 720, |
|||
toc : true, |
|||
|
|||
emoji : true, // Support Github emoji, Twitter Emoji(Twemoji), fontAwesome, Editor.md logo emojis. |
|||
|
|||
taskList : true, |
|||
path : '../lib/' |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>Emoji - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
<style> |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>Emoji 表情</h1> |
|||
<p>Supports:</p> |
|||
<ul style="margin: 10px 0 0 18px;"> |
|||
<li>Github emoji : <a href="http://www.emoji-cheat-sheet.com/" target="_blank">http://www.emoji-cheat-sheet.com/</a></li> |
|||
<li>Twitter Emoji(Twemoji) : <a href="http://twitter.github.io/twemoji/preview.html" target="_blank">http://twitter.github.io/twemoji/preview.html</a></li> |
|||
<li>FontAwesome icon font emoji : <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">http://fortawesome.github.io/Font-Awesome/icons/</a></li> |
|||
<li>Editor.md logo icon font emoji</li> |
|||
</ul> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">### Emoji 表情 :smiley: |
|||
|
|||
[TOC] |
|||
|
|||
### Emoji |
|||
|
|||
Emoji cheat sheet for Campfire and GitHub. |
|||
|
|||
[http://www.emoji-cheat-sheet.com/](http://www.emoji-cheat-sheet.com/) |
|||
|
|||
**Usage:** |
|||
|
|||
:emoji-name: |
|||
|
|||
**Examples:** |
|||
|
|||
:heart: :smiley: :+1: :-1: :black_large_square: :waxing_gibbous_moon: :moon: :crescent_moon: |
|||
|
|||
### Twitter Emoji (Twemoji) |
|||
|
|||
**Usage:** |
|||
|
|||
:tw-xxxx: |
|||
|
|||
**Examples:** |
|||
|
|||
:tw-1f504: :tw-30-20e3: :tw-31-20e3: :tw-32-20e3: :tw-33-20e3: :tw-34-20e3: :tw-35-20e3: :tw-36-20e3: :tw-37-20e3: :tw-38-20e3: :tw-39-20e3: :tw-1f51f: |
|||
|
|||
[http://twitter.github.io/twemoji/preview.html](http://twitter.github.io/twemoji/preview.html) |
|||
|
|||
### Fortawesome icons |
|||
|
|||
[http://fortawesome.github.io/Font-Awesome/icons/](http://fortawesome.github.io/Font-Awesome/icons/) |
|||
|
|||
**Usage:** |
|||
|
|||
:fa-xxxx: |
|||
|
|||
**Examples:** |
|||
|
|||
:fa-wifi: :fa-twitter: :fa-google-plus: :fa-git-square: :fa-github-alt: :fa-external-link-square: |
|||
|
|||
### Editor.md logos |
|||
|
|||
**Usage:** |
|||
|
|||
:editormd-logo: |
|||
:editormd-logo-1x: |
|||
... |
|||
:editormd-logo-8x: |
|||
|
|||
**Examples:** |
|||
|
|||
:editormd-logo: :editormd-logo-1x: :editormd-logo-2x: :editormd-logo-3x: :editormd-logo-4x: :editormd-logo-5x: :editormd-logo-6x: :editormd-logo-7x: :editormd-logo-8x: |
|||
|
|||
### Mixed tests |
|||
|
|||
> Blockquotes :star: |
|||
|
|||
@pandao dasfsadfasdf:fa-edit: :warning: :smiley:dsafsdfsad\:fdsfdf\:f dfdf: :fa-save::fa-star: :fa-truck: |
|||
**fdfasd:smiley:dsfsdfsfd** ~~fsdfds:smiley:dfsdfsdf :fa-info:~~ @pandao |
|||
|
|||
:fa-weixin: :fa-qq: :fa-weibo: :fa-tencent-weibo: :fa-github: :fa-git: |
|||
|
|||
*dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf* |
|||
|
|||
___Emphasis :fa-gear: Italic:smiley:___ __Emphasis:smiley:__ |
|||
|
|||
# H1 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star: |
|||
## H2 dsfd:fa-star:fsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star: |
|||
### H3 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf @pandao |
|||
#### H4 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf |
|||
##### H5 dsfdfsfd:smiley:dsfsfd @pandao sfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf |
|||
###### H6 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-star:dsfsdf |
|||
|
|||
[:smiley:](http://www.emoji-cheat-sheet.com/ "link + emoji") link + emoji |
|||
|
|||
- dafs@pandao sdfsdaf:smiley:dfsdfsdf |
|||
- dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
- dafssdfsdaf:smiley:dfsdfsdf |
|||
- dafss:fa-truck:dfsdaf:smiley:dfsd @pandao fsdf |
|||
- dafssd: :fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck: |
|||
+ dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
+ dafs@pandao s:fa-truck:dfsdaf:smiley:dfsdfsdf |
|||
|
|||
|
|||
1. :smiley:第一行:fa-truck:fsdaf:smiley:dfs@pandao dfsdf :fa-save:: :fa-truck: |
|||
- dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
- dafss:fa-truck:dfsdaf:smiley:dfsdfsdf |
|||
2. :smiley:第二行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck: |
|||
3. 第三行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save:: :fa-truck: |
|||
|
|||
> Blockquotes @pandao |
|||
|
|||
> dd:smiley:引用文本(Blockquotes:smiley:)fdasfad :fa-star:: dfd :fa-truck: @pandao |
|||
|
|||
#### Datetime test |
|||
|
|||
02:21:47 |
|||
|
|||
2015-03-12 02:21:47 |
|||
|
|||
### In table |
|||
|
|||
|:100: First Header | Second:smiley: Header:smiley: | |
|||
| ------------- | ------------- | |
|||
| Content:fa-truck: Cell | :smiley:Content Cell :smiley: | |
|||
| Con:fa-truck:tent Cell:bangbang: | Content Cell dfsdfsdf :fa-star: :dfdf :fa-truck: | |
|||
|
|||
### Editor.md logo emoji |
|||
|
|||
:fa-heart:fasdfsdfsfddffd:editormd-logo: :editormd-logo: :editormd-logo-4x: |
|||
|
|||
dfasfasdfasdf:bangbang: |
|||
|
|||
This is an H1 :editormd-logo-4x: @pandao |
|||
============= |
|||
|
|||
@pandao This :fa-save:: :fa-truck:is an H2 :100: |
|||
------------- |
|||
|
|||
### GFM task lists :editormd-logo-5x: |
|||
|
|||
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:; |
|||
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:; |
|||
- [x] [ ] :smiley: this is a complete item :smiley:; |
|||
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao; |
|||
- [ ] [ ]this is an incomplete item; |
|||
- [ ] :smiley: this is an incomplete item [test link](#); |
|||
- [ ] :smiley: this is an incomplete item [test link](#); |
|||
|
|||
</textarea> |
|||
</div> |
|||
</div> |
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
|
|||
// You can custom Emoji's graphics files url path |
|||
editormd.emoji = { |
|||
path : "https://www.webpagefx.com/tools/emoji-cheat-sheet/graphics/emojis/", |
|||
ext : ".png" |
|||
}; |
|||
|
|||
// Twitter Emoji (Twemoji) graphics files url path |
|||
editormd.twemoji = { |
|||
path : "http://twemoji.maxcdn.com/72x72/", |
|||
ext : ".png" |
|||
}; |
|||
|
|||
testEditor = editormd("test-editormd", { |
|||
width : "90%", |
|||
height : 720, |
|||
toc : true, |
|||
|
|||
emoji : true, // Support Github emoji, Twitter Emoji(Twemoji), fontAwesome, Editor.md logo emojis. |
|||
// emojiCategories : ["github-emoji", "twemoji"], // Custom Emoji categories |
|||
// emojiCategories : ["twemoji"], // Custom Emoji categories |
|||
// emojiCategories : ["font-awesome"], // Custom Emoji categories |
|||
// emojiCategories : ["editormd-logo"], // Custom Emoji categories |
|||
|
|||
taskList : true, |
|||
path : '../lib/' |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
|||
File diff suppressed because one or more lines are too long
@ -1,331 +1,312 @@ |
|||
/*! |
|||
* Emoji dialog plugin for Editor.md |
|||
* |
|||
* @file emoji-dialog.js |
|||
* @author pandao |
|||
* @version 1.2.0 |
|||
* @updateTime 2015-03-08 |
|||
* {@link https://github.com/pandao/editor.md}
|
|||
* @license MIT |
|||
*/ |
|||
|
|||
(function() { |
|||
|
|||
var factory = function (exports) { |
|||
|
|||
var $ = jQuery; |
|||
var pluginName = "emoji-dialog"; |
|||
var emojiTabIndex = 0; |
|||
var emojiData = []; |
|||
var selecteds = []; |
|||
|
|||
var logoPrefix = "editormd-logo"; |
|||
var logos = [ |
|||
logoPrefix, |
|||
logoPrefix + "-1x", |
|||
logoPrefix + "-2x", |
|||
logoPrefix + "-3x", |
|||
logoPrefix + "-4x", |
|||
logoPrefix + "-5x", |
|||
logoPrefix + "-6x", |
|||
logoPrefix + "-7x", |
|||
logoPrefix + "-8x" |
|||
]; |
|||
|
|||
var langs = { |
|||
"zh-cn" : { |
|||
toolbar : { |
|||
emoji : "Emoji 表情" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji 表情" |
|||
} |
|||
} |
|||
}, |
|||
"zh-tw" : { |
|||
toolbar : { |
|||
emoji : "Emoji 表情" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji 表情" |
|||
} |
|||
} |
|||
}, |
|||
"en" : { |
|||
toolbar : { |
|||
emoji : "Emoji" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji" |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
|
|||
exports.fn.emojiDialog = function() { |
|||
var _this = this; |
|||
var cm = this.cm; |
|||
var settings = _this.settings; |
|||
|
|||
if (!settings.emoji) |
|||
{ |
|||
alert("settings.emoji == false"); |
|||
return ; |
|||
} |
|||
|
|||
var path = settings.pluginPath + pluginName + "/"; |
|||
var editor = this.editor; |
|||
var cursor = cm.getCursor(); |
|||
var selection = cm.getSelection(); |
|||
var classPrefix = this.classPrefix; |
|||
|
|||
$.extend(true, this.lang, langs[this.lang.name]); |
|||
this.setToolbar(); |
|||
|
|||
var lang = this.lang; |
|||
var dialogName = classPrefix + pluginName, dialog; |
|||
var dialogLang = lang.dialog.emoji; |
|||
|
|||
var dialogContent = [ |
|||
"<div class=\"" + classPrefix + "emoji-dialog-box\" style=\"width: 760px;height: 334px;margin-bottom: 8px;overflow: hidden;\">", |
|||
"<div class=\"" + classPrefix + "tab\"></div>", |
|||
"</div>", |
|||
].join("\n"); |
|||
|
|||
cm.focus(); |
|||
|
|||
if (editor.find("." + dialogName).length > 0) |
|||
{ |
|||
dialog = editor.find("." + dialogName); |
|||
|
|||
selecteds = []; |
|||
dialog.find("a").removeClass("selected"); |
|||
|
|||
this.dialogShowMask(dialog); |
|||
this.dialogLockScreen(); |
|||
dialog.show(); |
|||
} |
|||
else |
|||
{ |
|||
dialog = this.createDialog({ |
|||
name : dialogName, |
|||
title : dialogLang.title, |
|||
width : 800, |
|||
height : 475, |
|||
mask : settings.dialogShowMask, |
|||
drag : settings.dialogDraggable, |
|||
content : dialogContent, |
|||
lockScreen : settings.dialogLockScreen, |
|||
maskStyle : { |
|||
opacity : settings.dialogMaskOpacity, |
|||
backgroundColor : settings.dialogMaskBgColor |
|||
}, |
|||
buttons : { |
|||
enter : [lang.buttons.enter, function() { |
|||
cm.replaceSelection(selecteds.join(" ")); |
|||
this.hide().lockScreen(false).hideMask(); |
|||
|
|||
this.remove(); |
|||
|
|||
return false; |
|||
}], |
|||
cancel : [lang.buttons.cancel, function() { |
|||
this.hide().lockScreen(false).hideMask(); |
|||
|
|||
this.remove(); |
|||
|
|||
return false; |
|||
}] |
|||
} |
|||
}); |
|||
} |
|||
|
|||
var category = ["Github emoji", "Twemoji", "Font awesome", "Editor.md logo"]; |
|||
var tab = dialog.find("." + classPrefix + "tab"); |
|||
|
|||
if (tab.html() === "") |
|||
{ |
|||
var head = "<ul class=\"" + classPrefix + "tab-head\">"; |
|||
|
|||
for (var i = 0; i<4; i++) { |
|||
var active = (i === 0) ? " class=\"active\"" : ""; |
|||
head += "<li" + active + "><a href=\"javascript:;\">" + category[i] + "</a></li>"; |
|||
} |
|||
|
|||
head += "</ul>"; |
|||
|
|||
tab.append(head); |
|||
|
|||
var container = "<div class=\"" + classPrefix + "tab-container\">"; |
|||
|
|||
for (var x = 0; x < 4; x++) |
|||
{ |
|||
var display = (x === 0) ? "" : "display:none;"; |
|||
container += "<div class=\"" + classPrefix + "tab-box\" style=\"height: 260px;overflow: hidden;overflow-y: auto;" + display + "\"></div>"; |
|||
} |
|||
|
|||
container += "</div>"; |
|||
|
|||
tab.append(container); |
|||
} |
|||
|
|||
var tabBoxs = tab.find("." + classPrefix + "tab-box"); |
|||
var emojiCategories = ["github-emoji", "twemoji", "font-awesome", logoPrefix]; |
|||
|
|||
var drawTable = function() { |
|||
var cname = emojiCategories[emojiTabIndex]; |
|||
var $data = emojiData[cname]; |
|||
var $tab = tabBoxs.eq(emojiTabIndex); |
|||
|
|||
if ($tab.html() !== "") { |
|||
//console.log("break =>", cname);
|
|||
return ; |
|||
} |
|||
|
|||
var pagination = function(data, type) { |
|||
var rowNumber = (type === "editormd-logo") ? "5" : 20; |
|||
var pageTotal = Math.ceil(data.length / rowNumber); |
|||
var table = "<div class=\"" + classPrefix + "grid-table\">"; |
|||
|
|||
for (var i = 0; i < pageTotal; i++) |
|||
{ |
|||
var row = "<div class=\"" + classPrefix + "grid-table-row\">"; |
|||
|
|||
for (var x = 0; x < rowNumber; x++) |
|||
{ |
|||
var emoji = $.trim(data[(i * rowNumber) + x]); |
|||
|
|||
if (typeof emoji !== "undefined" && emoji !== "") |
|||
{ |
|||
var img = "", icon = ""; |
|||
|
|||
if (type === "github-emoji") |
|||
{ |
|||
var src = (emoji === "+1") ? "plus1" : emoji; |
|||
src = (src === "black_large_square") ? "black_square" : src; |
|||
src = (src === "moon") ? "waxing_gibbous_moon" : src; |
|||
|
|||
src = exports.emoji.path + src + exports.emoji.ext; |
|||
img = "<img src=\"" + src + "\" width=\"24\" class=\"emoji\" title=\":" + emoji + ":\" alt=\":" + emoji + ":\" />"; |
|||
row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>"; |
|||
} |
|||
else if (type === "twemoji") |
|||
{ |
|||
var twemojiSrc = exports.twemoji.path + emoji + exports.twemoji.ext; |
|||
img = "<img src=\"" + twemojiSrc + "\" width=\"24\" title=\"twemoji-" + emoji + "\" alt=\"twemoji-" + emoji + "\" class=\"emoji twemoji\" />"; |
|||
row += "<a href=\"javascript:;\" value=\":tw-" + emoji + ":\" title=\":tw-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>"; |
|||
} |
|||
else if (type === "font-awesome") |
|||
{ |
|||
icon = "<i class=\"fa fa-" + emoji + " fa-emoji\" title=\"" + emoji + "\"></i>"; |
|||
row += "<a href=\"javascript:;\" value=\":fa-" + emoji + ":\" title=\":fa-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>"; |
|||
} |
|||
else if (type === "editormd-logo") |
|||
{ |
|||
icon = "<i class=\"" + emoji + "\" title=\"Editor.md logo (" + emoji + ")\"></i>"; |
|||
row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" style=\"width:20%;\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>"; |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
row += "<a href=\"javascript:;\" value=\"\"></a>"; |
|||
} |
|||
} |
|||
|
|||
row += "</div>"; |
|||
|
|||
table += row; |
|||
} |
|||
|
|||
table += "</div>"; |
|||
|
|||
return table; |
|||
}; |
|||
|
|||
if (emojiTabIndex === 0) |
|||
{ |
|||
for (var i = 0, len = $data.length; i < len; i++) |
|||
{ |
|||
var h4Style = (i === 0) ? " style=\"margin: 0 0 10px;\"" : " style=\"margin: 10px 0;\""; |
|||
$tab.append("<h4" + h4Style + ">" + $data[i].category + "</h4>"); |
|||
$tab.append(pagination($data[i].list, cname)); |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
$tab.append(pagination($data, cname)); |
|||
} |
|||
|
|||
$tab.find("." + classPrefix + "emoji-btn").bind(exports.mouseOrTouch("click", "touchend"), function() { |
|||
$(this).toggleClass("selected"); |
|||
|
|||
if ($(this).hasClass("selected")) |
|||
{ |
|||
selecteds.push($(this).attr("value")); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
if (emojiData.length < 1) |
|||
{ |
|||
if (typeof dialog.loading === "function") { |
|||
dialog.loading(true); |
|||
} |
|||
|
|||
$.getJSON(path + "emoji.json?temp=" + Math.random(), function(json) { |
|||
|
|||
if (typeof dialog.loading === "function") { |
|||
dialog.loading(false); |
|||
} |
|||
|
|||
emojiData = json; |
|||
emojiData[logoPrefix] = logos; |
|||
drawTable(); |
|||
}); |
|||
} |
|||
else |
|||
{ |
|||
drawTable(); |
|||
} |
|||
|
|||
tab.find("li").bind(exports.mouseOrTouch("click", "touchend"), function() { |
|||
var $this = $(this); |
|||
emojiTabIndex = $this.index(); |
|||
|
|||
$this.addClass("active").siblings().removeClass("active"); |
|||
tabBoxs.eq(emojiTabIndex).show().siblings().hide(); |
|||
drawTable(); |
|||
}); |
|||
}; |
|||
|
|||
}; |
|||
|
|||
// CommonJS/Node.js
|
|||
if (typeof require === "function" && typeof exports === "object" && typeof module === "object") |
|||
{ |
|||
module.exports = factory; |
|||
} |
|||
else if (typeof define === "function") // AMD/CMD/Sea.js
|
|||
{ |
|||
if (define.amd) { // for Require.js
|
|||
|
|||
define(["editormd"], function(editormd) { |
|||
factory(editormd); |
|||
}); |
|||
|
|||
} else { // for Sea.js
|
|||
define(function(require) { |
|||
var editormd = require("./../../editormd"); |
|||
factory(editormd); |
|||
}); |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
factory(window.editormd); |
|||
} |
|||
|
|||
})(); |
|||
/*! |
|||
* Emoji dialog plugin for Editor.md |
|||
* |
|||
* @file emoji-dialog.js |
|||
* @author pandao |
|||
* @version 1.2.0 |
|||
* @updateTime 2015-03-08 |
|||
* {@link https://github.com/pandao/editor.md}
|
|||
* @license MIT |
|||
*/ |
|||
|
|||
(function() { |
|||
|
|||
var factory = function (exports) { |
|||
|
|||
var $ = jQuery; |
|||
var pluginName = "emoji-dialog"; |
|||
var emojiTabIndex = 0; |
|||
var emojiData = []; |
|||
var selecteds = []; |
|||
|
|||
var logoPrefix = "editormd-logo"; |
|||
var logos = [ |
|||
logoPrefix, |
|||
logoPrefix + "-1x", |
|||
logoPrefix + "-2x", |
|||
logoPrefix + "-3x", |
|||
logoPrefix + "-4x", |
|||
logoPrefix + "-5x", |
|||
logoPrefix + "-6x", |
|||
logoPrefix + "-7x", |
|||
logoPrefix + "-8x" |
|||
]; |
|||
|
|||
var langs = { |
|||
"zh-cn" : { |
|||
toolbar : { |
|||
emoji : "Emoji 表情" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji 表情" |
|||
} |
|||
} |
|||
}, |
|||
"zh-tw" : { |
|||
toolbar : { |
|||
emoji : "Emoji 表情" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji 表情" |
|||
} |
|||
} |
|||
}, |
|||
"en" : { |
|||
toolbar : { |
|||
emoji : "Emoji" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji" |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
|
|||
exports.fn.emojiDialog = function() { |
|||
var _this = this; |
|||
var cm = this.cm; |
|||
var settings = _this.settings; |
|||
|
|||
if (!settings.emoji) { |
|||
alert("settings.emoji == false"); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
var path = settings.pluginPath + pluginName + "/"; |
|||
var editor = this.editor; |
|||
var cursor = cm.getCursor(); |
|||
var selection = cm.getSelection(); |
|||
var classPrefix = this.classPrefix; |
|||
|
|||
$.extend(true, this.lang, langs[this.lang.name]); |
|||
|
|||
this.setToolbar(); |
|||
|
|||
var lang = this.lang; |
|||
var dialogName = classPrefix + pluginName, dialog; |
|||
var dialogLang = lang.dialog.emoji; |
|||
|
|||
var categoryNames = { |
|||
"github-emoji" : "Github emoji", |
|||
"twemoji" : "Twemoji", |
|||
"font-awesome" : "Font Awesome", |
|||
"editormd-logo" : "Editor.md logo" |
|||
}; |
|||
|
|||
var dialogContent = [ |
|||
"<div class=\"" + classPrefix + "emoji-dialog-box\" style=\"width: 760px;height: 334px;margin-bottom: 8px;overflow: hidden;\">", |
|||
"<div class=\"" + classPrefix + "tab\"></div>", |
|||
"</div>", |
|||
].join("\n"); |
|||
|
|||
cm.focus(); |
|||
|
|||
if (editor.find("." + dialogName).length > 0) { |
|||
dialog = editor.find("." + dialogName); |
|||
|
|||
selecteds = []; |
|||
dialog.find("a").removeClass("selected"); |
|||
|
|||
this.dialogShowMask(dialog); |
|||
this.dialogLockScreen(); |
|||
dialog.show(); |
|||
} else { |
|||
dialog = this.createDialog({ |
|||
name : dialogName, |
|||
title : dialogLang.title, |
|||
width : 800, |
|||
height : 480, |
|||
mask : settings.dialogShowMask, |
|||
drag : settings.dialogDraggable, |
|||
cached : true, |
|||
content : dialogContent, |
|||
lockScreen : settings.dialogLockScreen, |
|||
maskStyle : { |
|||
opacity : settings.dialogMaskOpacity, |
|||
backgroundColor : settings.dialogMaskBgColor |
|||
}, |
|||
buttons : { |
|||
enter : [lang.buttons.enter, function() { |
|||
cm.replaceSelection(selecteds.join(" ")); |
|||
this.hide().lockScreen(false).hideMask(); |
|||
|
|||
return false; |
|||
}], |
|||
cancel : [lang.buttons.cancel, function() { |
|||
this.hide().lockScreen(false).hideMask(); |
|||
|
|||
return false; |
|||
}] |
|||
} |
|||
}); |
|||
} |
|||
|
|||
var tab = dialog.find("." + classPrefix + "tab"); |
|||
var tabTitles = []; |
|||
var emojiCategories = []; |
|||
|
|||
if (settings.emojiCategories) { |
|||
$.each(settings.emojiCategories, function (key, value) { |
|||
emojiCategories.push(value); |
|||
|
|||
tabTitles.push(categoryNames[value]); |
|||
}); |
|||
} |
|||
|
|||
if (tab.html() === "") { |
|||
var head = "<ul class=\"" + classPrefix + "tab-head\">"; |
|||
var tabTotal = tabTitles.length; |
|||
|
|||
for (var i = 0; i < tabTotal; i++) { |
|||
var active = (i === 0) ? " class=\"active\"" : ""; |
|||
head += "<li" + active + "><a href=\"javascript:;\">" + tabTitles[i] + "</a></li>"; |
|||
} |
|||
|
|||
head += "</ul>"; |
|||
|
|||
tab.append(head); |
|||
|
|||
var container = "<div class=\"" + classPrefix + "tab-container\">"; |
|||
|
|||
for (var x = 0; x < tabTotal; x++) { |
|||
var display = (x === 0) ? "" : "display:none;"; |
|||
|
|||
container += "<div class=\"" + classPrefix + "tab-box\" style=\"height: 320px;overflow: hidden;overflow-y: auto;" + display + "\"></div>"; |
|||
} |
|||
|
|||
container += "</div>"; |
|||
|
|||
tab.append(container); |
|||
} |
|||
|
|||
var tabBoxs = tab.find("." + classPrefix + "tab-box"); |
|||
|
|||
var drawTable = function() { |
|||
var cname = emojiCategories[emojiTabIndex]; |
|||
var $data = emojiData[cname]; |
|||
var $tab = tabBoxs.eq(emojiTabIndex); |
|||
|
|||
if ($tab.html() !== "") { |
|||
return ; |
|||
} |
|||
|
|||
var pagination = function(data, type) { |
|||
var rowNumber = (type === "editormd-logo") ? "5" : 20; |
|||
var pageTotal = Math.ceil(data.length / rowNumber); |
|||
var table = "<div class=\"" + classPrefix + "grid-table\">"; |
|||
|
|||
for (var i = 0; i < pageTotal; i++) { |
|||
var row = "<div class=\"" + classPrefix + "grid-table-row\">"; |
|||
|
|||
for (var x = 0; x < rowNumber; x++) { |
|||
var emoji = $.trim(data[(i * rowNumber) + x]); |
|||
|
|||
if (typeof emoji !== "undefined" && emoji !== "") { |
|||
var img = "", icon = ""; |
|||
|
|||
if (type === "github-emoji") { |
|||
var src = (emoji === "+1") ? "plus1" : emoji; |
|||
src = (src === "black_large_square") ? "black_square" : src; |
|||
src = (src === "moon") ? "waxing_gibbous_moon" : src; |
|||
|
|||
src = exports.emoji.path + src + exports.emoji.ext; |
|||
img = "<img src=\"" + src + "\" width=\"24\" class=\"emoji\" title=\":" + emoji + ":\" alt=\":" + emoji + ":\" />"; |
|||
row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>"; |
|||
} else if (type === "twemoji") { |
|||
var twemojiSrc = exports.twemoji.path + emoji + exports.twemoji.ext; |
|||
img = "<img src=\"" + twemojiSrc + "\" width=\"24\" title=\"twemoji-" + emoji + "\" alt=\"twemoji-" + emoji + "\" class=\"emoji twemoji\" />"; |
|||
row += "<a href=\"javascript:;\" value=\":tw-" + emoji + ":\" title=\":tw-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>"; |
|||
} else if (type === "font-awesome") { |
|||
icon = "<i class=\"fa fa-" + emoji + " fa-emoji\" title=\"" + emoji + "\"></i>"; |
|||
row += "<a href=\"javascript:;\" value=\":fa-" + emoji + ":\" title=\":fa-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>"; |
|||
} else if (type === "editormd-logo") { |
|||
icon = "<i class=\"" + emoji + "\" title=\"Editor.md logo (" + emoji + ")\"></i>"; |
|||
row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" style=\"width:20%;\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>"; |
|||
} |
|||
} else { |
|||
row += "<a href=\"javascript:;\" value=\"\"></a>"; |
|||
} |
|||
} |
|||
|
|||
row += "</div>"; |
|||
table += row; |
|||
} |
|||
|
|||
table += "</div>"; |
|||
|
|||
return table; |
|||
}; |
|||
|
|||
if (cname === "github-emoji") { |
|||
for (var i = 0, len = $data.length; i < len; i++) { |
|||
var h4Style = (i === 0) ? " style=\"margin: 0 0 10px;\"" : " style=\"margin: 10px 0;\""; |
|||
$tab.append("<h4" + h4Style + ">" + $data[i].category + "</h4>"); |
|||
$tab.append(pagination($data[i].list, cname)); |
|||
} |
|||
} else { |
|||
$tab.append(pagination($data, cname)); |
|||
} |
|||
|
|||
$tab.find("." + classPrefix + "emoji-btn").bind("click", function() { |
|||
$(this).toggleClass("selected"); |
|||
|
|||
if ($(this).hasClass("selected")) { |
|||
selecteds.push($(this).attr("value")); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
if (emojiData.length < 1) { |
|||
if (typeof dialog.loading === "function") { |
|||
dialog.loading(true); |
|||
} |
|||
|
|||
$.getJSON(path + "emoji.json?temp=" + Math.random(), function(json) { |
|||
if (typeof dialog.loading === "function") { |
|||
dialog.loading(false); |
|||
} |
|||
|
|||
emojiData = json; |
|||
emojiData[logoPrefix] = logos; |
|||
drawTable(); |
|||
}); |
|||
} else { |
|||
drawTable(); |
|||
} |
|||
|
|||
tab.find("li").bind("click", function() { |
|||
var $this = $(this); |
|||
emojiTabIndex = $this.index(); |
|||
|
|||
$this.addClass("active").siblings().removeClass("active"); |
|||
tabBoxs.eq(emojiTabIndex).show().siblings().hide(); |
|||
drawTable(); |
|||
}); |
|||
}; |
|||
}; |
|||
|
|||
// CommonJS/Node.js
|
|||
if (typeof require === "function" && typeof exports === "object" && typeof module === "object") { |
|||
module.exports = factory; |
|||
} else if (typeof define === "function") { // AMD/CMD/Sea.js
|
|||
if (define.amd) { // for Require.js
|
|||
|
|||
define(["editormd"], function(editormd) { |
|||
factory(editormd); |
|||
}); |
|||
|
|||
} else { // for Sea.js
|
|||
define(function(require) { |
|||
var editormd = require("./../../editormd"); |
|||
factory(editormd); |
|||
}); |
|||
} |
|||
} else { |
|||
factory(window.editormd); |
|||
} |
|||
|
|||
})(); |
|||
|
|||
Loading…
Reference in new issue