bulma-slider.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461
  1. (function webpackUniversalModuleDefinition(root, factory) {
  2. if(typeof exports === 'object' && typeof module === 'object')
  3. module.exports = factory();
  4. else if(typeof define === 'function' && define.amd)
  5. define([], factory);
  6. else if(typeof exports === 'object')
  7. exports["bulmaSlider"] = factory();
  8. else
  9. root["bulmaSlider"] = factory();
  10. })(typeof self !== 'undefined' ? self : this, function() {
  11. return /******/ (function(modules) { // webpackBootstrap
  12. /******/ // The module cache
  13. /******/ var installedModules = {};
  14. /******/
  15. /******/ // The require function
  16. /******/ function __webpack_require__(moduleId) {
  17. /******/
  18. /******/ // Check if module is in cache
  19. /******/ if(installedModules[moduleId]) {
  20. /******/ return installedModules[moduleId].exports;
  21. /******/ }
  22. /******/ // Create a new module (and put it into the cache)
  23. /******/ var module = installedModules[moduleId] = {
  24. /******/ i: moduleId,
  25. /******/ l: false,
  26. /******/ exports: {}
  27. /******/ };
  28. /******/
  29. /******/ // Execute the module function
  30. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  31. /******/
  32. /******/ // Flag the module as loaded
  33. /******/ module.l = true;
  34. /******/
  35. /******/ // Return the exports of the module
  36. /******/ return module.exports;
  37. /******/ }
  38. /******/
  39. /******/
  40. /******/ // expose the modules object (__webpack_modules__)
  41. /******/ __webpack_require__.m = modules;
  42. /******/
  43. /******/ // expose the module cache
  44. /******/ __webpack_require__.c = installedModules;
  45. /******/
  46. /******/ // define getter function for harmony exports
  47. /******/ __webpack_require__.d = function(exports, name, getter) {
  48. /******/ if(!__webpack_require__.o(exports, name)) {
  49. /******/ Object.defineProperty(exports, name, {
  50. /******/ configurable: false,
  51. /******/ enumerable: true,
  52. /******/ get: getter
  53. /******/ });
  54. /******/ }
  55. /******/ };
  56. /******/
  57. /******/ // getDefaultExport function for compatibility with non-harmony modules
  58. /******/ __webpack_require__.n = function(module) {
  59. /******/ var getter = module && module.__esModule ?
  60. /******/ function getDefault() { return module['default']; } :
  61. /******/ function getModuleExports() { return module; };
  62. /******/ __webpack_require__.d(getter, 'a', getter);
  63. /******/ return getter;
  64. /******/ };
  65. /******/
  66. /******/ // Object.prototype.hasOwnProperty.call
  67. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  68. /******/
  69. /******/ // __webpack_public_path__
  70. /******/ __webpack_require__.p = "";
  71. /******/
  72. /******/ // Load entry module and return exports
  73. /******/ return __webpack_require__(__webpack_require__.s = 0);
  74. /******/ })
  75. /************************************************************************/
  76. /******/ ([
  77. /* 0 */
  78. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  79. "use strict";
  80. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  81. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isString", function() { return isString; });
  82. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__events__ = __webpack_require__(1);
  83. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  84. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  85. var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
  86. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  87. function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  88. function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  89. var isString = function isString(unknown) {
  90. return typeof unknown === 'string' || !!unknown && (typeof unknown === 'undefined' ? 'undefined' : _typeof(unknown)) === 'object' && Object.prototype.toString.call(unknown) === '[object String]';
  91. };
  92. var bulmaSlider = function (_EventEmitter) {
  93. _inherits(bulmaSlider, _EventEmitter);
  94. function bulmaSlider(selector) {
  95. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  96. _classCallCheck(this, bulmaSlider);
  97. var _this = _possibleConstructorReturn(this, (bulmaSlider.__proto__ || Object.getPrototypeOf(bulmaSlider)).call(this));
  98. _this.element = typeof selector === 'string' ? document.querySelector(selector) : selector;
  99. // An invalid selector or non-DOM node has been provided.
  100. if (!_this.element) {
  101. throw new Error('An invalid selector or non-DOM node has been provided.');
  102. }
  103. _this._clickEvents = ['click'];
  104. /// Set default options and merge with instance defined
  105. _this.options = _extends({}, options);
  106. _this.onSliderInput = _this.onSliderInput.bind(_this);
  107. _this.init();
  108. return _this;
  109. }
  110. /**
  111. * Initiate all DOM element containing selector
  112. * @method
  113. * @return {Array} Array of all slider instances
  114. */
  115. _createClass(bulmaSlider, [{
  116. key: 'init',
  117. /**
  118. * Initiate plugin
  119. * @method init
  120. * @return {void}
  121. */
  122. value: function init() {
  123. this._id = 'bulmaSlider' + new Date().getTime() + Math.floor(Math.random() * Math.floor(9999));
  124. this.output = this._findOutputForSlider();
  125. this._bindEvents();
  126. if (this.output) {
  127. if (this.element.classList.contains('has-output-tooltip')) {
  128. // Get new output position
  129. var newPosition = this._getSliderOutputPosition();
  130. // Set output position
  131. this.output.style['left'] = newPosition.position;
  132. }
  133. }
  134. this.emit('bulmaslider:ready', this.element.value);
  135. }
  136. }, {
  137. key: '_findOutputForSlider',
  138. value: function _findOutputForSlider() {
  139. var _this2 = this;
  140. var result = null;
  141. var outputs = document.getElementsByTagName('output') || [];
  142. Array.from(outputs).forEach(function (output) {
  143. if (output.htmlFor == _this2.element.getAttribute('id')) {
  144. result = output;
  145. return true;
  146. }
  147. });
  148. return result;
  149. }
  150. }, {
  151. key: '_getSliderOutputPosition',
  152. value: function _getSliderOutputPosition() {
  153. // Update output position
  154. var newPlace, minValue;
  155. var style = window.getComputedStyle(this.element, null);
  156. // Measure width of range input
  157. var sliderWidth = parseInt(style.getPropertyValue('width'), 10);
  158. // Figure out placement percentage between left and right of input
  159. if (!this.element.getAttribute('min')) {
  160. minValue = 0;
  161. } else {
  162. minValue = this.element.getAttribute('min');
  163. }
  164. var newPoint = (this.element.value - minValue) / (this.element.getAttribute('max') - minValue);
  165. // Prevent bubble from going beyond left or right (unsupported browsers)
  166. if (newPoint < 0) {
  167. newPlace = 0;
  168. } else if (newPoint > 1) {
  169. newPlace = sliderWidth;
  170. } else {
  171. newPlace = sliderWidth * newPoint;
  172. }
  173. return {
  174. 'position': newPlace + 'px'
  175. };
  176. }
  177. /**
  178. * Bind all events
  179. * @method _bindEvents
  180. * @return {void}
  181. */
  182. }, {
  183. key: '_bindEvents',
  184. value: function _bindEvents() {
  185. if (this.output) {
  186. // Add event listener to update output when slider value change
  187. this.element.addEventListener('input', this.onSliderInput, false);
  188. }
  189. }
  190. }, {
  191. key: 'onSliderInput',
  192. value: function onSliderInput(e) {
  193. e.preventDefault();
  194. if (this.element.classList.contains('has-output-tooltip')) {
  195. // Get new output position
  196. var newPosition = this._getSliderOutputPosition();
  197. // Set output position
  198. this.output.style['left'] = newPosition.position;
  199. }
  200. // Check for prefix and postfix
  201. var prefix = this.output.hasAttribute('data-prefix') ? this.output.getAttribute('data-prefix') : '';
  202. var postfix = this.output.hasAttribute('data-postfix') ? this.output.getAttribute('data-postfix') : '';
  203. // Update output with slider value
  204. this.output.value = prefix + this.element.value + postfix;
  205. this.emit('bulmaslider:ready', this.element.value);
  206. }
  207. }], [{
  208. key: 'attach',
  209. value: function attach() {
  210. var _this3 = this;
  211. var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'input[type="range"].slider';
  212. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  213. var instances = new Array();
  214. var elements = isString(selector) ? document.querySelectorAll(selector) : Array.isArray(selector) ? selector : [selector];
  215. elements.forEach(function (element) {
  216. if (typeof element[_this3.constructor.name] === 'undefined') {
  217. var instance = new bulmaSlider(element, options);
  218. element[_this3.constructor.name] = instance;
  219. instances.push(instance);
  220. } else {
  221. instances.push(element[_this3.constructor.name]);
  222. }
  223. });
  224. return instances;
  225. }
  226. }]);
  227. return bulmaSlider;
  228. }(__WEBPACK_IMPORTED_MODULE_0__events__["a" /* default */]);
  229. /* harmony default export */ __webpack_exports__["default"] = (bulmaSlider);
  230. /***/ }),
  231. /* 1 */
  232. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  233. "use strict";
  234. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  235. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  236. var EventEmitter = function () {
  237. function EventEmitter() {
  238. var listeners = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  239. _classCallCheck(this, EventEmitter);
  240. this._listeners = new Map(listeners);
  241. this._middlewares = new Map();
  242. }
  243. _createClass(EventEmitter, [{
  244. key: "listenerCount",
  245. value: function listenerCount(eventName) {
  246. if (!this._listeners.has(eventName)) {
  247. return 0;
  248. }
  249. var eventListeners = this._listeners.get(eventName);
  250. return eventListeners.length;
  251. }
  252. }, {
  253. key: "removeListeners",
  254. value: function removeListeners() {
  255. var _this = this;
  256. var eventName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
  257. var middleware = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  258. if (eventName !== null) {
  259. if (Array.isArray(eventName)) {
  260. name.forEach(function (e) {
  261. return _this.removeListeners(e, middleware);
  262. });
  263. } else {
  264. this._listeners.delete(eventName);
  265. if (middleware) {
  266. this.removeMiddleware(eventName);
  267. }
  268. }
  269. } else {
  270. this._listeners = new Map();
  271. }
  272. }
  273. }, {
  274. key: "middleware",
  275. value: function middleware(eventName, fn) {
  276. var _this2 = this;
  277. if (Array.isArray(eventName)) {
  278. name.forEach(function (e) {
  279. return _this2.middleware(e, fn);
  280. });
  281. } else {
  282. if (!Array.isArray(this._middlewares.get(eventName))) {
  283. this._middlewares.set(eventName, []);
  284. }
  285. this._middlewares.get(eventName).push(fn);
  286. }
  287. }
  288. }, {
  289. key: "removeMiddleware",
  290. value: function removeMiddleware() {
  291. var _this3 = this;
  292. var eventName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
  293. if (eventName !== null) {
  294. if (Array.isArray(eventName)) {
  295. name.forEach(function (e) {
  296. return _this3.removeMiddleware(e);
  297. });
  298. } else {
  299. this._middlewares.delete(eventName);
  300. }
  301. } else {
  302. this._middlewares = new Map();
  303. }
  304. }
  305. }, {
  306. key: "on",
  307. value: function on(name, callback) {
  308. var _this4 = this;
  309. var once = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  310. if (Array.isArray(name)) {
  311. name.forEach(function (e) {
  312. return _this4.on(e, callback);
  313. });
  314. } else {
  315. name = name.toString();
  316. var split = name.split(/,|, | /);
  317. if (split.length > 1) {
  318. split.forEach(function (e) {
  319. return _this4.on(e, callback);
  320. });
  321. } else {
  322. if (!Array.isArray(this._listeners.get(name))) {
  323. this._listeners.set(name, []);
  324. }
  325. this._listeners.get(name).push({ once: once, callback: callback });
  326. }
  327. }
  328. }
  329. }, {
  330. key: "once",
  331. value: function once(name, callback) {
  332. this.on(name, callback, true);
  333. }
  334. }, {
  335. key: "emit",
  336. value: function emit(name, data) {
  337. var _this5 = this;
  338. var silent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  339. name = name.toString();
  340. var listeners = this._listeners.get(name);
  341. var middlewares = null;
  342. var doneCount = 0;
  343. var execute = silent;
  344. if (Array.isArray(listeners)) {
  345. listeners.forEach(function (listener, index) {
  346. // Start Middleware checks unless we're doing a silent emit
  347. if (!silent) {
  348. middlewares = _this5._middlewares.get(name);
  349. // Check and execute Middleware
  350. if (Array.isArray(middlewares)) {
  351. middlewares.forEach(function (middleware) {
  352. middleware(data, function () {
  353. var newData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
  354. if (newData !== null) {
  355. data = newData;
  356. }
  357. doneCount++;
  358. }, name);
  359. });
  360. if (doneCount >= middlewares.length) {
  361. execute = true;
  362. }
  363. } else {
  364. execute = true;
  365. }
  366. }
  367. // If Middleware checks have been passed, execute
  368. if (execute) {
  369. if (listener.once) {
  370. listeners[index] = null;
  371. }
  372. listener.callback(data);
  373. }
  374. });
  375. // Dirty way of removing used Events
  376. while (listeners.indexOf(null) !== -1) {
  377. listeners.splice(listeners.indexOf(null), 1);
  378. }
  379. }
  380. }
  381. }]);
  382. return EventEmitter;
  383. }();
  384. /* harmony default export */ __webpack_exports__["a"] = (EventEmitter);
  385. /***/ })
  386. /******/ ])["default"];
  387. });