RubyGems - intia-theme - Versions diffs - 0.1.0 → 0.1.4 - Mend

intia-theme 0.1.0 → 0.1.4

Files changed (230) hide show

data/node_modules/bulma-carousel/src/demo/index.html ADDED Viewed

@@ -0,0 +1,396 @@
+---
+layout: default
+route: index
+fixed-navbar: false
+title: Quick-Start
+subtitle: bulma.io Carousel/Slider component
+---
+{% capture component_include_css %}
+<link href="~bulma-carousel/dist/css/bulma-carousel.min.css" rel="stylesheet">
+{% endcapture %}
+{% capture component_include_sass %}
+@charset "utf-8"
+// Import Bulma core
+@import 'bulma.sass'
+// Import component
+@import "bulmaCarousel.sass"
+{% endcapture %}
+{% capture component_include_es5 %}
+<script src="~bulma-carousel/dist/js/bulma-carousel.min.js"></script>
+{% endcapture %}
+{% capture component_include_es6 %}
+import bulmaCarousel from '~bulma-carousel/dist/js/bulma-carousel.min.js';
+{% endcapture %}
+{% capture component_starter_template %}
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Hello Bulma!</title>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/css/bulma-carousel.min.css">
+	</head>
+  	<body>
+		<section class="section">
+			<div class="container">
+				<!-- Start Carousel -->
+				<div id="carousel-demo" class="carousel">
+					<div class="item-1">
+						<!-- Slide Content -->
+					</div>
+					<div class="item-2">
+						<!-- Slide Content -->
+					</div>
+					<div class="item-3">
+						<!-- Slide Content -->
+					</div>
+				</div>
+				<!-- End Carousel -->
+			</div>
+		</section>
+		<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/js/bulma-carousel.min.js"></script>
+		<script>
+		bulmaCarousel.attach('#carousel-demo', {
+			slidesToScroll: 1,
+			slidesToShow: 4
+		});
+		</script>
+	</body>
+</html>
+{% endcapture %}
+{% capture component_hero_starter_template %}
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Hello Bulma!</title>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/css/bulma-carousel.min.css">
+	</head>
+	<body>
+		<!-- Start Hero Carousel -->
+		<section class="hero is-medium has-carousel">
+			<div id="carousel-demo" class="hero-carousel">
+				<div class="item-1">
+					<!-- Slide Content -->
+				</div>
+				<div class="item-2">
+					<!-- Slide Content -->
+				</div>
+				<div class="item-3">
+					<!-- Slide Content -->
+				</div>
+			</div>
+			<div class="hero-head"></div>
+			<div class="hero-body"></div>
+			<div class="hero-foot"></div>
+		</section>
+		<!-- End Hero Carousel -->
+		<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/js/bulma-carousel.min.js"></script>
+		<script>
+			bulmaCarousel.attach('#carousel-demo', {
+				slidesToScroll: 1,
+				slidesToShow: 4
+			});
+		</script>
+	</body>
+</html>
+{% endcapture %}
+{% capture component_dataset %}
+<div class="carousel" data-slides-to-scroll="2">
+	<div class="item-1"></div>
+	<div class="item-2"></div>
+	<div class="item-3"></div>
+</div>
+{% endcapture %}
+{% capture component_init_es5 %}
+// Initialize all div with carousel class
+var carousels = bulmaCarousel.attach('.carousel', options);
+// Loop on each carousel initialized
+for(var i = 0; i < carousels.length; i++) {
+	// Add listener to  event
+	carousels[i].on('before:show', state => {
+		console.log(state);
+	});
+}
+// Access to bulmaCarousel instance of an element
+var element = document.querySelector('#my-element');
+if (element && element.bulmaCarousel) {
+	// bulmaCarousel instance is available as element.bulmaCarousel
+	element.bulmaCarousel.on('before-show', function(state) {
+		console.log(state);
+	});
+}
+{% endcapture %}
+{% capture component_init_es6 %}
+// Initialize all elements with carousel class.
+const carousels = bulmaCarousel.attach('.carousel', options);
+// To access to bulmaCarousel instance of an element
+const element = document.querySelector('#my-element');
+if (element && element.bulmaCarousel) {
+	// bulmaCarousel instance is available as element.bulmaCarousel
+}
+{% endcapture %}
+{% capture component_instance_access %}
+// Access to bulmaCarousel instance of an element
+var element = document.querySelector('#my-element');
+if (element && element.bulmaCarousel) {
+	// bulmaCarousel instance is available as element.bulmaCarousel
+}
+{% endcapture %}
+{% capture component_events %}
+// Initialize all elements with carousel class.
+const carousels = bulmaCarousel.attach('.carousel', options);
+// To access to bulmaCarousel instance of an element
+const element = document.querySelector('#my-element');
+if (element && element.bulmaCarousel) {
+	// bulmaCarousel instance is available as element.bulmaCarousel
+	element.bulmaCarousel.on('show', function(bulmaCarouselInstance) {
+		console.log(bulmaCarouselInstance.index);
+	});
+}
+{% endcapture %}
+{% include anchor.html name="Features" %}
+<div class="columns is-multiline is-variable is-6">
+	<div class="column is-one-third">
+		<article class="media">
+			<figure class="media-left">
+				<span class="icon has-text-info">
+					<i class="fas fa-2x fa-desktop"></i>
+				</span>
+			</figure>
+			<div class="media-content">
+				<div class="content">
+					<h1 class="title is-6 heading has-text-grey-dark">Responsive</h1>
+					<p>Carousel works fine on any device: desktop, tablet or mobile an adapt number of items visible (configurable).</p>
+				</div>
+			</div>
+		</article>
+	</div>
+	<div class="column is-one-third">
+		<article class="media">
+			<figure class="media-left">
+				<span class="icon has-text-info">
+					<i class="fas fa-2x fa-paint-brush"></i>
+				</span>
+			</figure>
+			<div class="media-content">
+				<div class="content">
+					<h1 class="title is-6 heading has-text-grey-dark">Customization</h1>
+					<p>Many options to customize behavior. Use of sass variables to easily customize design.</p>
+				</div>
+			</div>
+		</article>
+	</div>
+	<div class="column is-one-third">
+		<article class="media">
+			<figure class="media-left">
+				<span class="icon has-text-info">
+					<i class="fab fa-2x fa-js"></i>
+				</span>
+			</figure>
+			<div class="media-content">
+				<div class="content">
+					<h1 class="title is-6 heading has-text-grey-dark">Javascript</h1>
+					<p>Pure JavaScript to manage user interaction.</p>
+				</div>
+			</div>
+		</article>
+	</div>
+</div>
+{% include anchor.html name="Installation" %}
+<article class="message is-warning">
+	<div class="message-body">
+		This component requires bulma.io to work. See <a href="https://bulma.io/documentation/overview/start/" target="_blank">bulma.io
+			documentation</a> first to know how to include it into your project.
+	</div>
+</article>
+<p>There are several ways to get started with Bulma-extensions. You can either:</p>
+<section class="section is-paddingless">
+	<div class="tabs">
+		<ul>
+			<li class="is-active"><a href="#install-npm">Npm</a></li>
+			<li><a href="#install-github">Github</a> </li>
+		</ul>
+	</div>
+	<div class="tab-contents">
+		<div id="install-npm" class="tab-content is-active">
+			<p>Use npm to install and stay up to date in the future</p>
+			{% highlight shell %}npm install bulma-carousel{% endhighlight %}
+		</div>
+		<div id="install-github" class="tab-content">
+			<p>Use the GitHub repository to get the latest development version</p>
+			<p class="help">This method requires git installed on your computer.</p>
+			{% highlight shell %}git clone git://github.com/Wikiki/bulma-carousel.git{% endhighlight %}
+		</div>
+	</div>
+</section>
+{% include anchor.html name="Starter Template" %}
+<section class="section is-paddingless">
+	<p>If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer. </p>
+	<p>The best way to start with carousel is to use a simple div to encaspulate your items. All child will then be used as Carousel Item:</p>
+	<div class="tabs">
+		<ul>
+			<li class="is-active"><a href="#classic-carousel">Classic Carousel</a></li>
+			<li><a href="#hero-carousel">Hero Carousel</a></li>
+		</ul>
+	</div>
+	<div class="tab-contents">
+		<div id="classic-carousel" class="tab-content is-active">
+			<p>{% highlight html %}{{ component_starter_template }}{% endhighlight %}</p>
+		</div>
+		<div id="hero-carousel" class="tab-content">
+			<p>{% highlight html %}{{ component_hero_starter_template }}{% endhighlight %}</p>
+		</div>
+	</div>
+</section>
+{% include anchor.html name="Integration" %}
+<section class="section is-paddingless">
+	<article class="message is-warning">
+		<div class="message-body">
+			This component requires bulma.io to work. See <a href="https://bulma.io/documentation" target="_blank">bulma.io
+				documentation</a> first to know how to install it.
+		</div>
+	</article>
+	<p>You are only at 3 simple steps to work with bulmaCarousel.</p>
+	<ul class="step-text">
+		<li>
+			<h6 class="title is-6">Include Stylesheet</h6>
+			<p>The first step is to include the stylesheet into your project. You can use either the minified CSS version or
+				the Sass source to integrate it into a more global project.</p>
+			<div class="tabs">
+				<ul>
+					<li class="is-active"><a href="#include-css">Css</a></li>
+					<li><a href="#include-sass">Sass</a></li>
+				</ul>
+			</div>
+			<div class="tab-contents">
+				<div id="include-css" class="tab-content is-active">
+					<p>{% highlight html %}{{ component_include_css }}{% endhighlight %}</p>
+				</div>
+				<div id="include-sass" class="tab-content">
+					<p>{% highlight html %}{{ component_include_sass }}{% endhighlight %}</p>
+				</div>
+			</div>
+		</li>
+		<li>
+			<h6 class="title is-6">Include JavaScript</h6>
+			<p>Second step is to include the JavaScript part of the component.</p>
+			<div class="tabs">
+				<ul>
+					<li class="is-active"><a href="#import-es5">ES5</a></li>
+					<li><a href="#import-es6">ES6</a></li>
+				</ul>
+			</div>
+			<div class="tab-contents">
+				<div id="import-es5" class="tab-content is-active">
+					<p>{% highlight html %}{{ component_include_es5 }}{% endhighlight %}</p>
+				</div>
+				<div id="import-es6" class="tab-content">
+					<p>{% highlight javascript %}{{ component_include_es6 }}{% endhighlight %}</p>
+				</div>
+			</div>
+		</li>
+		<li>
+			<h6 class="title is-6">Initiate component</h6>
+			<p>Now all that remains is to intiate the component to all elements you want to transform into a Carousel</p>
+			<article class="message is-warning">
+				<div class="message-body">
+					The <code>attach()</code> method <strong>always</strong> return an array of Carousel instances (even if it
+					targets only one element).
+				</div>
+			</article>
+			<article class="message is-warning">
+				<div class="message-body">
+					Instantiation method is the same for classic & hero carousel.
+				</div>
+			</article>
+			<div class="tabs">
+				<ul>
+					<li class="is-active"><a href="#init-es5">ES5</a></li>
+					<li><a href="#init-es6">ES6</a></li>
+				</ul>
+			</div>
+			<div class="tab-contents">
+				<div id="init-es5" class="tab-content is-active">
+					<p>{% highlight javascript %}{{ component_init_es5 }}{% endhighlight %}</p>
+				</div>
+				<div id="init-es6" class="tab-content">
+					<p>{% highlight javascript %}{{ component_init_es6 }}{% endhighlight %}</p>
+				</div>
+			</div>
+		</li>
+	</ul>
+</section>
+{% include anchor.html name="Options" %}
+{% include options.html %}
+<article class="message is-info">
+	<div class="message-body">
+		Options can be set using input data attributes. Just convert option name to dashes.<br />
+		<i>For example if you want to init a carousel with SlidesToScroll option set to "2":</i>
+		{% highlight html %}{{ component_dataset }}{% endhighlight %}
+	</div>
+</article>
+{% include anchor.html name="Methods" %}
+<section class="section is-paddingless">
+	<p>Carousel component provides some public methods to manually work with it.</p>
+	{% include methods.html %}
+</section>
+{% include anchor.html name="Getters" %}
+<section class="section is-paddingless">
+	<p>Carousel component provides some public Getters to manually access properties.</p>
+	{% include getters.html %}
+	<article class="message is-info">
+		<div class="message-body">
+			<p>Reminder: You can easily access to bulmaCarousel instance from a DOM element using the following code:</p>
+			{% highlight javascript %}{{ component_instance_access }}{% endhighlight %}
+		</div>
+	</article>
+</section>
+{% include anchor.html name="Events" %}
+<section class="section is-paddingless">
+	<p>Carousel component comes with Events Management API so you can easily react to its behavior.</p>
+	{% include events.html %}
+	<p>Example working with "show" event:</p>
+	{% highlight javascript %}{{ component_events }}{% endhighlight %}
+</section>

data/node_modules/bulma-carousel/src/js/components/Media.js ADDED Viewed

@@ -0,0 +1,129 @@
+import {
+	uuid
+} from '../utils/';
+import {
+	isVideo,
+	isIFrame,
+	isHTML5
+} from '../utils/type';
+class Player {
+	constructor(element) {
+		this.id = uuid('player');
+		this.element = element;
+	}
+	play() {
+		if (!isVideo()) {
+			return;
+		}
+		if (isIFrame()) {
+			this._enableApi().then(() => this._postMessage(this.element, {
+				func: 'playVideo',
+				method: 'play'
+			}));
+		} else if (isHTML5()) {
+			try {
+				this.element.play();
+			} catch (e) {}
+		}
+	}
+	pause() {
+		if (!isVideo()) {
+			return;
+		}
+		if (isIFrame()) {
+			this._enableApi().then(() => this._postMessage(this.element, {
+				func: 'pauseVideo',
+				method: 'pause'
+			}));
+		} else if (isHTML5()) {
+			this.element.pause();
+		}
+	}
+	mute() {
+		if (!isVideo()) {
+			return;
+		}
+		if (isIFrame()) {
+			this._enableApi().then(() => this._postMessage(this.element, {
+				func: 'mute',
+				method: 'setVolume',
+				value: 0
+			}));
+		} else if (isHTML5()) {
+			this.element.muted = true;
+			this.element.setAttribute('muted', '');
+		}
+	}
+	_enableApi() {
+		if (this.ready) {
+			return this.ready;
+		}
+		const youtube = isYoutube();
+		const vimeo = isVimeo();
+		let poller;
+		if (youtube || vimeo) {
+			return this.ready = new Promise(resolve => {
+				once(this.element, 'load', () => {
+					if (youtube) {
+						const listener = () => this._postMessage(this.element, {
+							event: 'listening',
+							id: this.id
+						});
+						poller = setInterval(listener, 100);
+						listener();
+					}
+				});
+				this._listen(data => youtube && data.id === this.id && data.event === 'onReady' || vimeo && Number(data.player_id) === this.id)
+					.then(() => {
+						resolve();
+						poller && clearInterval(poller);
+					});
+				this.element.setAttribute('src', `${this.element.src}${this.element.src.includes('?') ? '&' : '?'}${youtube ? 'enablejsapi=1' : `api=1&player_id=${this.id}`}`);
+			});
+		}
+		return Promise.resolve();
+	}
+	_postMessage(element, cmd) {
+		try {
+			element.contentWindow.postMessage(JSON.stringify({
+				event: 'command',
+				...cmd
+			}), '*');
+		} catch (e) {}
+	}
+	_listen(cb) {
+		return new Promise(resolve => {
+			once(window, 'message', (_, data) => resolve(data), false, ({data}) => {
+				if (!data || !isString(data)) {
+					return;
+				}
+				try {
+					data = JSON.parse(data);
+				} catch (e) {
+					return;
+				}
+				return data && cb(data);
+			});
+		});
+	}
+}

data/node_modules/bulma-carousel/src/js/components/autoplay.js ADDED Viewed

@@ -0,0 +1,111 @@
+import EventEmitter from '../utils/eventEmitter';
+import {pointerEnter, pointerLeave} from '../utils/device';
+const onVisibilityChange = Symbol('onVisibilityChange');
+const onMouseEnter = Symbol('onMouseEnter');
+const onMouseLeave = Symbol('onMouseLeave');
+const defaultOptions = {
+	autoplay: false,
+	autoplaySpeed: 3000
+};
+export default class Autoplay extends EventEmitter {
+	constructor(slider) {
+		super();
+		this.slider = slider;
+		this.onVisibilityChange = this.onVisibilityChange.bind(this);
+		this.onMouseEnter = this.onMouseEnter.bind(this);
+		this.onMouseLeave = this.onMouseLeave.bind(this);
+	}
+	init() {
+		this._bindEvents();
+		return this;
+	}
+	_bindEvents() {
+		document.addEventListener('visibilitychange', this.onVisibilityChange);
+		if (this.slider.options.pauseOnHover) {
+			this.slider.container.addEventListener(pointerEnter, this.onMouseEnter);
+			this.slider.container.addEventListener(pointerLeave, this.onMouseLeave);
+		}
+	}
+	_unbindEvents() {
+		document.removeEventListener('visibilitychange', this.onVisibilityChange);
+		this.slider.container.removeEventListener(pointerEnter, this.onMouseEnter);
+		this.slider.container.removeEventListener(pointerLeave, this.onMouseLeave);
+	}
+	start() {
+		this.stop();
+		if (this.slider.options.autoplay) {
+			this.emit('start', this);
+			this._interval = setInterval(() => {
+				if (!(this._hovering && this.slider.options.pauseOnHover)) {
+					if (!this.slider.options.centerMode && this.slider.state.next >= this.slider.state.length - this.slider.slidesToShow && !this.slider.options.loop && !this.slider.options.infinite) {
+						this.stop();
+					} else {
+						this.slider.next();
+					}
+				}
+			}, this.slider.options.autoplaySpeed);
+		}
+	}
+	stop() {
+		this._interval = clearInterval(this._interval);
+		this.emit('stop', this);
+	}
+	pause(speed = 0) {
+		if (this.paused) {
+			return;
+		}
+		if (this.timer) {
+			this.stop();
+		}
+		this.paused = true;
+		if (speed === 0) {
+			this.paused = false;
+			this.start();
+		} else {
+			this.slider.on('transition:end', () => {
+				if (!this) {
+					return;
+				}
+				this.paused = false;
+				if (!this.run) {
+					this.stop();
+				} else {
+					this.start();
+				}
+			});
+		}
+	}
+	onVisibilityChange(e) {
+		if (document.hidden) {
+			this.stop();
+		} else {
+			this.start();
+		}
+	}
+	onMouseEnter(e) {
+		this._hovering = true;
+		if (this.slider.options.pauseOnHover) {
+			this.pause();
+		}
+	}
+	onMouseLeave(e) {
+		this._hovering = false;
+		if (this.slider.options.pauseOnHover) {
+			this.pause();
+		}
+	}
+}