This is an automated email from the ASF dual-hosted git repository. solomax pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/openmeetings.git
The following commit(s) were added to refs/heads/master by this push: new b28731c [OPENMEETINGS-1820] css emotions were rewritten b28731c is described below commit b28731cb57e3d376d57faee8af7297481d7a9330 Author: Maxim Solodovnik <solomax...@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 solo...@apache.org.