You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openmeetings.apache.org by so...@apache.org on 2018/02/02 18:13:47 UTC
[openmeetings] branch 4.0.x updated: [OPENMEETINGS-1820] css
emotions were rewritten
This is an automated email from the ASF dual-hosted git repository.
solomax pushed a commit to branch 4.0.x
in repository https://gitbox.apache.org/repos/asf/openmeetings.git
The following commit(s) were added to refs/heads/4.0.x by this push:
new a6151c8 [OPENMEETINGS-1820] css emotions were rewritten
a6151c8 is described below
commit a6151c80181fc62f5eef44acb87dc869373048b6
Author: Maxim Solodovnik <so...@gmail.com>
AuthorDate: Sat Feb 3 01:13:37 2018 +0700
[OPENMEETINGS-1820] css emotions were rewritten
---
.../apache/openmeetings/web/user/chat/chat-base.js | 15 +-
.../openmeetings/web/user/chat/cssemoticons.js | 161 +++++++++---------
.../src/main/webapp/css/cssemoticons.css | 183 ++-------------------
3 files changed, 95 insertions(+), 264 deletions(-)
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat-base.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat-base.js
index b41224c..019b8cc 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat-base.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat-base.js
@@ -61,22 +61,19 @@ var Chat = function() {
chatActivity('typing_stop', $('.room.box').data('room-id'));
}
function initToolbar() {
- const emots = [].concat.apply([], [emoticon.threeCharEmoticons, emoticon.twoCharEmoticons]);
- for (let ei in emoticon.specialEmoticons) {
- emots.push(ei);
- }
+ const emots = emoticon.emoticons;
const rowSize = 20, emotMenuList = $('#emotMenuList');
emotMenuList.html('');
- let row = $('<tr></tr>');
+ let row;
for (let i = 0; i < emots.length; ++i) {
+ if (i % rowSize === 0) {
+ row = $('<tr></tr>');
+ emotMenuList.append(row);
+ }
row.append($('<td>').append(
$('<div>').addClass('emt').html(emoticon.emoticonize(emots[i]))
.data('emt', emots[i]).click(function() {Chat.emtClick($(this).data('emt'));})
));
- if (i !== 0 && i % rowSize === 0) {
- emotMenuList.append(row);
- row = $('<tr></tr>');
- }
}
const emtBtn = $('#emoticons');
emtBtn.html('');
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/cssemoticons.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/cssemoticons.js
index a7e2c4d..f7f8542 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/cssemoticons.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/cssemoticons.js
@@ -10,97 +10,92 @@
* Date: Sun Oct 22 1:00:00 2010 -0500
*/
var CSSEmoticon = function() {
- this.escapeCharacters = [")", "(", "*", "[", "]", "{", "}", "|", "^", "<", ">", "\\", "?", "+", "=", "."];
+ const escapeCharacters = [")", "(", "*", "[", "]", "{", "}", "|", "^", "<", ">", "\\", "?", "+", "=", "."];
+ const self = {
+ emoticons: []
+ , matchers: []
+ , defaults: {animate: true, delay: 500, exclude: 'pre,code,.no-emoticons'}
+ , emoticonize: function(str, options) {
+ const opts = $.extend({}, this.defaults, options);
- this.threeCharacterEmoticons = [
- ":-)", ":o)", ":c)", ":^)", ":-D", ":-(", ":-9", ";-)", ":-P", ":-p", ":-Þ", ":-b", ":-O", ":-/", ":-X", ":-#", ":'(", "B-)", "8-)", ";*(", ":-*", ":-\\",
- "?-)" // <== This is my own invention, it's a smiling pirate (with an eye-patch)!
- ];
- this.threeCharEmoticons = this.threeCharacterEmoticons.slice();
- this.twoCharacterEmoticons = [ // separate these out so that we can add a letter-spacing between the characters for better proportions
- ":)", ":]", "=]", "=)", "8)", ":}", ":D", ":(", ":[", ":{", "=(", ";)", ";]", ";D", ":P", ":p", "=P", "=p", ":b", ":Þ", ":O", ":/", "=/", ":S", ":#", ":X", "B)", ":|", ":\\", "=\\", ":*", ":>", ":<"
- ];
- this.twoCharEmoticons = this.twoCharacterEmoticons.slice();
-
- this.specialEmoticons = { // emoticons to be treated with a special class, hash specifies the additional class to add, along with standard css-emoticon class
- ">:)": {cssClass: "red-emoticon small-emoticon spaced-emoticon"},
- ">;)": {cssClass: "red-emoticon small-emoticon spaced-emoticon"},
- ">:(": {cssClass: "red-emoticon small-emoticon spaced-emoticon"},
- ">: )": {cssClass: "red-emoticon small-emoticon"},
- ">; )": {cssClass: "red-emoticon small-emoticon"},
- ">: (": {cssClass: "red-emoticon small-emoticon"},
- ";(": {cssClass: "red-emoticon spaced-emoticon"},
- "<3": {cssClass: "pink-emoticon counter-rotated"},
- "O_O": {cssClass: "no-rotate"},
- "o_o": {cssClass: "no-rotate"},
- "0_o": {cssClass: "no-rotate"},
- "O_o": {cssClass: "no-rotate"},
- "T_T": {cssClass: "no-rotate"},
- "^_^": {cssClass: "no-rotate"},
- "O:)": {cssClass: "small-emoticon spaced-emoticon"},
- "O: )": {cssClass: "small-emoticon"},
- "8D": {cssClass: "small-emoticon spaced-emoticon"},
- "XD": {cssClass: "small-emoticon spaced-emoticon"},
- "xD": {cssClass: "small-emoticon spaced-emoticon"},
- "=D": {cssClass: "small-emoticon spaced-emoticon"},
- "8O": {cssClass: "small-emoticon spaced-emoticon"},
- "[+=..]": {cssClass: "no-rotate nintendo-controller"}
- };
+ let cssClass = 'css-emoticon';
+ if (opts.animate) {
+ cssClass += ' un-transformed-emoticon animated-emoticon';
+ }
+ for (let i = 0; i < this.matchers.length; ++i) {
+ const m = this.matchers[i];
+ const css = cssClass + " " + m.cssClass;
+ str = str.replace(m.regexp, "$1<span class='" + css + "'>$2</span>");
+ }
+ return str;
+ }
+ , animate: function(options) {
+ const opts = $.extend({}, this.defaults, options);
+ // animate emoticons
+ if (opts.animate) {
+ setTimeout(function () {
+ $('.un-transformed-emoticon').removeClass('un-transformed-emoticon');
+ }, opts.delay);
+ }
+ }
+ }
- var specialRegex = new RegExp('(\\' + this.escapeCharacters.join('|\\') + ')', 'g');
+ const specialRegex = new RegExp('(\\' + escapeCharacters.join('|\\') + ')', 'g');
// One of these characters must be present before the matched emoticon, or the matched emoticon must be the first character in the container HTML
// This is to ensure that the characters in the middle of HTML properties or URLs are not matched as emoticons
// Below matches ^ (first character in container HTML), \s (whitespace like space or tab), or \0 (NULL character)
// (<\\S+.*>) matches <\\S+.*> (matches an HTML tag like <span> or <div>), but haven't quite gotten it working yet, need to push this fix now
- var preMatch = '(^|[\\s\\0])';
-
- for (var i = this.threeCharacterEmoticons.length - 1; i >= 0; --i) {
- this.threeCharacterEmoticons[i] = this.threeCharacterEmoticons[i].replace(specialRegex, '\\$1');
- this.threeCharacterEmoticons[i] = new RegExp(preMatch + '(' + this.threeCharacterEmoticons[i] + ')', 'g');
- }
-
- for (var i = this.twoCharacterEmoticons.length - 1; i >= 0; --i) {
- this.twoCharacterEmoticons[i] = this.twoCharacterEmoticons[i].replace(specialRegex, '\\$1');
- this.twoCharacterEmoticons[i] = new RegExp(preMatch + '(' + this.twoCharacterEmoticons[i] + ')', 'g');
- }
-
- for (var emoticon in this.specialEmoticons) {
- this.specialEmoticons[emoticon].regexp = emoticon.replace(specialRegex, '\\$1');
- this.specialEmoticons[emoticon].regexp = new RegExp(preMatch + '(' + this.specialEmoticons[emoticon].regexp + ')', 'g');
- }
+ const preMatch = '(^|[\\s\\0])';
- this.defaults = {animate: true, delay: 500, exclude: 'pre,code,.no-emoticons'}
-};
-CSSEmoticon.prototype.emoticonize = function(str, options) {
- const opts = $.extend({}, this.defaults, options);
-
- let cssClass = 'css-emoticon';
- if (opts.animate) {
- cssClass += ' un-transformed-emoticon animated-emoticon';
- }
-
- for (var emoticon in this.specialEmoticons) {
- const specialCssClass = cssClass + " " + this.specialEmoticons[emoticon].cssClass;
- str = str.replace(this.specialEmoticons[emoticon].regexp, "$1<span class='" + specialCssClass + "'>$2</span>");
- }
-
- for (var key in this.threeCharacterEmoticons) {
- const regexp = this.threeCharacterEmoticons[key];
- str = str.replace(regexp, "$1<span class='" + cssClass + "'>$2</span>");
+ function createMatcher(m) {
+ const str = m.text.replace(specialRegex, '\\$1');
+ m.regexp = new RegExp(preMatch + '(' + str + ')', 'g');
+ return m;
}
+ function addMatchers(arr) {
+ for (let i = 0; i < arr.length; ++i) {
+ const o = arr[i]
+ let m = typeof(o) === 'object' ? JSON.parse(JSON.stringify(o)) : {text: o, cssClass: ' '};
+ self.emoticons.push(m.text);
- for (var key in this.twoCharacterEmoticons) {
- const regexp = this.twoCharacterEmoticons[key];
- str = str.replace(regexp, "$1<span class='" + cssClass + " spaced-emoticon'>$2</span>");
- }
- return str;
-};
-CSSEmoticon.prototype.animate = function(options) {
- const opts = $.extend({}, this.defaults, options);
- // animate emoticons
- if (opts.animate) {
- setTimeout(function () {
- $('.un-transformed-emoticon').removeClass('un-transformed-emoticon');
- }, opts.delay);
+ self.matchers.push(createMatcher(m));
+ if (m.text.indexOf('=') > -1) {
+ m = JSON.parse(JSON.stringify(m));
+ m.text = m.text.replace(/=/g, '=').replace(/[+]/g, '+');
+ self.matchers.push(createMatcher(m));
+ }
+ }
}
+ addMatchers([
+ ":-)", ":o)", ":c)", ":^)", ":-D", ":-(", ":-9", ";-)", ":-P", ":-p", ":-Þ", ":-b", ":-O", ":-/", ":-X", ":-#", ":'(", "B-)", "8-)", ";*(", ":-*", ":-\\",
+ "?-)" // <== This is my own invention, it's a smiling pirate (with an eye-patch)!
+ ]);
+ addMatchers([ // separate these out so that we can add a letter-spacing between the characters for better proportions
+ ":)", ":]", "=]", "=)", "8)", ":}", ":D", ":(", ":[", ":{", "=(", ";)", ";]", ";D", ":P", ":p", "=P", "=p", ":b", ":Þ", ":O", ":/", "=/", ":S", ":#", ":X", "B)", ":|", ":\\", "=\\", ":*", ":>", ":<"
+ ]);
+ addMatchers([ // emoticons to be treated with a special class, hash specifies the additional class to add, along with standard css-emoticon class
+ {text: ">:)", cssClass: "red-emoticon small-emoticon spaced-emoticon"},
+ {text: ">;)", cssClass: "red-emoticon small-emoticon spaced-emoticon"},
+ {text: ">:(", cssClass: "red-emoticon small-emoticon spaced-emoticon"},
+ {text: ">: )", cssClass: "red-emoticon small-emoticon"},
+ {text: ">; )", cssClass: "red-emoticon small-emoticon"},
+ {text: ">: (", cssClass: "red-emoticon small-emoticon"},
+ {text: ";(", cssClass: "red-emoticon spaced-emoticon"},
+ {text: "<3", cssClass: "pink-emoticon counter-rotated"},
+ {text: "O_O", cssClass: "no-rotate"},
+ {text: "o_o", cssClass: "no-rotate"},
+ {text: "0_o", cssClass: "no-rotate"},
+ {text: "O_o", cssClass: "no-rotate"},
+ {text: "T_T", cssClass: "no-rotate"},
+ {text: "^_^", cssClass: "no-rotate"},
+ {text: "O:)", cssClass: "small-emoticon spaced-emoticon"},
+ {text: "O: )", cssClass: "small-emoticon"},
+ {text: "8D", cssClass: "small-emoticon spaced-emoticon"},
+ {text: "XD", cssClass: "small-emoticon spaced-emoticon"},
+ {text: "xD", cssClass: "small-emoticon spaced-emoticon"},
+ {text: "=D", cssClass: "small-emoticon spaced-emoticon"},
+ {text: "8O", cssClass: "small-emoticon spaced-emoticon"},
+ {text: "[+=..]", cssClass: "no-rotate nintendo-controller"}
+ ]);
+ return self;
};
diff --git a/openmeetings-web/src/main/webapp/css/cssemoticons.css b/openmeetings-web/src/main/webapp/css/cssemoticons.css
index c14765c..e2c2eca 100644
--- a/openmeetings-web/src/main/webapp/css/cssemoticons.css
+++ b/openmeetings-web/src/main/webapp/css/cssemoticons.css
@@ -20,36 +20,16 @@ span.css-emoticon {
overflow: hidden;
vertical-align: middle;
transform: rotate(90deg);
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -o-transform: rotate(90deg);
width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
text-align: center;
padding: 0;
line-height: 1.34em;
- -moz-border-radius: 1.54em;
- -webkit-border-radius: 1.54em;
border-radius: 1.54em;
- -moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
- -webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.25);
background-color: #ffcc00;
- background-image: -webkit-gradient(
- linear,
- right top,
- left top,
- color-stop(0.41, rgb(255,204,0)),
- color-stop(0.56, rgb(255,221,85)),
- color-stop(1, rgb(255,238,170))
- );
- background-image: -moz-linear-gradient(
- center right,
- rgb(255,204,0) 41%,
- rgb(255,221,85) 56%,
- rgb(255,238,170) 100%
- );
+ background-image: linear-gradient(to right, #fff4c8, #fc0);
-webkit-transition-property:color, background, transform;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
@@ -76,8 +56,6 @@ span.css-emoticon.small-emoticon {
width: 1.82em;
height: 1.82em;
line-height: 1.72em;
- -moz-border-radius: 1.82em;
- -webkit-border-radius: 1.82em;
border-radius: 1.82em;
}
@@ -90,184 +68,58 @@ span.css-emoticon.small-emoticon.spaced-emoticon {
/* Styles for additional colors */
span.css-emoticon.red-emoticon {
background-color: #eb0542;
- background-image: -webkit-gradient(
- linear,
- right top,
- left top,
- color-stop(0.41, rgb(235,5,66)),
- color-stop(0.56, rgb(235,38,90)),
- color-stop(1, rgb(250,55,110))
- );
- background-image: -moz-linear-gradient(
- center right,
- rgb(235,5,66) 41%,
- rgb(235,38,90) 56%,
- rgb(250,55,110) 100%
- );
+ background-image: linear-gradient(to right, #fa376e, #eb0542);
}
span.css-emoticon.pink-emoticon {
background-color: #ff8fd4;
- background-image: -webkit-gradient(
- linear,
- right top,
- left top,
- color-stop(0.41, rgb(255,143,212)),
- color-stop(0.56, rgb(255,153,216)),
- color-stop(1, rgb(255,173,225))
- );
- background-image: -moz-linear-gradient(
- center right,
- rgb(255,143,212) 41%,
- rgb(255,153,216) 56%,
- rgb(255,173,225) 100%
- );
+ background-image: linear-gradient(to right, #ffade1, #ff8fd4);
}
/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate {
transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
- -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-size: 0.45em;
width: 2.2em;
height: 2.2em;
line-height: 1.9em;
- -moz-border-radius: 2.2em;
- -webkit-border-radius: 2.2em;
border-radius: 2.2em;
- background-image: -webkit-gradient(
- linear,
- right bottom,
- right top,
- color-stop(0.41, rgb(255,204,0)),
- color-stop(0.56, rgb(255,221,85)),
- color-stop(1, rgb(255,238,170))
- );
- background-image: -moz-linear-gradient(
- center bottom,
- rgb(255,204,0) 41%,
- rgb(255,221,85) 56%,
- rgb(255,238,170) 100%
- );
+ background-image: linear-gradient(#fff4c8, #fc0);
}
span.css-emoticon.no-rotate.red-emoticon {
- background-image: -webkit-gradient(
- linear,
- right bottom,
- right top,
- color-stop(0.41, rgb(235,5,66)),
- color-stop(0.56, rgb(235,38,90)),
- color-stop(1, rgb(250,55,110))
- );
- background-image: -moz-linear-gradient(
- center bottom,
- rgb(235,5,66) 41%,
- rgb(235,38,90) 56%,
- rgb(250,55,110) 100%
- );
+ background-image: linear-gradient(#fa376e, #eb0542);
}
span.css-emoticon.no-rotate.pink-emoticon {
- background-image: -webkit-gradient(
- linear,
- right bottom,
- right top,
- color-stop(0.41, rgb(255,143,212)),
- color-stop(0.56, rgb(255,153,216)),
- color-stop(1, rgb(255,173,225))
- );
- background-image: -moz-linear-gradient(
- center bottom,
- rgb(255,143,212) 41%,
- rgb(255,153,216) 56%,
- rgb(255,173,225) 100%
- );
+ background-image: linear-gradient(#ffade1, #ff8fd4);
}
/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated {
transform: rotate(-90deg);
- -webkit-transform: rotate(-90deg);
- -moz-transform: rotate(-90deg);
- -o-transform: rotate(-90deg);
- -moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
- -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
- background-image: -webkit-gradient(
- linear,
- left top,
- right top,
- color-stop(0.41, rgb(255,204,0)),
- color-stop(0.56, rgb(255,221,85)),
- color-stop(1, rgb(255,238,170))
- );
- background-image: -moz-linear-gradient(
- center left,
- rgb(255,204,0) 41%,
- rgb(255,221,85) 56%,
- rgb(255,238,170) 100%
- );
+ background-image: linear-gradient(to left, #fff4c8, #fc0);
}
span.css-emoticon.counter-rotated.red-emoticon {
- background-image: -webkit-gradient(
- linear,
- left top,
- right top,
- color-stop(0.41, rgb(235,5,66)),
- color-stop(0.56, rgb(235,38,90)),
- color-stop(1, rgb(250,55,110))
- );
- background-image: -moz-linear-gradient(
- center left,
- rgb(235,5,66) 41%,
- rgb(235,38,90) 56%,
- rgb(250,55,110) 100%
- );
+ background-image: linear-gradient(to left, #fa376e, #eb0542);
}
span.css-emoticon.counter-rotated.pink-emoticon {
- background-image: -webkit-gradient(
- linear,
- left top,
- right top,
- color-stop(0.41, rgb(255,143,212)),
- color-stop(0.56, rgb(255,153,216)),
- color-stop(1, rgb(255,173,225))
- );
- background-image: -moz-linear-gradient(
- center left,
- rgb(255,143,212) 41%,
- rgb(255,153,216) 56%,
- rgb(255,173,225) 100%
- );
+ background-image: linear-gradient(to left, #ffade1, #ff8fd4);
}
/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
- /* font-size: inherit;
- font-weight: inherit;
- vertical-align: inherit;
- line-height: inherit;
- font-family: inherit; */
letter-spacing: inherit;
color: inherit;
overflow: visible;
transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
background: none;
background-image: none;
box-shadow: none;
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
border-color: transparent;
}
@@ -278,18 +130,5 @@ span.css-emoticon.nintendo-controller {
width: 2.7em;
vertical-align: bottom;
border-radius: 0;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- background: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.09, rgb(116,121,140)),
- color-stop(0.55, rgb(165,170,189))
- );
- background: -moz-linear-gradient(
- center bottom,
- rgb(116,121,140) 9%,
- rgb(165,170,189) 55%
- );
-}
\ No newline at end of file
+ background: linear-gradient(to right, #a5aabd, #74798c);
+}
--
To stop receiving notification emails like this one, please contact
solomax@apache.org.