JSFiddle - React, Tailwind, and code Playground

by damngoto

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="wrapper">
    <div id="el"></div>
</div>
<script id="main"  type="text/plain" >
    <pager current="20" total="999" size="10" width="3"></pager>
</script>

JavaScript

(function(global, factory) {
	'use strict';
	// Common JS (i.e. browserify) environment
	if (typeof module !== 'undefined' && module.exports && typeof require === 'function') {
		factory(require('ractive'));
	}
	// AMD?
	else if (typeof define === 'function' && define.amd) {
		define(['ractive'], factory);
	}
	// browser global
	else if (global.Ractive) {
		factory(global.Ractive);
	} else {
		throw new Error('Could not find Ractive! It must be loaded before the ractive-pager plugin');
	}
}(typeof window !== 'undefined' ? window : this, function(Ractive) {

	/*
	 * plugin template based on bootstrap and fontawsome
	 */
	var template = function() {
		/*
		<ul class="pagination">
			{{#if current == 1}}
			<li class="first disabled">
				<a href="javascript:;" class="disabled">
					<i class="fa fa-step-backward"></i>
				</a>
			</li>
		  <li class="prev disabled">
				<a href="javascript:;">
					<i class="fa fa-backward"></i>
				</a>
			</li>
			{{/if}}

			{{#if current != 1}}
			<li class="first">
				<a href="javascript:;" on-click="goto:1">
					<i class="fa fa-step-backward"></i>
				</a>
			</li>
		  <li class="prev">
				<a href="javascript:;" on-click="goto:{{current - 1}}">
					<i class="fa fa-backward"></i>
				</a>
			</li>
			{{/if}}


			{{#pages}}
			<li class="{{current === . ? 'active' : ''}}">
				<a href="javascript:;"  on-click="goto:{{.}}">{{.}}</a>
			</li>
			{{/pages}}


			{{#if current == totalPage}}
			<li class="next disabled">
				<a href="javascript:;">
					<i class="fa fa-forward"></i>
				</a>
			</li>
			<li class="last disabled">
				<a href="javascript:;"><i class="fa fa-step-forward"></i></a>
			</li>
			{{/if}}

			{{#if current != totalPage}}
			<li class="next">
				<a href="javascript:;"  on-click="goto:{{current + 1}}"><i class="fa fa-forward"></i></a>
			</li>
			<li class="last">
				<a href="javascript:;" on-click="goto:{{totalPage}}"><i class="fa fa-step-forward"></i></a>
			</li>
			{{/if}}
		</ul>
	*/
	}

	var...