intia-theme 0.1.0 → 0.1.4

data/node_modules/bulma-carousel/src/js/components/transitions/translate.js

@@ -0,0 +1,98 @@
+import Coordinate from '../../utils/coordinate';
+import {
+	height,
+	width
+} from '../../utils/css';
+
+export default class Translate {
+	constructor(transitioner, slider, options = {}) {
+		this.transitioner = transitioner;
+		this.slider = slider;
+		this.options = {
+			...options
+		};
+
+		this.onTransitionEnd = this.onTransitionEnd.bind(this);
+	}
+
+	init() {
+		this._position = new Coordinate(this.slider.container.offsetLeft, this.slider.container.offsetTop);
+		this._bindEvents();
+		return this;
+	}
+
+	destroy() {
+		this._unbindEvents();
+	}
+
+	_bindEvents() {
+		this.slider.container.addEventListener('transitionend', this.onTransitionEnd);
+	}
+
+	_unbindEvents() {
+		this.slider.container.removeEventListener('transitionend', this.onTransitionEnd);
+	}
+
+	enable() {
+		this.slider.container.style.transition = `${this.options.duration}ms ${this.options.timing}`;
+	}
+
+	disable() {
+		this.slider.container.style.transition = 'none';
+	}
+
+	apply() {
+		let maxOffset;
+		if (this.options.effect === 'translate') {
+			const slide = this.slider.slides.filter(slide => slide.dataset.sliderIndex == this.slider.state.next)[0];
+			const slideOffset = new Coordinate(slide.offsetLeft, slide.offsetTop);
+			if (this.options.centerMode) {
+				maxOffset = new Coordinate(Math.round(width(this.slider.container)), Math.round(height(this.slider.container)));
+			} else {
+				maxOffset = new Coordinate(Math.round(width(this.slider.container) - width(this.slider.wrapper)), Math.round(height(this.slider.container) - height(this.slider.wrapper)));
+			}
+			const nextOffset = new Coordinate(Math.min(Math.max(slideOffset.x * -1, maxOffset.x * -1), 0), Math.min(Math.max(slideOffset.y * -1, maxOffset.y * -1), 0));
+			if (this.options.loop) {
+				if (!this.options.vertical && Math.abs(this._position.x) > maxOffset.x) {
+					nextOffset.x = 0;
+					this.slider.state.next = 0;
+				} else if (this.options.vertical && Math.abs(this._position.y) > maxOffset.y) {
+					nextOffset.y = 0;
+					this.slider.state.next = 0;
+				}
+			}
+
+			this._position.x = nextOffset.x;
+			this._position.y = nextOffset.y;
+			if (this.options.centerMode) {
+				this._position.x = this._position.x + (this.slider.wrapperWidth / 2) - (width(slide) / 2);
+			}
+
+			if (this.slider.direction === 'rtl') {
+				this._position.x = -this._position.x;
+				this._position.y = -this._position.y;
+			}
+			this.slider.container.style.transform = `translate3d(${this._position.x}px, ${this._position.y}px, 0)`;
+
+			/**
+			 * update the index with the nextIndex only if
+			 * the offset of the nextIndex is in the range of the maxOffset
+			 */
+			if (slideOffset.x > maxOffset.x) {
+				this.slider.transitioner.end();
+			}
+		}
+	}
+
+	onTransitionEnd(e) {
+		if (this.options.effect === 'translate') {
+
+			if (this.transitioner.isAnimating() && e.target == this.slider.container) {
+				if (this.options.infinite) {
+					this.slider._infinite.onTransitionEnd(e);
+				}
+			}
+			this.transitioner.end();
+		}
+	}
+}

data/node_modules/bulma-carousel/src/js/defaultOptions.js

@@ -0,0 +1,50 @@
+const defaultOptions = {
+  initialSlide: 0,
+  slidesToScroll: 1,
+  slidesToShow: 1,
+
+  navigation: true,
+  navigationKeys: true,
+  navigationSwipe: true,
+
+  pagination: true,
+
+  loop: false,
+  infinite: false,
+
+  effect: 'translate',
+  duration: 300,
+  timing: 'ease',
+
+  autoplay: false,
+  autoplaySpeed: 3000,
+  pauseOnHover: true,
+  breakpoints: [{
+      changePoint: 480,
+      slidesToShow: 1,
+      slidesToScroll: 1
+    },
+    {
+      changePoint: 640,
+      slidesToShow: 2,
+      slidesToScroll: 2
+    },
+    {
+      changePoint: 768,
+      slidesToShow: 3,
+      slidesToScroll: 3
+    }
+  ],
+
+  onReady: null,
+  icons: {
+    'previous': `<svg viewBox="0 0 50 80" xml:space="preserve">
+      <polyline fill="currentColor" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="45.63,75.8 0.375,38.087 45.63,0.375 "/>
+    </svg>`,
+    'next': `<svg viewBox="0 0 50 80" xml:space="preserve">
+      <polyline fill="currentColor" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 "/>
+    </svg>`
+  }
+};
+
+export default defaultOptions;

data/node_modules/bulma-carousel/src/js/index.js

@@ -0,0 +1,428 @@
+import {
+  uuid
+} from './utils/index';
+import {
+  removeClasses,
+  height,
+  width,
+  outerHeight
+} from './utils/css';
+import {
+  isString,
+  isFunction
+} from './utils/type';
+import EventEmitter from './utils/eventEmitter';
+
+import Autoplay from './components/autoplay';
+import Breakpoint from './components/breakpoint';
+import Infinite from './components/infinite';
+import Loop from './components/loop';
+import Navigation from './components/navigation';
+import Pagination from './components/pagination';
+import Swipe from './components/swipe';
+import Transitioner from './components/transitioner';
+
+import defaultOptions from './defaultOptions';
+import template from './templates';
+import templateItem from './templates/item';
+
+export default class bulmaCarousel extends EventEmitter {
+  constructor(selector, options = {}) {
+    super();
+
+    this.element = isString(selector) ? document.querySelector(selector) : selector;
+    // An invalid selector or non-DOM node has been provided.
+    if (!this.element) {
+      throw new Error('An invalid selector or non-DOM node has been provided.');
+    }
+    this._clickEvents = ['click', 'touch'];
+
+    // Use Element dataset values to override options
+    const elementConfig = this.element.dataset ? Object.keys(this.element.dataset)
+      .filter(key => Object.keys(defaultOptions).includes(key))
+      .reduce((obj, key) => {
+        return {
+          ...obj,
+          [key]: this.element.dataset[key]
+        };
+      }, {}) : {};
+    // Set default options - dataset attributes are master
+    this.options = {
+      ...defaultOptions,
+      ...options,
+      ...elementConfig
+    };
+
+    this._id = uuid('slider');
+
+    this.onShow = this.onShow.bind(this);
+
+    // Initiate plugin
+    this._init();
+  }
+
+  /**
+   * Initiate all DOM element containing datePicker class
+   * @method
+   * @return {Array} Array of all datePicker instances
+   */
+  static attach(selector = '.slider', options = {}) {
+    let instances = new Array();
+
+    const elements = isString(selector) ? document.querySelectorAll(selector) : Array.isArray(selector) ? selector : [selector];
+    [].forEach.call(elements, element => {
+      if (typeof element[this.constructor.name] === 'undefined') {
+        const instance = new bulmaCarousel(element, options);
+        element[this.constructor.name] = instance;
+        instances.push(instance);
+      } else {
+        instances.push(element[this.constructor.name]);
+      }
+    });
+
+    return instances;
+  }
+
+  /****************************************************
+   *                                                  *
+   * PRIVATE FUNCTIONS                                *
+   *                                                  *
+   ****************************************************/
+  /**
+   * Initiate plugin instance
+   * @method _init
+   * @return {Slider} Current plugin instance
+   */
+  _init() {
+    this._items = Array.from(this.element.children);
+
+    // Load plugins
+    this._breakpoint = new Breakpoint(this);
+    this._autoplay = new Autoplay(this);
+    this._navigation = new Navigation(this);
+    this._pagination = new Pagination(this);
+    this._infinite = new Infinite(this);
+    this._loop = new Loop(this);
+    this._swipe = new Swipe(this);
+
+    this._build();
+
+    if (isFunction(this.options.onReady)) {
+      this.options.onReady(this);
+    }
+
+    return this;
+  }
+
+  /**
+   * Build Slider HTML component and append it to the DOM
+   * @method _build
+   */
+  _build() {
+    // Generate HTML Fragment of template
+    this.node = document.createRange().createContextualFragment(template(this.id));
+    // Save pointers to template parts
+    this._ui = {
+      wrapper: this.node.firstChild,
+      container: this.node.querySelector('.slider-container')
+    }
+
+    // Add slider to DOM
+    this.element.appendChild(this.node);
+    this._ui.wrapper.classList.add('is-loading');
+    this._ui.container.style.opacity = 0;
+
+    this._transitioner = new Transitioner(this);
+
+    // Wrap all items by slide element
+    this._slides = this._items.map((item, index) => {
+      return this._createSlide(item, index);
+    });
+
+    this.reset();
+
+    this._bindEvents();
+
+    this._ui.container.style.opacity = 1;
+    this._ui.wrapper.classList.remove('is-loading');
+  }
+
+  /**
+   * Bind all events
+   * @method _bindEvents
+   * @return {void}
+   */
+  _bindEvents() {
+    this.on('show', this.onShow);
+  }
+
+  _unbindEvents() {
+    this.off('show', this.onShow);
+  }
+
+  _createSlide(item, index) {
+    const slide = document.createRange().createContextualFragment(templateItem()).firstChild;
+    slide.dataset.sliderIndex = index;
+    slide.appendChild(item);
+    return slide;
+  }
+
+  /**
+   * Calculate slider dimensions
+   */
+  _setDimensions() {
+    if (!this.options.vertical) {
+      if (this.options.centerMode) {
+        this._ui.wrapper.style.padding = '0px ' + this.options.centerPadding;
+      }
+    } else {
+      this._ui.wrapper.style.height = outerHeight(this._slides[0]) * this.slidesToShow;
+      if (this.options.centerMode) {
+        this._ui.wrapper.style.padding = this.options.centerPadding + ' 0px';
+      }
+    }
+
+    this._wrapperWidth = width(this._ui.wrapper);
+    this._wrapperHeight = outerHeight(this._ui.wrapper);
+
+    if (!this.options.vertical) {
+      this._slideWidth = Math.ceil(this._wrapperWidth / this.slidesToShow);
+      this._containerWidth = Math.ceil(this._slideWidth * this._slides.length);
+      this._ui.container.style.width = this._containerWidth + 'px';
+    } else {
+      this._slideWidth = Math.ceil(this._wrapperWidth);
+      this._containerHeight = Math.ceil((outerHeight(this._slides[0]) * this._slides.length));
+      this._ui.container.style.height = this._containerHeight + 'px';
+    }
+
+    this._slides.forEach(slide => {
+      slide.style.width = this._slideWidth + 'px';
+    });
+  }
+
+  _setHeight() {
+    if (this.options.effect !== 'translate') {
+      this._ui.container.style.height = outerHeight(this._slides[this.state.index]) + 'px';
+    }
+  }
+
+  // Update slides classes
+  _setClasses() {
+    this._slides.forEach(slide => {
+      removeClasses(slide, 'is-active is-current is-slide-previous is-slide-next');
+      if (Math.abs((this.state.index - 1) % this.state.length) === parseInt(slide.dataset.sliderIndex, 10)) {
+        slide.classList.add('is-slide-previous');
+      }
+      if (Math.abs(this.state.index % this.state.length) === parseInt(slide.dataset.sliderIndex, 10)) {
+        slide.classList.add('is-current');
+      }
+      if (Math.abs((this.state.index + 1) % this.state.length) === parseInt(slide.dataset.sliderIndex, 10)) {
+        slide.classList.add('is-slide-next');
+      }
+    });
+  }
+
+  /****************************************************
+   *                                                  *
+   * GETTERS and SETTERS                              *
+   *                                                  *
+   ****************************************************/
+
+  /**
+   * Get id of current datePicker
+   */
+  get id() {
+    return this._id;
+  }
+
+  set index(index) {
+    this._index = index;
+  }
+
+  get index() {
+    return this._index;
+  }
+
+  set length(length) {
+    this._length = length;
+  }
+
+  get length() {
+    return this._length;
+  }
+
+  get slides() {
+    return this._slides;
+  }
+
+  set slides(slides) {
+    this._slides = slides;
+  }
+
+  get slidesToScroll() {
+    return this.options.effect === 'translate' ? this._breakpoint.getSlidesToScroll() : 1;
+  }
+
+  get slidesToShow() {
+    return this.options.effect === 'translate' ? this._breakpoint.getSlidesToShow() : 1;
+  }
+
+  get direction() {
+    return (this.element.dir.toLowerCase() === 'rtl' || this.element.style.direction === 'rtl') ? 'rtl' : 'ltr';
+  }
+
+  get wrapper() {
+    return this._ui.wrapper;
+  }
+
+  get wrapperWidth() {
+    return this._wrapperWidth || 0;
+  }
+
+  get container() {
+    return this._ui.container;
+  }
+
+  get containerWidth() {
+    return this._containerWidth || 0;
+  }
+
+  get slideWidth() {
+    return this._slideWidth || 0;
+  }
+
+  get transitioner() {
+    return this._transitioner;
+  }
+
+  
+  /****************************************************
+   *                                                  *
+   * EVENTS FUNCTIONS                                 *
+   *                                                  *
+   ****************************************************/
+  onShow(e) {
+    this._navigation.refresh();
+    this._pagination.refresh();
+    this._setClasses();
+  }
+
+  /****************************************************
+   *                                                  *
+   * PUBLIC FUNCTIONS                                 *
+   *                                                  *
+   ****************************************************/
+  next() {
+    if (!this.options.loop && !this.options.infinite && this.state.index + this.slidesToScroll > this.state.length - this.slidesToShow && !this.options.centerMode) {
+      this.state.next = this.state.index;
+    } else {
+      this.state.next = this.state.index + this.slidesToScroll;
+    }
+    this.show();
+  }
+
+  previous() {
+    if (!this.options.loop && !this.options.infinite && this.state.index === 0) {
+      this.state.next = this.state.index;
+    } else {
+      this.state.next = this.state.index - this.slidesToScroll;
+    }
+    this.show();
+  }
+
+  start() {
+    this._autoplay.start();
+  }
+
+  pause() {
+    this._autoplay.pause();
+  }
+
+  stop() {
+    this._autoplay.stop();
+  }
+
+  show(index, force = false) {
+    // If all slides are already visible then return
+    if (!this.state.length || this.state.length <= this.slidesToShow) {
+      return;
+    }
+
+    if (typeof index === 'number') {
+      this.state.next = index;
+    }
+
+    if (this.options.loop) {
+      this._loop.apply();
+    }
+    if (this.options.infinite) {
+      this._infinite.apply();
+    }
+
+    // If new slide is already the current one then return
+    if (this.state.index === this.state.next) {
+      return;
+    }
+
+    this.emit('before:show', this.state);
+    this._transitioner.apply(force, this._setHeight.bind(this));
+    this.emit('after:show', this.state);
+
+    this.emit('show', this);
+  }
+
+  reset() {
+    this.state = {
+      length: this._items.length,
+      index: Math.abs(this.options.initialSlide),
+      next: Math.abs(this.options.initialSlide),
+      prev: undefined
+    };
+
+    // Fix options
+    if (this.options.loop && this.options.infinite) {
+      this.options.loop = false;
+    }
+    if (this.options.slidesToScroll > this.options.slidesToShow) {
+      this.options.slidesToScroll = this.slidesToShow;
+    }
+    this._breakpoint.init();
+
+    if (this.state.index >= this.state.length && this.state.index !== 0) {
+      this.state.index = this.state.index - this.slidesToScroll;
+    }
+    if (this.state.length <= this.slidesToShow) {
+      this.state.index = 0;
+    }
+
+    this._ui.wrapper.appendChild(this._navigation.init().render());
+    this._ui.wrapper.appendChild(this._pagination.init().render());
+
+    if (this.options.navigationSwipe) {
+      this._swipe.bindEvents();
+    } else {
+      this._swipe._bindEvents();
+    }
+
+    this._breakpoint.apply();
+    // Move all created slides into slider
+    this._slides.forEach(slide => this._ui.container.appendChild(slide));
+    this._transitioner.init().apply(true, this._setHeight.bind(this));
+
+    if (this.options.autoplay) {
+      this._autoplay.init().start();
+    }
+  }
+
+  /**
+   * Destroy Slider
+   * @method destroy
+   */
+  destroy() {
+    this._unbindEvents();
+    this._items.forEach(item => {
+      this.element.appendChild(item);
+    });
+    this.node.remove();
+  }
+}

data/node_modules/bulma-carousel/src/js/templates/index.js

@@ -0,0 +1,5 @@
+export default (id) => {
+  return `<div id="${id}" class="slider" tabindex="0">
+    <div class="slider-container"></div>
+  </div>`;
+};

data/node_modules/bulma-carousel/src/js/templates/item.js

@@ -0,0 +1,3 @@
+export default () => {
+  return `<div class="slider-item"></div>`;
+};

data/node_modules/bulma-carousel/src/js/templates/navigation.js

@@ -0,0 +1,4 @@
+export default (icons) => {
+	return `<div class="slider-navigation-previous">${icons.previous}</div>
+<div class="slider-navigation-next">${icons.next}</div>`;
+};

data/node_modules/bulma-carousel/src/js/templates/pagination-page.js

@@ -0,0 +1,3 @@
+export default () => {
+  return `<div class="slider-page"></div>`;
+};

data/node_modules/bulma-carousel/src/js/templates/pagination.js

@@ -0,0 +1,3 @@
+export default () => {
+	return `<div class="slider-pagination"></div>`;
+};

data/node_modules/bulma-carousel/src/js/utils/coordinate.js

@@ -0,0 +1,98 @@
+export default class Coordinate {
+	constructor(x = 0, y = 0) {
+		this._x = x;
+		this._y = y;
+	}
+
+	get x() {
+		return this._x;
+	}
+
+	set x(value = 0) {
+		this._x = value;
+		return this;
+	}
+
+	get y() {
+		return this._y;
+	}
+
+	set y(value = 0) {
+		this._y = value;
+		return this;
+	}
+
+	add(coord) {
+		return new Coordinate(this._x + coord._x, this._y + coord._y);
+	}
+
+	sub(coord) {
+		return new Coordinate(this._x - coord._x, this._y - coord._y);
+	}
+
+	distance(coord) {
+		let deltaX = this._x - coord._x;
+		let deltaY = this._y - coord._y;
+
+		return Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
+	}
+
+	max(coord) {
+		let x = Math.max(this._x, coord._x);
+		let y = Math.max(this._y, coord._y);
+
+		return new Coordinate(x, y);
+	}
+
+	equals(coord) {
+		if (this == coord) {
+			return true;
+		}
+		if (!coord || coord == null) {
+			return false;
+		}
+		return this._x == coord._x && this._y == coord._y;
+	}
+
+	inside(northwest, southeast) {
+		if ((this._x >= northwest._x) && (this._x <= southeast._x) &&
+			(this._y >= northwest._y) && (this._y <= southeast._y)) {
+
+			return true;
+		}
+		return false;
+	}
+
+	constrain(min, max) {
+		if (min._x > max._x || min._y > max._y) {
+			return this;
+		}
+
+		let x = this._x,
+			y = this._y;
+
+		if (min._x !== null) {
+			x = Math.max(x, min._x);
+		}
+		if (max._x !== null) {
+			x = Math.min(x, max._x);
+		}
+		if (min._y !== null) {
+			y = Math.max(y, min._y);
+		}
+		if (max._y !== null) {
+			y = Math.min(y, max._y);
+		}
+
+		return new Coordinate(x, y);
+	}
+
+	reposition(element) {
+		element.style['top'] = this._y + 'px';
+		element.style['left'] = this._x + 'px';
+	}
+
+	toString() {
+		return '(' + this._x + ',' + this._y + ')';
+	}
+}