Initial commit

build/build

@@ -0,0 +1,34 @@
+#!/usr/bin/php
+<?php
+	/**
+	 * Javascript Build Process
+	 *
+	 * @author Joe Lambert
+	 * @copyright Joe Lambert, 5 May, 2011
+	 **/
+
+	$xml = simplexml_load_file(dirname(__FILE__)."/build.xml");
+
+	$docroot = $xml->docroot ? $xml->docroot : "./";
+
+	$version = $xml->version ? $xml->version : "1.0";
+
+	$outputname = $xml->outputname ? $xml->outputname : "javascript";
+
+	$concat = "";
+
+	// Concat javascript files
+	foreach($xml->files->file as $file)
+		$concat .= file_get_contents(dirname(__FILE__)."/$docroot/$file").";\n\n";
+
+	// Process any replacements
+	$concat = str_replace('@VERSION', $version, $concat);
+
+	// Save to disk
+	$max_path = dirname(__FILE__)."/$docroot/$outputname.js";
+	file_put_contents($max_path, $concat);
+
+	// Compile and minify with Google Closure Compiler
+	$min_path = dirname(__FILE__)."/$docroot/$outputname.min.js";
+	system("java -jar ".dirname(__FILE__)."/google-compiler-20100917.jar --js $max_path --warning_level QUIET --js_output_file $min_path");
+?>

build/build.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<build>
+	<version>1.1</version>
+	<outputname>flux</outputname>
+	<docroot>../js/</docroot>
+	<files>
+		<file>src/flux.slider.js</file>
+		<file>src/flux.browser.js</file>
+		<file>src/flux.transitions.js</file>
+		<file>src/flux.transitions.bars.js</file>
+		<file>src/flux.transitions.blinds.js</file>
+		<file>src/flux.transitions.zip.js</file>
+		<file>src/flux.transitions.blocks.js</file>
+		<file>src/flux.transitions.concentric.js</file>
+		<file>src/flux.transitions.warp.js</file>
+	</files>
+</build>

change.log

@@ -0,0 +1,8 @@
+1.1
+-----------------
+Added support for Zepto.js as a drop in replacement for jQuery
+Added detection of 3d CSS effects to ensure hardware acceleration is used where possible
+
+1.0
+-----------------
+Initial release

compass/config.rb

@@ -0,0 +1,9 @@
+# Require any additional compass plugins here.
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "../css"
+sass_dir = "src"
+images_dir = "img"
+output_style = :compressed
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true

compass/src/demo.scss

@@ -0,0 +1,108 @@
+ /* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";
+@import "compass/css3";
+
+*
+{
+	@include box-sizing('border-box');
+}
+
+html
+{
+	background: #2F2F2F;
+}
+
+body
+{
+	//@include linear-gradient(color-stops(#333, #000));
+	background: #2F2F2F;
+	min-height: 100%;
+	font-family: helvetica, arial, sans-serif;
+
+ 	section.container
+	{
+		width: 790px;
+		margin: 40px auto;
+
+		h1
+		{
+			color: #DDD;
+			font-size: 3em;
+			font-weight: bold;
+			text-align: center;
+			text-shadow: 0 1px 0px #000;
+			text-transform: lowercase;
+			margin-bottom: 0.2em;
+		}
+
+		h2
+		{
+			font-size: 0.8em;
+			color: #666;
+			text-align: center;
+			margin-bottom: 4em;
+			text-shadow: 0 1px 0px rgba(#000, 0.5);
+		}
+
+		div#slider
+		{
+			@include border-radius(3px);
+			@include box-sizing('content-box');
+			padding: 20px;
+			background: rgba(#000, 0.3);
+
+			-webkit-box-shadow: 0 1px 0 rgba(#FFF, 0.1), 0 0 8px rgba(#000, 0.9) inset;
+
+			div.fluxslider
+			{
+				div.images
+				{
+					width: 100%;
+					border: 1px solid rgba(#FFF, 0.1);
+					@include box-sizing('content-box');
+				}
+
+				ul.pagination
+				{
+					@include box-sizing('content-box');
+					padding: 10px 0 !important;
+					overflow: hidden;
+
+					li
+					{
+						text-indent: 10000px;
+						height: 8px;
+						width: 8px;
+						@include border-radius(10px);
+						background: rgba(#000, 0.6);
+						-webkit-box-shadow: 0 1px 0 rgba(#FFF, 0.1);
+
+						&.current
+						{
+							background: rgba(#FFF, 0.2);
+						}
+					}
+				}
+			}
+		}
+
+		footer
+		{
+			width: 100%;
+			text-align: center;
+			font-size: 0.7em;
+			//text-shadow: 0 1px 0px rgba(#000, 0.5);
+			margin-top: 4em;
+			color: #666;
+
+			p
+			{
+				margin-bottom: 2em;
+			}
+		}
+	}
+}

compass/src/style.scss

@@ -0,0 +1 @@
+@import 'demo';

demo.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset=utf-8 />
+		<title>Flux Slider Demo &#0187; Hardware accelerated image transitions using CSS3</title>
+		<!--[if lte IE 8]>
+ 			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+		<![endif]-->
+		<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
+		<script src="js/zepto/zepto.js" type="text/javascript" charset="utf-8"></script>
+		<script src="js/flux.min.js" type="text/javascript" charset="utf-8"></script>
+		<script type="text/javascript" charset="utf-8">
+			$(function(){
+				window.f = new flux.slider('#slider', {
+					pagination: true
+				});
+			});
+		</script>
+	</head>
+	<body>
+		<section class="container">
+			<h1><span class="flux">Flux</span> <span class="slider">Slider</span></h1>
+			<h2>Hardware accelerated image transitions using CSS3.</h2>
+			<div id="slider">
+				<img src="img/avatar.jpg" alt="" />
+				<img src="img/ironman.jpg" alt="" />
+				<img src="img/tron.jpg" alt="" />
+				<img src="img/greenhornet.jpg" alt="" />
+			</div>
+			<footer>
+				<p>Flux Slider &copy; Copyright 2011 Joe Lambert. All Rights Reserved.</p>
+				<img src="img/html5.png" alt="HTML5" width="35px" />
+			</footer>
+		</section>
+	</body>
+</html>