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