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

intia-theme 0.1.0 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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();
+		}
+	}
+}