mudasobwa-slider.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-ajax/core-ajax.html">
<link rel="import" href="../polymer-fontawesome/polymer-fontawesome.html">

<script src="history.js/scripts/bundled/html4+html5/native.history.js"></script>

<!--
Core element for handling content, being shown by slider. Performs
ajax requests against server, expects an answer in the form

    {
      text: '',
      caption: '',
      prev: { http: '', json: '' },
      next: { http: '', json: '' }
    }

Loads the unloaded parts from the server, handles cache for already
loaded items.

**not visible**

##### Example

    <mudasobwa-content-loader id="content"
                              url="{{ url }}"
                              article="{{ article }}"
                              prefetch>
    </mudasobwa-content-loader>

@element mudasobwa-content-loader
@blurb Core element for handling content.
@status alpha
@homepage http://mudasobwa.github.io/mudasobwa-slider
-->
<polymer-element name="mudasobwa-content-loader" attributes="url href article caption prefetch next prev stateable">
	<template>
		<style>
			:host { display: none; }
		</style>

		<core-ajax id="current"
							 url="{{ url }}"
							 on-core-response="{{ contentLoaded }}"
							 handleAs="json">
		</core-ajax>
		<template id="prevnext" if="{{ prefetch }}">
			<mudasobwa-content-loader id="prev" url="{{ prev }}"></mudasobwa-content-loader>
			<mudasobwa-content-loader id="next" url="{{ next }}"></mudasobwa-content-loader>
		</template>
	</template>

	<script>
		Polymer('mudasobwa-content-loader', {
			/**
			 * The `changed` event fired whether content was reloaded. It will not be fired
			 *   unless `stateable` attribute is set.
			 *
			 * @event changed
			 */

			/**
			 * Nested elements are to load content only on the initial appearance.
			 *
			 * @property initialized
			 * @type bool
			 */
			initialized: false, // this is ugly

			created: function() {
				this.url = null;
				this.href = null;
				this.prefetch = false;
				this.article = '';
				this.caption = '';
				this.prev = null;
				this.next = null;
			},

			attached: function() {
				this.reload();
			},

			/**
			 * Forces reloading of content.
			 *
			 * @method reload
			 * @return {null} Returns nothing.
			 */
			reload: function() {
				if(typeof this.url === 'string') {
					this.$.current.go();
				}
			},

			/**
			 * Is being called on ajax core response. Handles the neste
			 *   `prev`/`next` elements’ content on first run.
			 *
			 * @method contentLoaded
			 * @return {null} Returns nothing.
			 */
			contentLoaded: function() {
				this.article = this.$.current.response.text;
				this.caption = this.$.current.response.caption;
				this.href = this.$.current.response.href;
				this.prev = this.$.current.response.prev;
				this.next = this.$.current.response.next;

				if(!this.initialized) {
					this.initialized = true;
					if(this.prefetch) {
						this.$.prev.reload();
						this.$.next.reload();
						if(typeof this.stateable !== "undefined") {
							this.saveState();
						}
					}
				}
			},

			/**
			 * Forces reloading of the main content basing on `prev`/`next` parameters.
			 *
			 * @method step
			 * @return {null} Returns nothing.
			 * @param {bool} forward loads `next` when `true`, `prev` otherwise
			 */
			step: function(forward) {
				this.url = ((true === forward) ? this.next: this.prev);
				this.reload();
			},

			/**
			 * Duplicates content and parameters from supplied element.
			 *
			 * @method dup
			 * @return {null} Returns nothing.
			 * @param {Object} other the element to copy data from.
			 */
			dup: function(other) {
				if(typeof other !== 'undefined') {
					var url = other.url;
					this.href = other.href;
					this.next = other.next;
					this.prev = other.prev;
					this.url = url; // this must be after next/prev setting (to prevent re-autosetting)
					this.caption = other.caption;
					this.article = other.article;
				} else {
					this.url = this.next = this.prev = this.caption = this.article = this.href = null;
				}
			},

			/**
			 * Fires `change` event when main url is changed.
			 *
			 * @method urlChanged
			 * @see changed
			 * @return {null} Returns nothing.
			 */
			urlChanged: function() {
				if(this.prefetch) {
					this.fire("changed", { url: this.url });
				}
			},

			/**
			 * Main handler.
			 *
			 * @method yo
			 * @return {null} Returns nothing.
			 * @param {bool} previous will change content to `prev` if true, to `next` otherwise
			 */
			yo: function(previous) {
				if(!this.prefetch) {
					this.step(previous !== true);
				} else {
					if(previous === true) {
						this.$.next.dup(this);
						this.dup(this.$.prev);
						this.$.prev.step(false);
					} else {
						this.$.prev.dup(this);
						this.dup(this.$.next);
						this.$.next.step(true);
					}
				}
				if(typeof this.stateable !== "undefined") {
					this.saveState();
				}
			},

			/**
			 * Saves current state in history.
			 */
			saveState: function() {
				if(this.url) {
					var _url = this.url;
					var _href = this.href;
					var _caption = this.caption;
					History.pushState({
						state: _href,
						url: _url,
						caption: _caption,
						sender: 'mudasobwa:yo'
					}, _caption, _href);
				}
			}
		});
	</script>
</polymer-element>

<!--
Opaque nifty button (used for `prev`/`next` navigation.
-->
<polymer-element name="opaque-button" noscript>
	<template>
		<style>
			:host {
				width: auto; height: auto;
				margin: 0; padding: 0;
				opacity: 0.5;
				transition: opacity 800ms ease-in-out;
				cursor: pointer;
			}
			:host(:hover) { opacity: 1; }
		</style>
		<content></content>
	</template>
</polymer-element>

<!--
Parser of incoming through json content. Mainly HTML copy-past.
-->
<polymer-element name="mudasobwa-parser" attributes="input url">
	<template>
		<style>
			:host {
				display: block;
			}
		</style>
		<shadow></shadow>
	</template>
	<script>
		Polymer('mudasobwa-parser', {
			inputChanged: function() {
				if (typeof this.input === 'string') {
					this.input = [this.input];
				}
				this.innerHTML = this.input.map(function(el) {
					return '<article>' + el + '</article>';
				}).join('<br><hr><br>');
			}
		});
	</script>
</polymer-element>

<!--
Base for all visual widgets. Loads content of previous/next articles asynchronously.

##### Example

    <mudasobwa-slider url='demo.html?0' stateable></mudasobwa-slider>

@element mudasobwa-slider
@see mudasobwa-content-loader
@blurb Element providing representation of json-loaded content.
@status alpha
@homepage http://mudasobwa.github.io/mudasobwa-slider
-->
<polymer-element name="mudasobwa-slider" attributes="url caption buttons previcon nexticon stateable">
	<template>
		<style>
			:host {
				opacity: 0.8;
				transition: opacity .5s, transform 1s;
			}
			#slider-container {
				display: -webkit-flex;
				display:         flex;
				-webkit-flex-flow: row;
				        flex-flow: row;
			}
			#slider-content {
				max-width: 860px;
				-webkit-flex: 3 1 60%;
								flex: 3 1 60%;
				-webkit-order: 2;
								order: 2;
			}
			#prevbtn-container, #nextbtn-container {
				width: 1em;
				-webkit-flex: 1 6 auto;
								flex: 1 6 auto;
			}
			#prevbtn-container {
				-webkit-order: 1;
								order: 1;
				text-align: left;
			}
			#nextbtn-container {
				-webkit-order: 3;
								order: 3;
				text-align: right;
			}
			@media all and (max-width: 640px) {
				#slider-container {
					-webkit-flex-flow: column;
									flex-flow: column;
									flex-direction: column;
				}
				#slider-content {
					-webkit-flex: none;
					flex: none;
					-webkit-order: 1;
					order: 1;
				}
				#nextbtn-container, #prevbtn-container {
					width: 100%; text-align: center;
				}
				#nextbtn-container {
					-webkit-order: 2;
					order: 2;
				}
				#prevbtn-container {
					-webkit-order: 3;
					order: 3;
				}
			}

		</style>
		<div id="slider-container">
			<div id="slider-content">
				<mudasobwa-content-loader id="content"
																	url="{{ url }}"
																	article="{{ article }}"
																	prefetch
																	stateable="{{ stateable }}"></mudasobwa-content-loader>
				<mudasobwa-parser id="placeholder" input="{{ article }}" url="{{ url }}"></mudasobwa-parser>
			</div>

			<template if="{{ buttons === 'prev' || buttons === 'both' }}">
				<div id="prevbtn-container">
					<opaque-button id="prevbtn"
												 on-mouseover="{{ buttonHover }}"
												 on-click="{{ buttonClick }}"><font-awesome icon="{{ previcon }}"></font-awesome></opaque-button>
				</div>
			</template>
			<template if="{{ buttons === 'next' || buttons === 'both' }}">
				<div id="nextbtn-container">
					<opaque-button id="nextbtn"
												 on-mouseover="{{ buttonHover }}"
												 on-click="{{ buttonClick }}"><font-awesome icon="{{ nexticon }}"></font-awesome></opaque-button>
				</div>
			</template>
		</div>
	</template>
	<script>
		Polymer('mudasobwa-slider', {
			created: function() {
				this.previcon = "angle-double-left";
				this.nexticon = "angle-double-right";
			},
			attached: function() {
				this.super();
				if(typeof this.stateable !== 'undefined') {
					var self = this;
					(function(window, undefined){
						History.Adapter.bind(window, 'statechange', function() {
							var state = History.getState();
							if(state.data['sender'] === 'mudasobwa:yo') {
								self.goto(state.data['url']);
							}
						});
					})(window);
				}
			},
			articleChanged: function() {
				this.caption = this.$.content.caption;
				if(typeof this.$.prevbtn !== 'undefined') {
					this.$.prevbtn.style.display = ('null' === String(this.$.content.prev)) ? 'none' : 'block';
				}
				if(typeof this.$.nextbtn !== 'undefined') {
					this.$.nextbtn.style.display = ('null' === String(this.$.content.next)) ? 'none' : 'block';
				}

				var root = this;
				while (root.parentNode) {
					root = root.parentNode;
				}
				root.caption = this.caption;
			},
			goto: function(url) {
				if(this.url !== url) {
					this.url = url;
					this.$.content.reload();
				}
			},
			buttonClick: function(event, detail, sender) {
				this.$.content.yo(sender.id === "prevbtn");
			},
			buttonHover: function(event, detail, sender) {
			}
		});
	</script>
</polymer-element>

<!--
Article stack representation. Shows

##### Example

    <mudasobwa-slider url='demo.html?0' stateable></mudasobwa-slider>

@element mudasobwa-article
@see mudasobwa-content-loader
@blurb Element providing representation of json-loaded content.
@status alpha
@homepage http://mudasobwa.github.io/mudasobwa-slider
-->
<polymer-element name="mudasobwa-article"  extends="mudasobwa-slider">
	<template>
		<style>
			:host { display: block; }
			polyfill-next-selector { content: 'font-awesome'; }
			::content font-awesome { font-size: 48px; }
		</style>
		<shadow></shadow>
	</template>
	<script>
		Polymer('mudasobwa-article', {
		});
	</script>
</polymer-element>