Added emojie picker

This commit is contained in:
Pierre 2018-04-20 15:40:09 +02:00
parent 90a79e7fae
commit 25525dcd94
13 changed files with 1754 additions and 7 deletions

View File

@ -20,3 +20,4 @@ ComunicWeb would not exists without the following technologies developped by the
- VideoJS
- jquery.hotkeys
- bootstrap-wysiwyg (https://github.com/steveathon/bootstrap-wysiwyg/)
- wdt-emoji-bundle (http://ned.im/wdt-emoji-bundle)

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 862 KiB

View File

@ -0,0 +1,483 @@
.wdt-emoji-popup,
.wdt-emoji-popup * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* hide unavailable fonts @todo - check fallbacks */
body[data-wdt-emoji-bundle='google'] .wdt-emoji[data-has-img-google='false'],
body[data-wdt-emoji-bundle='emojione'] .wdt-emoji[data-has-img-emojione='false'],
body[data-wdt-emoji-bundle='google'] .wdt-emoji[data-has-img-google='false'],
body[data-wdt-emoji-bundle='apple'] .wdt-emoji[data-has-img-apple='false'] {
display: none;
}
/* picker styles */
.wdt-emoji-picker {
position: absolute;
right: 5px;
bottom: 5px;
width: 20px;
height: 20px;
}
.wdt-emoji-picker:hover {
cursor: pointer;
}
.wdt-emoji-picker-parent {
position: relative;
}
.wdt-emoji-picker span.emoji-outer.emoji-sizer {
width: 18px;
height: 18px;
pointer-events: none;
}
/* bundle popup styles */
.wdt-emoji-popup {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
width: 357px;
max-width: 100%;
height: 357px;
max-height: 100%;
transition: opacity 50ms ease, bottom 1s ease-out;
opacity: 0;
border: 1px solid #dedede;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
}
.wdt-emoji-popup.open {
visibility: visible;
opacity: 1;
}
#wdt-emoji-menu-header {
padding: 4px 0 0 7px;
border-bottom: 1px solid rgba(0, 0, 0, .15);
background: #f7f7f7;
}
.wdt-emoji-tab {
display: inline-block;
width: 28px;
margin-right: 2.5px;
padding: 4px;
transition: border-color 150ms ease-out;
text-align: center;
color: #9e9ea6;
border-bottom: 3px solid transparent;
}
.wdt-emoji-tab:hover {
cursor: pointer;
text-decoration: none;
}
.wdt-emoji-tab.active {
padding-top: 3px;
color: #9e9ea6;
border-bottom: 3px solid #e7543d;
}
#wdt-emoji-search,
#wdt-emoji-search:focus {
font-size: 15px;
line-height: 20px;
width: 95%;
max-width: 100%;
height: 28px;
margin: .5rem 9px .6rem;
padding: 15px 2rem;
transition: border-color 150ms ease-out;
color: #444;
border: 1px solid #c5c5c5;
border-radius: 3px;
outline: none;
}
#wdt-emoji-search:focus {
border-color: #a0a0a0;
}
.wdt-emoji-popup h3 {
font-size: 15px;
font-weight: 700;
line-height: 15px;
position: relative;
margin: 0;
padding: 8px;
color: #555;
background: rgba(255, 255, 255, .95);
}
.wdt-emoji-popup h3.sticky {
position: absolute;
z-index: 4;
width: 330px;
}
.wdt-emoji-scroll-wrapper {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overflow-anchor: none;
height: 257px;
padding-bottom: 30px;
}
.wdt-emoji-sections {
padding: 0 5px;
}
.wdt-emoji {
line-height: 1rem;
position: relative;
display: inline-block;
margin-right: 2.5px !important;
margin-bottom: 1px;
padding: 6px;
-webkit-transition: background 500ms ease-out;
-moz-transition: background 500ms ease-out;
-ms-transition: background 500ms ease-out;
-o-transition: background 500ms ease-out;
transition: background 500ms ease-out;
text-align: center;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.wdt-emoji.not-matched {
display: none;
}
.wdt-emoji:hover {
cursor: pointer;
}
.wdt-emoji.gray:hover {
background-color: rgba(175, 175, 175, .32);
}
.wdt-emoji.green:hover {
background-color: #b7e887;
}
.wdt-emoji.pink:hover {
background-color: #f3c1fd;
}
.wdt-emoji.yellow:hover {
background-color: #f9ef67;
}
.wdt-emoji.blue:hover {
background-color: #b5e0fe;
}
.wdt-emoji-tab .emoji-outer {
width: 18px;
height: 18px;
}
span.emoji {
display: -moz-inline-box;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: baseline;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: 50%, 50%;
background-size: 1em;
background-size: contain;
-moz-box-orient: vertical;
*vertical-align: auto;
*zoom: 1;
*display: inline;
}
span.emoji-sizer {
font-size: 1em;
line-height: .81em;
}
span.emoji-outer {
display: -moz-inline-box;
display: inline-block;
width: 22px;
height: 22px;
margin-top: -2px;
vertical-align: middle;
*display: inline;
}
span.emoji-inner {
display: -moz-inline-box;
display: inline-block;
width: 100%;
height: 100%;
vertical-align: baseline;
text-indent: -9999px;
*vertical-align: auto;
*zoom: 1;
}
img.emoji {
width: 1em;
height: 1em;
}
#wdt-emoji-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: .4rem;
border-top: 1px solid rgba(0, 0, 0, .15);
background: #f7f7f7;
}
#wdt-emoji-no-result {
font-size: 10px;
font-weight: 400;
clear: both;
padding: 20px;
text-align: center;
color: #bababa;
}
#wdt-emoji-preview {
padding: .3rem 0 0 .7rem;
-webkit-transition: opacity .1s ease-in .1s;
-moz-transition: opacity .1s ease-in .1s;
transition: opacity .1s ease-in .1s;
opacity: 0;
}
#wdt-emoji-preview-img {
font-size: 2rem;
line-height: 2rem;
float: left;
width: 46px;
height: 54px;
padding: .6rem .5rem 0 .1rem;
vertical-align: middle;
}
#wdt-emoji-preview-bundle {
font-size: 17px;
font-weight: bold;
position: absolute;
bottom: 19px;
left: 14px;
-webkit-transition: opacity .1s ease-in .1s;
-moz-transition: opacity .1s ease-in .1s;
transition: opacity .1s ease-in .1s;
opacity: 1;
color: #989ba0;
}
#wdt-emoji-search-result-title,
#wdt-emoji-no-result {
display: none;
}
#wdt-emoji-search-result-title.wdt-show,
#wdt-emoji-no-result.wdt-show {
display: block;
margin: 0 5px;
}
.wdt-inline {
display: inline;
}
.wdt-search-on {
display: none;
}
.wdt-emoji-popup.preview-mode #wdt-emoji-preview-bundle {
opacity: 0;
}
.wdt-emoji-popup.preview-mode #wdt-emoji-preview {
opacity: 1;
}
#wdt-emoji-preview-img span.emoji-outer.emoji-sizer {
position: relative;
top: 3px;
left: 4px;
width: 40px;
height: 40px;
}
#wdt-emoji-preview-text {
font-size: 13px;
position: relative;
top: 9px;
left: 10px !important;
color: #777;
}
#wdt-emoji-preview-name {
font-weight: bold;
position: relative;
left: 3px;
color: #444;
}
.wdt-emoji-popup-mobile-closer {
font-size: 25px !important;
font-weight: bold;
line-height: 35px;
position: absolute;
top: -35px;
left: 50%;
visibility: hidden;
width: 40px;
height: 35px;
transform: translateX(-50%);
text-align: center;
opacity: 0;
color: #444;
border: 1px solid rgba(0, 0, 0, .1);
border-bottom-color: #e7543d;
border-radius: 50% 50% 0 0;
background-color: rgba(255, 255, 255, .8);
}
/* iPhone 2G-4S-5-5S in portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait) {
.wdt-emoji-picker {
display: none;
}
.wdt-emoji-tab {
width: 24px;
}
.wdt-emoji {
margin-right: 0 !important;
}
#wdt-emoji-footer {
display: none;
}
.wdt-emoji-scroll-wrapper {
height: 170px;
}
.wdt-emoji-popup {
height: 206px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#wdt-emoji-search {
display: none;
}
.wdt-emoji-popup-mobile-closer {
visibility: visible;
opacity: 1;
}
.wdt-emoji-popup h3.sticky {
width: 300px;
}
}
/* iPhone 6 in portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait) {
.wdt-emoji {
margin-right: -1px !important;
}
.wdt-emoji-tab {
width: 30px;
}
.wdt-emoji-popup h3.sticky {
width: 359px;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -12,6 +12,15 @@
margin-top: 0px;
}
.comment-creation-form .input-group-btn .comment-emoji-select .btn {
padding-left: 4px;
padding-right: 2px;
}
.comment-creation-form .input-group-btn .comment-image-select .btn {
padding-left: 2px;
padding-right: 5px;
}
.comment-creation-form .comment-image-select {
margin-bottom: -2px !important;
}
@ -20,6 +29,7 @@
display: none;
}
.comment-creation-form .comment-image-select a {
.comment-creation-form .comment-image-select a,
.comment-creation-form .comment-emoji-select a {
color: black;
}

View File

@ -8,5 +8,6 @@
* Emoji images global style
*/
.emoji {
height: 2em;
width: auto !important;
height: 2em !important;
}

View File

@ -0,0 +1,14 @@
/**
* Emoji picker stylesheet
*
* @author Pierre HUBERT
*/
#emojiPicker {
height: 0;
}
.wdt-emoji-popup {
z-index: 2;
margin-top: 7px;
}

View File

@ -733,6 +733,13 @@ var ComunicWeb = {
//TODO : implement
},
/**
* Emojie picker
*/
picker: {
//TODO : implement
},
},
/**

View File

@ -45,7 +45,7 @@ ComunicWeb.components.comments.form = {
appendTo: inputGroup,
type: "input",
elemType: "text",
class: "form-control",
class: "form-control wdt-emoji-open-on-colon",
placeholder: "New comment...",
name: "content"
});
@ -58,6 +58,27 @@ ComunicWeb.components.comments.form = {
class: "input-group-btn"
});
//Add emoji pick button
var addEmojieLabel = createElem2({
appendTo: buttonsGroup,
type: "label",
class: "comment-emoji-select"
});
var imageLabel = createElem2({
appendTo: addEmojieLabel,
type: "a",
class: "btn btn-flat",
innerHTML: "<i class='fa fa-smile-o'></i>"
});
//Add a picker on the label
ComunicWeb.components.emoji.picker.addPicker(newCommentText, addEmojieLabel);
//Add image pick button
var addImageLabel = createElem2({
appendTo: buttonsGroup,
@ -77,7 +98,7 @@ ComunicWeb.components.comments.form = {
type: "a",
class: "btn btn-flat",
innerHTML: "<i class='fa fa-picture-o'></i>"
})
});
//Add send button
var sendButton = createElem2({

View File

@ -0,0 +1,100 @@
/**
* Emojies picker
*
* @author Pierre HUBERT
*/
ComunicWeb.components.emoji.picker = {
//Source code of the emojies picker
pickerSrc: '<div class="wdt-emoji-popup">'+
'<a href="#" class="wdt-emoji-popup-mobile-closer"> &times; </a>' +
'<div class="wdt-emoji-menu-content">' +
' <div id="wdt-emoji-menu-header">' +
' <a class="wdt-emoji-tab active" data-group-name="Recent"></a>' +
' <a class="wdt-emoji-tab" data-group-name="People"></a>' +
' <a class="wdt-emoji-tab" data-group-name="Nature"></a>' +
' <a class="wdt-emoji-tab" data-group-name="Foods"></a>' +
' <a class="wdt-emoji-tab" data-group-name="Activity"></a>' +
' <a class="wdt-emoji-tab" data-group-name="Places"></a>' +
' <a class="wdt-emoji-tab" data-group-name="Objects"></a>' +
' <a class="wdt-emoji-tab" data-group-name="Symbols"></a>' +
' <a class="wdt-emoji-tab" data-group-name="Flags"></a>' +
' <a class="wdt-emoji-tab" data-group-name="Custom"></a>' +
' </div>' +
' <div class="wdt-emoji-scroll-wrapper">' +
' <div id="wdt-emoji-menu-items">' +
' <input id="wdt-emoji-search" type="text" placeholder="Search">' +
' <h3 id="wdt-emoji-search-result-title">Search Results</h3>' +
' <div class="wdt-emoji-sections"></div>' +
' <div id="wdt-emoji-no-result">No emoji found</div>' +
' </div>' +
' </div>' +
' <div id="wdt-emoji-footer">' +
' <div id="wdt-emoji-preview">' +
' <span id="wdt-emoji-preview-img"></span>' +
' <div id="wdt-emoji-preview-text">' +
' <span id="wdt-emoji-preview-name"></span><br>' +
' <span id="wdt-emoji-preview-aliases"></span>' +
' </div>' +
' </div>' +
' <div id="wdt-emoji-preview-bundle">' +
' <span>WDT Emoji Bundle</span>' +
' </div>' +
' </div>' +
'</div>' +
'</div>";',
/**
* Initialize Emojie picker
*/
init: function(){
//Check if the picker has to be included in the page
var targetPicker = byId("emojiPicker");
if(!targetPicker){
targetPicker = createElem2({
appendTo: byId("wrapper"),
type: "div",
id: "emojiPicker",
innerHTML: this.pickerSrc
});
wdtEmojiBundle.defaults.emojiSheets.twitter = ComunicWeb.__config.assetsURL + "3rdparty/wdt-emoji/sheets/sheet_twitter_64_indexed_128.png";
wdtEmojiBundle.init('.wdt-emoji-bundle-enabled');
wdtEmojiBundle.changeType("twitter");
}
},
/**
* Add a picker for an element
*
* @param {HTMLElement} elem Target element
* @param {HTMLElement} trigger Alternative element to trigger picker
*/
addPicker: function(elem, trigger){
//Make sure the system is ready
this.init();
//Check if the default features of the framework can be used
if(!trigger){
wdtEmojiBundle.addPicker(elem);
return;
}
trigger.addEventListener('click', wdtEmojiBundle.openPicker);
var parent = elem.parentNode;
parent.className += ' wdt-emoji-picker-parent';
if (elem.className.includes('wdt-emoji-open-on-colon')) {
parent.addEventListener('keyup', wdtEmojiBundle.onKeyup)
}
elem.className += ' wdt-emoji-bundle-enabled wdt-emoji-picker-ready';
}
}

View File

@ -48,7 +48,10 @@ class Dev {
"3rdparty/adminLTE/plugins/datepicker/datepicker3.css",
//VideoJS
//"3rdparty/videojs/6.4.0/video-js.min.css"
//"3rdparty/videojs/6.4.0/video-js.min.css",
//Emoji picker
"3rdparty/wdt-emoji/wdt-emoji-bundle.css",
);
/**
@ -101,7 +104,11 @@ class Dev {
"3rdparty/adminLTE/plugins/datepicker/bootstrap-datepicker.js",
//VideoJS
//"3rdparty/videojs/6.4.0/video.min.js"
//"3rdparty/videojs/6.4.0/video.min.js",
//Emoji picker
"3rdparty/wdt-emoji/emoji.min.js",
"3rdparty/wdt-emoji/wdt-emoji-bundle.js",
);
/**
@ -139,6 +146,7 @@ class Dev {
//Emojies
"css/components/emoji/parser.css",
"css/components/emoji/picker.css",
//Posts component
"css/components/posts/ui.css",
@ -265,6 +273,7 @@ class Dev {
//Emojies
"js/components/emoji/parser.js",
"js/components/emoji/list.js",
"js/components/emoji/picker.js",
//Like button
"js/components/like/button.js",