Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

refactored and commented

  • Loading branch information...
commit 3aea31be8dee3808b743a80c19183ca78cb02fad 1 parent 13c1573
@4nd3rs authored
View
2  WURFL.php
@@ -5,6 +5,8 @@
$config = new WurflCloud_Client_Config();
// Set your WURFL Cloud API Key (add your own key)
//$config->api_key = '12345:abcdefgabcdefgabcdefgabcdefg';
+
+//This file contains my own API key and is not in the Git repo
include "fragments/WURFLKey.php";
// Create the WURFL Cloud Client
$client = new WurflCloud_Client_Client($config);
View
2  footer.php
@@ -20,7 +20,7 @@
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script src="js/swipe.min.js"></script>
+<script src="js/swipe.js"></script>
<script>
if (Modernizr.csstransforms) {
var slider = new Swipe(document.getElementById('slider'));
View
10 fragments/archive.php
@@ -1,8 +1,8 @@
<h2>Resources</h2>
<ul>
- <li><a href="#">Original RESS article</a></li>
- <li><a href="#">Twitter Bootstrap</a></li>
- <li><a href="#">Scientiamobile WURFL cloud offering</a></li>
- <li><a href="#">Modernizr</a></li>
- <li><a href="#">Swipe.js</a></li>
+ <li><a href="http://www.lukew.com/ff/entry.asp?1392">Original RESS article</a></li>
+ <li><a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a></li>
+ <li><a href="http://scientiamobile.com">Scientiamobile WURFL cloud offering</a></li>
+ <li><a href="htp://modernizr.com">Modernizr</a></li>
+ <li><a href="https://github.com/bradbirdsall/Swipe">Swipe.js</a></li>
</ul>
View
1  fragments/facebook.php
@@ -6,4 +6,5 @@
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=260414847374235";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
+
<div class="fb-like-box" data-href="https://www.facebook.com/netmag" data-width="" data-show-faces="true" data-stream="true" data-header="true"></div>
View
1  header.php
@@ -61,7 +61,6 @@
?>
</div>
-
</div>
</div>
View
6 index.php
@@ -12,15 +12,13 @@
<div class="span4">
<?php include "fragments/archive.php"?>
- <?php
- if ($RESS["width"] >= 768) {
- ?>
+ <?php if ($RESS["width"] >= 768) { ?>
<div class="max-768">
<h2>Social</h2>
<?php include "fragments/twitter-search.php"?>
<?php include "fragments/facebook.php"?>
</div>
- <?php } ?>
+ <?php}?>
</div>
</div>
View
272 js/swipe.js
@@ -0,0 +1,272 @@
+/*
+ * Swipe 1.0
+ *
+ * Brad Birdsall, Prime
+ * Copyright 2011, Licensed GPL & MIT
+ *
+*/
+
+window.Swipe = function(element, options) {
+
+ // return immediately if element doesn't exist
+ if (!element) return null;
+
+ var _this = this;
+
+ // retreive options
+ this.options = options || {};
+ this.index = this.options.startSlide || 0;
+ this.speed = this.options.speed || 300;
+ this.callback = this.options.callback || function() {};
+ this.delay = this.options.auto || 0;
+
+ // reference dom elements
+ this.container = element;
+ this.element = this.container.children[0]; // the slide pane
+
+ // static css
+ this.container.style.overflow = 'hidden';
+ this.element.style.listStyle = 'none';
+
+ // trigger slider initialization
+ this.setup();
+
+ // begin auto slideshow
+ this.begin();
+
+ // add event listeners
+ if (this.element.addEventListener) {
+ this.element.addEventListener('touchstart', this, false);
+ this.element.addEventListener('touchmove', this, false);
+ this.element.addEventListener('touchend', this, false);
+ this.element.addEventListener('webkitTransitionEnd', this, false);
+ this.element.addEventListener('msTransitionEnd', this, false);
+ this.element.addEventListener('oTransitionEnd', this, false);
+ this.element.addEventListener('transitionend', this, false);
+ window.addEventListener('resize', this, false);
+ }
+
+};
+
+Swipe.prototype = {
+
+ setup: function() {
+
+ // get and measure amt of slides
+ this.slides = this.element.children;
+ this.length = this.slides.length;
+
+ // return immediately if their are less than two slides
+ if (this.length < 2) return null;
+
+ // determine width of each slide
+ this.width = this.container.getBoundingClientRect().width;
+ console.log("measured width: " + this.width);
+
+ // return immediately if measurement fails
+ if (!this.width) return null;
+
+ // hide slider element but keep positioning during setup
+ this.container.style.visibility = 'hidden';
+
+ // dynamic css
+ this.element.style.width = (this.slides.length * this.width) + 'px';
+ var index = this.slides.length;
+ while (index--) {
+ var el = this.slides[index];
+ el.style.width = this.width + 'px';
+ el.style.display = 'table-cell';
+ el.style.verticalAlign = 'top';
+ var images = el.getElementsByTagName("img");
+
+ for(var i in images){
+ console.log("images: " + images[i]);
+ console.log("images style: " + images[i].style);
+ if(images[i].style !== undefined){
+ images[i].style.width = this.width + 'px';
+ }
+ }
+ }
+
+ // set start position and force translate to remove initial flickering
+ this.slide(this.index, 0);
+
+ // show slider element
+ this.container.style.visibility = 'visible';
+
+ },
+
+ slide: function(index, duration) {
+
+ var style = this.element.style;
+
+ // set duration speed (0 represents 1-to-1 scrolling)
+ style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = duration + 'ms';
+
+ // translate to given index position
+ style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';
+ style.msTransform = style.MozTransform = style.OTransform = 'translateX(' + -(index * this.width) + 'px)';
+
+ // set new index to allow for expression arguments
+ this.index = index;
+
+ },
+
+ getPos: function() {
+
+ // return current index position
+ return this.index;
+
+ },
+
+ prev: function(delay) {
+
+ // cancel next scheduled automatic transition, if any
+ this.delay = delay || 0;
+ clearTimeout(this.interval);
+
+ // if not at first slide
+ if (this.index) this.slide(this.index-1, this.speed);
+
+ },
+
+ next: function(delay) {
+
+ // cancel next scheduled automatic transition, if any
+ this.delay = delay || 0;
+ clearTimeout(this.interval);
+
+ if (this.index < this.length - 1) this.slide(this.index+1, this.speed); // if not last slide
+ else this.slide(0, this.speed); //if last slide return to start
+
+ },
+
+ begin: function() {
+
+ var _this = this;
+
+ this.interval = (this.delay)
+ ? setTimeout(function() {
+ _this.next(_this.delay);
+ }, this.delay)
+ : 0;
+
+ },
+
+ stop: function() {
+ this.delay = 0;
+ clearTimeout(this.interval);
+ },
+
+ resume: function() {
+ this.delay = this.options.auto || 0;
+ this.begin();
+ },
+
+ handleEvent: function(e) {
+ switch (e.type) {
+ case 'touchstart': this.onTouchStart(e); break;
+ case 'touchmove': this.onTouchMove(e); break;
+ case 'touchend': this.onTouchEnd(e); break;
+ case 'webkitTransitionEnd':
+ case 'msTransitionEnd':
+ case 'oTransitionEnd':
+ case 'transitionend': this.transitionEnd(e); break;
+ case 'resize': this.setup(); break;
+ }
+ },
+
+ transitionEnd: function(e) {
+
+ if (this.delay) this.begin();
+
+ this.callback(e, this.index, this.slides[this.index]);
+
+ },
+
+ onTouchStart: function(e) {
+
+ this.start = {
+
+ // get touch coordinates for delta calculations in onTouchMove
+ pageX: e.touches[0].pageX,
+ pageY: e.touches[0].pageY,
+
+ // set initial timestamp of touch sequence
+ time: Number( new Date() )
+
+ };
+
+ // used for testing first onTouchMove event
+ this.isScrolling = undefined;
+
+ // reset deltaX
+ this.deltaX = 0;
+
+ // set transition time to 0 for 1-to-1 touch movement
+ this.element.style.webkitTransitionDuration = 0;
+
+ },
+
+ onTouchMove: function(e) {
+
+ // ensure swiping with one touch and not pinching
+ if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
+
+ this.deltaX = e.touches[0].pageX - this.start.pageX;
+
+ // determine if scrolling test has run - one time test
+ if ( typeof this.isScrolling == 'undefined') {
+ this.isScrolling = !!( this.isScrolling || Math.abs(this.deltaX) < Math.abs(e.touches[0].pageY - this.start.pageY) );
+ }
+
+ // if user is not trying to scroll vertically
+ if (!this.isScrolling) {
+
+ // prevent native scrolling
+ e.preventDefault();
+
+ // cancel slideshow
+ clearTimeout(this.interval);
+
+ // increase resistance if first or last slide
+ this.deltaX =
+ this.deltaX /
+ ( (!this.index && this.deltaX > 0 // if first slide and sliding left
+ || this.index == this.length - 1 // or if last slide and sliding right
+ && this.deltaX < 0 // and if sliding at all
+ ) ?
+ ( Math.abs(this.deltaX) / this.width + 1 ) // determine resistance level
+ : 1 ); // no resistance if false
+
+ // translate immediately 1-to-1
+ this.element.style.webkitTransform = 'translate3d(' + (this.deltaX - this.index * this.width) + 'px,0,0)';
+
+ }
+
+ },
+
+ onTouchEnd: function(e) {
+
+ // determine if slide attempt triggers next/prev slide
+ var isValidSlide =
+ Number(new Date()) - this.start.time < 250 // if slide duration is less than 250ms
+ && Math.abs(this.deltaX) > 20 // and if slide amt is greater than 20px
+ || Math.abs(this.deltaX) > this.width/2, // or if slide amt is greater than half the width
+
+ // determine if slide attempt is past start and end
+ isPastBounds =
+ !this.index && this.deltaX > 0 // if first slide and slide amt is greater than 0
+ || this.index == this.length - 1 && this.deltaX < 0; // or if last slide and slide amt is less than 0
+
+ // if not scrolling vertically
+ if (!this.isScrolling) {
+
+ // call slide function with slide end value based on isValidSlide and isPastBounds tests
+ this.slide( this.index + ( isValidSlide && !isPastBounds ? (this.deltaX < 0 ? 1 : -1) : 0 ), this.speed );
+
+ }
+
+ }
+
+};
View
69 js/swipe.min.js
@@ -4,5 +4,70 @@
* Brad Birdsall, Prime
* Copyright 2011, Licensed GPL & MIT
*
-*/
-window.Swipe=function(a,b){if(!a)return null;var c=this;this.options=b||{},this.index=this.options.startSlide||0,this.speed=this.options.speed||300,this.callback=this.options.callback||function(){},this.delay=this.options.auto||0,this.container=a,this.element=this.container.children[0],this.container.style.overflow="hidden",this.element.style.listStyle="none",this.setup(),this.begin(),this.element.addEventListener&&(this.element.addEventListener("touchstart",this,!1),this.element.addEventListener("touchmove",this,!1),this.element.addEventListener("touchend",this,!1),this.element.addEventListener("webkitTransitionEnd",this,!1),this.element.addEventListener("msTransitionEnd",this,!1),this.element.addEventListener("oTransitionEnd",this,!1),this.element.addEventListener("transitionend",this,!1),window.addEventListener("resize",this,!1))},Swipe.prototype={setup:function(){this.slides=this.element.children,this.length=this.slides.length;if(this.length<2)return null;this.width=this.container.getBoundingClientRect().width;if(!this.width)return null;this.container.style.visibility="hidden",this.element.style.width=this.slides.length*this.width+"px";var a=this.slides.length;while(a--){var b=this.slides[a];b.style.width=this.width+"px",b.style.display="table-cell",b.style.verticalAlign="top"}this.slide(this.index,0),this.container.style.visibility="visible"},slide:function(a,b){var c=this.element.style;c.webkitTransitionDuration=c.MozTransitionDuration=c.msTransitionDuration=c.OTransitionDuration=c.transitionDuration=b+"ms",c.webkitTransform="translate3d("+ -(a*this.width)+"px,0,0)",c.msTransform=c.MozTransform=c.OTransform="translateX("+ -(a*this.width)+"px)",this.index=a},getPos:function(){return this.index},prev:function(a){this.delay=a||0,clearTimeout(this.interval),this.index&&this.slide(this.index-1,this.speed)},next:function(a){this.delay=a||0,clearTimeout(this.interval),this.index<this.length-1?this.slide(this.index+1,this.speed):this.slide(0,this.speed)},begin:function(){var a=this;this.interval=this.delay?setTimeout(function(){a.next(a.delay)},this.delay):0},stop:function(){this.delay=0,clearTimeout(this.interval)},resume:function(){this.delay=this.options.auto||0,this.begin()},handleEvent:function(a){switch(a.type){case"touchstart":this.onTouchStart(a);break;case"touchmove":this.onTouchMove(a);break;case"touchend":this.onTouchEnd(a);break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"transitionend":this.transitionEnd(a);break;case"resize":this.setup()}},transitionEnd:function(a){this.delay&&this.begin(),this.callback(a,this.index,this.slides[this.index])},onTouchStart:function(a){this.start={pageX:a.touches[0].pageX,pageY:a.touches[0].pageY,time:Number(new Date)},this.isScrolling=undefined,this.deltaX=0,this.element.style.webkitTransitionDuration=0},onTouchMove:function(a){if(a.touches.length>1||a.scale&&a.scale!==1)return;this.deltaX=a.touches[0].pageX-this.start.pageX,typeof this.isScrolling=="undefined"&&(this.isScrolling=!!(this.isScrolling||Math.abs(this.deltaX)<Math.abs(a.touches[0].pageY-this.start.pageY))),this.isScrolling||(a.preventDefault(),clearTimeout(this.interval),this.deltaX=this.deltaX/(!this.index&&this.deltaX>0||this.index==this.length-1&&this.deltaX<0?Math.abs(this.deltaX)/this.width+1:1),this.element.style.webkitTransform="translate3d("+(this.deltaX-this.index*this.width)+"px,0,0)")},onTouchEnd:function(a){var b=Number(new Date)-this.start.time<250&&Math.abs(this.deltaX)>20||Math.abs(this.deltaX)>this.width/2,c=!this.index&&this.deltaX>0||this.index==this.length-1&&this.deltaX<0;this.isScrolling||this.slide(this.index+(b&&!c?this.deltaX<0?1:-1:0),this.speed)}}
+ */
+window.Swipe = function (a, b) {
+ if (!a)return null;
+ var c = this;
+ this.options = b || {}, this.index = this.options.startSlide || 0, this.speed = this.options.speed || 300, this.callback = this.options.callback || function () {
+ }, this.delay = this.options.auto || 0, this.container = a, this.element = this.container.children[0], this.container.style.overflow = "hidden", this.element.style.listStyle = "none", this.setup(), this.begin(), this.element.addEventListener && (this.element.addEventListener("touchstart", this, !1), this.element.addEventListener("touchmove", this, !1), this.element.addEventListener("touchend", this, !1), this.element.addEventListener("webkitTransitionEnd", this, !1), this.element.addEventListener("msTransitionEnd", this, !1), this.element.addEventListener("oTransitionEnd", this, !1), this.element.addEventListener("transitionend", this, !1), window.addEventListener("resize", this, !1))
+}, Swipe.prototype = {setup:function () {
+ this.slides = this.element.children, this.length = this.slides.length;
+ if (this.length < 2)return null;
+ this.width = this.container.getBoundingClientRect().width;
+ if (!this.width)return null;
+ this.container.style.visibility = "hidden", this.element.style.width = this.slides.length * this.width + "px";
+ var a = this.slides.length;
+ while (a--) {
+ var b = this.slides[a];
+ b.style.width = this.width + "px", b.style.display = "table-cell", b.style.verticalAlign = "top"
+ }
+ this.slide(this.index, 0), this.container.style.visibility = "visible"
+}, slide:function (a, b) {
+ var c = this.element.style;
+ c.webkitTransitionDuration = c.MozTransitionDuration = c.msTransitionDuration = c.OTransitionDuration = c.transitionDuration = b + "ms", c.webkitTransform = "translate3d(" + -(a * this.width) + "px,0,0)", c.msTransform = c.MozTransform = c.OTransform = "translateX(" + -(a * this.width) + "px)", this.index = a
+}, getPos:function () {
+ return this.index
+}, prev:function (a) {
+ this.delay = a || 0, clearTimeout(this.interval), this.index && this.slide(this.index - 1, this.speed)
+}, next:function (a) {
+ this.delay = a || 0, clearTimeout(this.interval), this.index < this.length - 1 ? this.slide(this.index + 1, this.speed) : this.slide(0, this.speed)
+}, begin:function () {
+ var a = this;
+ this.interval = this.delay ? setTimeout(function () {
+ a.next(a.delay)
+ }, this.delay) : 0
+}, stop:function () {
+ this.delay = 0, clearTimeout(this.interval)
+}, resume:function () {
+ this.delay = this.options.auto || 0, this.begin()
+}, handleEvent:function (a) {
+ switch (a.type) {
+ case"touchstart":
+ this.onTouchStart(a);
+ break;
+ case"touchmove":
+ this.onTouchMove(a);
+ break;
+ case"touchend":
+ this.onTouchEnd(a);
+ break;
+ case"webkitTransitionEnd":
+ case"msTransitionEnd":
+ case"oTransitionEnd":
+ case"transitionend":
+ this.transitionEnd(a);
+ break;
+ case"resize":
+ this.setup()
+ }
+}, transitionEnd:function (a) {
+ this.delay && this.begin(), this.callback(a, this.index, this.slides[this.index])
+}, onTouchStart:function (a) {
+ this.start = {pageX:a.touches[0].pageX, pageY:a.touches[0].pageY, time:Number(new Date)}, this.isScrolling = undefined, this.deltaX = 0, this.element.style.webkitTransitionDuration = 0
+}, onTouchMove:function (a) {
+ if (a.touches.length > 1 || a.scale && a.scale !== 1)return;
+ this.deltaX = a.touches[0].pageX - this.start.pageX, typeof this.isScrolling == "undefined" && (this.isScrolling = !!(this.isScrolling || Math.abs(this.deltaX) < Math.abs(a.touches[0].pageY - this.start.pageY))), this.isScrolling || (a.preventDefault(), clearTimeout(this.interval), this.deltaX = this.deltaX / (!this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0 ? Math.abs(this.deltaX) / this.width + 1 : 1), this.element.style.webkitTransform = "translate3d(" + (this.deltaX - this.index * this.width) + "px,0,0)")
+}, onTouchEnd:function (a) {
+ var b = Number(new Date) - this.start.time < 250 && Math.abs(this.deltaX) > 20 || Math.abs(this.deltaX) > this.width / 2, c = !this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0;
+ this.isScrolling || this.slide(this.index + (b && !c ? this.deltaX < 0 ? 1 : -1 : 0), this.speed)
+}}
Please sign in to comment.
Something went wrong with that request. Please try again.