From df13e5e1a2402a2643a2c1f4c61d1371d144400e Mon Sep 17 00:00:00 2001 From: Yuval Saraf Date: Tue, 8 Nov 2016 11:40:07 +0200 Subject: [PATCH] v0.5.1 --- bower.json | 2 +- dist/emoji-panel.js | 71 ++++++++++++++++++++++++----------------- dist/emoji-panel.min.js | 4 +-- package.json | 2 +- 4 files changed, 45 insertions(+), 34 deletions(-) diff --git a/bower.json b/bower.json index fca81a0..899f967 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "emoji-panel.js", - "version": "0.5.0", + "version": "0.5.1", "description": "Add panel picker for emojis with different types of sets on your website. http://TimeToKnow.github.io/emoji-panel/", "main": [ "dist/emoji-panel.js", diff --git a/dist/emoji-panel.js b/dist/emoji-panel.js index f6f3538..93bb93a 100644 --- a/dist/emoji-panel.js +++ b/dist/emoji-panel.js @@ -65,11 +65,10 @@ var EmojiPanel = function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } module.exports = function EmojiPanel(el) { - var _ref = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; - - var _ref$animationDuratio = _ref.animationDuration; - var animationDuration = _ref$animationDuratio === undefined ? 300 : _ref$animationDuratio; - var onClick = _ref.onClick; + var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, + _ref$animationDuratio = _ref.animationDuration, + animationDuration = _ref$animationDuratio === undefined ? 300 : _ref$animationDuratio, + onClick = _ref.onClick; _classCallCheck(this, EmojiPanel); @@ -177,10 +176,9 @@ var EmojiPanel = var _setEventsForTemplateHelpers = __webpack_require__(6); exports.default = function (el) { - var _ref = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; - - var animationDuration = _ref.animationDuration; - var eventListeners = _ref.eventListeners; + var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, + animationDuration = _ref.animationDuration, + eventListeners = _ref.eventListeners; var panelVariables = { isMidScrollAnimation: false @@ -261,7 +259,7 @@ var EmojiPanel = Object.defineProperty(exports, "__esModule", { value: true }); - exports.slideToCategory = exports.scrollElementTo = exports.round = exports.getIsElementScrollable = undefined; + exports.slideToCategory = exports.scrollElementTo = exports.getIsElementScrollable = undefined; var _categoryOrder = __webpack_require__(7); @@ -275,35 +273,48 @@ var EmojiPanel = return el.clientHeight !== el.scrollHeight; }; - var round = exports.round = function round(num) { - return (num * 2).toFixed() / 2; - }; - var scrollElementTo = exports.scrollElementTo = function scrollElementTo(el, done) { - var newScrollHeight = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2]; - var scrollDuration = arguments.length <= 3 || arguments[3] === undefined ? 300 : arguments[3]; + var newScrollHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; + var scrollDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300; + var stepSizeMs = 15; var scrollHeight = el.scrollTop; var scrollDiff = scrollHeight - newScrollHeight; - var scrollStep = Math.PI / (scrollDuration / 15); + var maxStep = Math.floor(scrollDuration / stepSizeMs); + var scrollStep = Math.PI / maxStep; var cosParameter = scrollDiff / 2; - var scrollCount = 0; - var scrollMargin = void 0; + var round = function round(num) { + return (scrollDiff > 0 ? Math.ceil : Math.floor)(num * 2).toFixed() / 2; + }; + var stepCount = 0; + var scrollMargin = 0; var step = function step() { - setTimeout(function () { - if (el.scrollTop !== newScrollHeight) { - requestAnimationFrame(step); - scrollCount = scrollCount + 1; - scrollMargin = round(cosParameter - cosParameter * Math.cos(scrollCount * scrollStep)); - el.scrollTop = scrollHeight - scrollMargin; - } else { - done(); - } - }, 15); + stepCount = stepCount + 1; + scrollMargin = round(cosParameter - cosParameter * Math.cos(stepCount * scrollStep)); + return stepCount === maxStep; + }; + var draw = function draw() { + el.scrollTop = scrollHeight - scrollMargin; }; - requestAnimationFrame(step); + // `Loop` runs on each call from `requestAnimationFrame`, will run `step` each 16ms id + var timeAccumulator = Date.now(); + var loop = function loop() { + var finished = false; + var now = Date.now(); + while (finished === false && now - timeAccumulator >= stepSizeMs) { + finished = step(); + timeAccumulator += stepSizeMs; + } + draw(); + if (finished) { + done(); + } else { + requestAnimationFrame(loop); + } + }; + requestAnimationFrame(loop); }; var marginParam = 100 / _categoryOrder2.default.length; diff --git a/dist/emoji-panel.min.js b/dist/emoji-panel.min.js index 2e9784e..d51a0d7 100644 --- a/dist/emoji-panel.min.js +++ b/dist/emoji-panel.min.js @@ -1,2 +1,2 @@ -var EmojiPanel=function(a){function e(n){if(s[n])return s[n].exports;var d=s[n]={exports:{},id:n,loaded:!1};return a[n].call(d.exports,d,d.exports,e),d.loaded=!0,d.exports}var s={};return e.m=a,e.c=s,e.p="",e(0)}([function(a,e,s){a.exports=s(1)},function(a,e,s){"use strict";function n(a){return a&&a.__esModule?a:{"default":a}}function d(a,e){if(!(a instanceof e))throw new TypeError("Cannot call a class as a function")}var i=(s(2),s(3)),p=n(i);a.exports=function t(a){var e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],s=e.animationDuration,n=void 0===s?300:s,i=e.onClick;d(this,t),this._eventListeners={onClick:i};var F=(0,p["default"])({animationDuration:n,eventListeners:this._eventListeners});a.innerHTML="",a.appendChild(F)}},function(a,e){"use strict";var s={APPLE:0,GOOGLE:1,TWITTER:2,EMOJIONE:4},n={16:0,20:1,32:2,64:4},d={ACTIVITY:0,FLAGS:1,FOODS:2,NATURE:4,OBJECTS:8,PEOPLE:16,PLACES:32,SYMBOLS:64};a.exports={IMAGE_SET:s,SIZE:n,CATEGORY:d}},function(a,e,s){"use strict";function n(a){return a&&a.__esModule?a:{"default":a}}Object.defineProperty(e,"__esModule",{value:!0});var d=s(4),i=n(d),p=s(5),t=n(p);e["default"]=function(a){var e=document.createElement("div");return e.setAttribute("class","ep-container"),e.innerHTML=i["default"],(0,t["default"])(e,a),e}},function(a,e){a.exports='
SMILEYS & PEOPLEANIMALS & NATURE FOOD & DRINKACTIVITY TRAVEL & PLACESOBJECTSSYMBOLS FLAGS
'; -},function(a,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=s(6);e["default"]=function(a){var e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],s=e.animationDuration,d=e.eventListeners,i={isMidScrollAnimation:!1},p=a.querySelector(".ep-categories"),t=a.querySelector(".ep-slide"),F=a.querySelector(".ep-emojies");t.style.transitionDuration=s+"ms";var c=function(){var a=F.scrollTop,e=Array.from(F.children),s=e.find(function(e){return a>=e.offsetTop&&(!e.nextElementSibling||a1&&void 0!==arguments[1]?arguments[1]:{},n=s.animationDuration,i=void 0===n?300:n,t=s.onClick;d(this,a),this._eventListeners={onClick:t};var F=(0,p.default)({animationDuration:i,eventListeners:this._eventListeners});e.innerHTML="",e.appendChild(F)}},function(a,e){"use strict";var s={APPLE:0,GOOGLE:1,TWITTER:2,EMOJIONE:4},n={16:0,20:1,32:2,64:4},d={ACTIVITY:0,FLAGS:1,FOODS:2,NATURE:4,OBJECTS:8,PEOPLE:16,PLACES:32,SYMBOLS:64};a.exports={IMAGE_SET:s,SIZE:n,CATEGORY:d}},function(a,e,s){"use strict";function n(a){return a&&a.__esModule?a:{default:a}}Object.defineProperty(e,"__esModule",{value:!0});var d=s(4),i=n(d),p=s(5),t=n(p);e.default=function(a){var e=document.createElement("div");return e.setAttribute("class","ep-container"),e.innerHTML=i.default,(0,t.default)(e,a),e}},function(a,e){a.exports='
SMILEYS & PEOPLEANIMALS & NATURE FOOD & DRINKACTIVITY TRAVEL & PLACESOBJECTSSYMBOLS FLAGS
'; +},function(a,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=s(6);e.default=function(a){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},s=e.animationDuration,d=e.eventListeners,i={isMidScrollAnimation:!1},p=a.querySelector(".ep-categories"),t=a.querySelector(".ep-slide"),F=a.querySelector(".ep-emojies");t.style.transitionDuration=s+"ms";var c=function(){var a=F.scrollTop,e=Array.from(F.children),s=e.find(function(e){return a>=e.offsetTop&&(!e.nextElementSibling||a2&&void 0!==arguments[2]?arguments[2]:0,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:300,d=15,i=a.scrollTop,p=i-s,t=Math.floor(n/d),F=Math.PI/t,c=p/2,l=function(a){return(p>0?Math.ceil:Math.floor)(2*a).toFixed()/2},u=0,f=0,x=function(){return u+=1,f=l(c-c*Math.cos(u*F)),u===t},E=function(){a.scrollTop=i-f},A=Date.now(),C=function a(){for(var s=!1,n=Date.now();s===!1&&n-A>=d;)s=x(),A+=d;E(),s?e():requestAnimationFrame(a)};requestAnimationFrame(C)},100/i.default.length);e.slideToCategory=function(a,e,s){if(a.selectedCategoryId!==s){a.selectedCategoryId=s;var n=i.default.indexOf(s);e.style.marginLeft=n*p+"%"}}},function(a,e,s){"use strict";var n=s(2).CATEGORY;a.exports=[n.PEOPLE,n.NATURE,n.FOODS,n.ACTIVITY,n.PLACES,n.OBJECTS,n.SYMBOLS,n.FLAGS]}]); \ No newline at end of file diff --git a/package.json b/package.json index 65527f6..a1a0d86 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "emoji-panel", - "version": "0.5.0", + "version": "0.5.1", "description": "Add panel picker for emojis with different types of sets on your website. http://TimeToKnow.github.io/emoji-panel/", "main": "lib/emoji-panel.js", "scripts": {