Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fixing conflicts

  • Loading branch information...
commit c834bd5a3f20958ec7aaefb235bcc742821e8b67 2 parents 72e7bc1 + 15e63f7
@getdave authored
View
8 css/protoshow.css 100644 → 100755
@@ -36,6 +36,14 @@
color:#fff;
}
+.proto-progress-timer {
+ position: absolute;
+ top: 7px;
+ right: 7px;
+ z-index: 9999;
+}
+
+
/* TRANSITION SLIDE
------------------------------------------------*/
View
21 img/timer
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ width="28.181629"
+ height="28.181629"
+ id="svg3845">
+ <g
+ transform="translate(-288.76632,-332.55708)"
+ id="layer1">
+ <path
+ d="M 751.0484,397.78333 A 17.67767,17.67767 0 1 1 733.37073,415.461"
+ transform="matrix(0.68395976,0,0,0.68395976,-210.82975,62.489294)"
+ id="path3022"
+ style="fill:none;stroke:#ffffff;stroke-width:5.84829712;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+ </g>
+</svg>
View
12 index.html 100644 → 100755
@@ -39,19 +39,9 @@
<li class="slide" data-slide-interval=""><img src="img/slide03.jpg" alt="Mountain reflections - &copy; David Smith" /></li>
<li class="slide" data-slide-interval=""><img src="img/slide04.jpg" alt="Leaves in Singapore - &copy; David Smith" /></li>
</ul>
-
- <!-- <ul class="proto-controls">
- <li class="start-stop"><a href="#" title="Pause the show">Pause</a></li>
- <li class="backward"><a href="#" title="Go to Previous slide and play backwards">Previous</a></li>
- <li class="forward"><a href="#" title="Go to Next slide and play forwards">Next</a></li>
- </ul> -->
-
-
-
-
-
</div>
+
</body>
</html>
View
0  js/site.js 100644 → 100755
File mode changed
View
183 protoshow.js
@@ -1,6 +1,6 @@
/* ProtoShow JavaScript slide show,
- * v 0.8 (beta) - 16/09/11
- * Copyright(c) 2011 David Smith (web: http://www.aheadcreative.com; twitter: @get_dave)
+ * v 0.9 (beta) - 24/02/12
+ * Copyright(c) 2012 David Smith (web: http://www.aheadcreative.com; twitter: @get_dave)
*
* This work is licenced under the Creative Commons Attribution-No Derivative Works 3.0 Unported License.
* http://creativecommons.org/licenses/by-nd/3.0/
@@ -14,7 +14,7 @@
if(typeof Prototype=='undefined' || typeof Scriptaculous =='undefined') {
- throw("Protoshow.js requires the Prototype & Scriptaculous JavaScript framework");
+ throw("Protoshow.js requires the Prototype & Scriptaculous JavaScript frameworks");
} else {
var protoShow = Class.create({
@@ -41,7 +41,9 @@ var protoShow = Class.create({
captions : false,
pauseOnHover : false,
keyboardControls : true,
- fireEvents : true
+ fireEvents : true,
+ progressTimer : true,
+ swipeEvents : true
}, options || {}); // We use Prototype's Object.extend() to overwrite defaults with user preferences
@@ -64,7 +66,8 @@ var protoShow = Class.create({
this.stopText = this.options.stopText;
this.mode = this[this.options.mode]; // Get play "mode" (forward, backward, random...etc)
this.autoPlay = this.options.autoPlay;
-
+ this.progressTimer = this.options.progressTimer;
+ this.showUniqueID = element; // get a unique ID based on the id attr of the show element
@@ -88,8 +91,12 @@ var protoShow = Class.create({
this.setupNavigation();
this.setupCaptions();
this.setupKeyboardControls();
+ this.setupSwipeEvents();
this.stopOnHover();
+ //this.createTimer();
+ this.setupTimer();
+
// let's get things going!
this.play();
@@ -107,7 +114,8 @@ var protoShow = Class.create({
var _this = this;
this.running = true;
this.toggleMasterTimer(true);
- this.updateControls(true);
+ this.updateControls(true);
+
this.fireCustomEvent("protoShow:started");
},
@@ -115,20 +123,21 @@ var protoShow = Class.create({
// Completely stops the show and clears the master timer
var _this = this;
-
this.running = false;
this.toggleMasterTimer(false);
this.updateControls(false);
+
this.fireCustomEvent("protoShow:stopped");
},
toggleMasterTimer: function(bln) {
var _this = this;
-
+
if (bln) {
// Check if custom interval has been defined by user as data attribute in HTML
var slideInterval = (this.slideIntervals[this.currentSlideID]) ? this.slideIntervals[this.currentSlideID] : this.interval;
+ this.runProgressTimer();
// Set Master time which controls progress of show
this.masterTimer = new PeriodicalExecuter(function(pe) {
@@ -136,6 +145,7 @@ var protoShow = Class.create({
}, slideInterval/1000);
this.loopCount++;
} else {
+ this.stopProgressTimer();
_this.masterTimer && _this.masterTimer.stop();
_this.masterTimer = null;
}
@@ -189,7 +199,7 @@ var protoShow = Class.create({
this.toggleAnimating(true);
this.setNextIndex(next); // set this.nextSlideID correctly
- this.fireCustomEvent("protoShow:transitionStarted",transTime,direction);
+ this.fireCustomEvent("protoShow:transitionStarted",transTime,direction,_this.nextSlideID);
_this.updateNavigation(_this.currentSlideID, _this.nextSlideID);
this.transitionType(this.currentSlideEle,this.nextSlideEle, {
@@ -494,9 +504,11 @@ var protoShow = Class.create({
var _this = this;
document.observe('keydown', function(key) {
+
var keyCode = key.keyCode;
-
- if (keyCode === 37 || keyCode === 39) {
+
+ // stop arrow keys from working when focused on form items
+ if ( (!key.target.tagName.match('TEXTAREA|INPUT|SELECT')) && (keyCode === 37 || keyCode === 39) ) {
if (keyCode === 37) {
_this.previous();
} else if (keyCode === 39) {
@@ -507,17 +519,49 @@ var protoShow = Class.create({
}
});
},
+
+ setupSwipeEvents: function() {
+ var _this = this;
+ var touchStartX = false;
+
+ if (!this.options.swipeEvents) {
+ return false;
+ }
+
+
+ /* TOUCH START: Get and store the position of the initial touch */
+ this.element.observe('touchstart', function(e) {
+
+ touchStartX = e.targetTouches[0].clientX;
+ });
+
+
+ /* TOUCH MOVE: Called every time a user moves finger across the screen */
+ this.element.observe('touchmove', function(e) {
+ e.preventDefault();
+ if (touchStartX > e.targetTouches[0].clientX) {
+ _this.previous();
+ } else {
+ _this.next();
+ }
+ });
+
+ },
- fireCustomEvent: function(event_name,trans_time,direction) {
+
+
+ fireCustomEvent: function(event_name,trans_time,direction,slideID) {
if(this.options.fireEvents) {
var element = this.element;
element.fire(event_name, {
+ showID : this.showUniqueID,
transitionTime : trans_time,
- direction : direction
+ direction : direction,
+ slideID : slideID
});
}
},
-
+
/* UTILITY FUNCTIONS
------------------------------------------------*/
@@ -546,9 +590,7 @@ var protoShow = Class.create({
if(next === undefined) { // Ensure "next" has a value
next = this.currentSlideID+1;
}
-
-
-
+
// Ensure we're within bounds
if (next >= this.slidesLength) {
next = 0;
@@ -561,18 +603,111 @@ var protoShow = Class.create({
},
updateControls: function(status) {
- var _this = this;
- // Role: Updates the status of the Play/Pause button
- if (status) { // The show has been started so update the button to "Pause"
- this.controlStartStop.down('a').update(_this.stopText);
- } else {
- // The show has been stopped so update the button to "Play"
- this.controlStartStop.down('a').update(_this.playText);
+ if (this.options.controls) {
+ // Role: Updates the status of the Play/Pause button
+ var _this = this;
+
+ if (status) { // The show has been started so update the button to "Pause"
+ this.controlStartStop.down('a').update(_this.stopText);
+ } else {
+ // The show has been stopped so update the button to "Play"
+ this.controlStartStop.down('a').update(_this.playText);
+ }
}
},
+
+
+ setupTimer: function() {
+ // Role: creates the proto-progress-timer <canvas> element, gets 2D Context and inserta into DOM
+
+ this.progressTimerEle = document.createElement('canvas');
+ if (this.progressTimerEle.getContext && this.progressTimerEle.getContext('2d')) { // test for Canvas support
+ this.progressTimerEle.writeAttribute('class','proto-progress-timer');
+ this.progressTimerEle.width = 30;
+ this.progressTimerEle.height = 30;
+ this.element.insert(this.progressTimerEle,'bottom');
+ this.progressTimerCtx = this.progressTimerEle.getContext('2d');
+ } else {
+ this.progressTimer = false; // no canvas support
+ }
+ },
+
+
+ runProgressTimer: function() {
+ // Role: runs & controls the animation of the "progress timer"
+
+ var _this = this;
+
+
+ if (this.progressTimer) { // if user has set to use progress timer and the browser supports <canvas>
+
+
+ this.progressTimerEle.show();
+
+ // use Epoch time to ensure code executes in time specified
+ // borrowed from Emile JS http://script.aculo.us/downloads/emile.pdf
+ var start = (new Date).getTime();
+
+ // we want the timer to finish slightly before the slide transitions
+ // so we shorten the duration by 1/4
+ var duration = this.interval*0.75;
+ var finish = start+duration;
+ var angleStart = 0;
+
+
+ this.progressTimerPE = new PeriodicalExecuter(function(pe) {
+ _this.resetProgressTimer(); // clear the canvas ready for next segment
+ this.drawArc(_this.progressTimerCtx,0,360,'rgba(0,0,0,.2)'); // redraw the black bg circle
+
+ var time = (new Date).getTime();
+ var pos = time>finish ? 1 : (time-start)/duration;
+
+ // draw the arch passing in the ctx and the degress of the arch
+ this.drawArc(_this.progressTimerCtx,-5,Math.floor(( (360) * pos)),'rgba(255,255,255,.8)',true);
+
+ if( (!this.isPlaying()) || time>finish) { // if we are stopped or we are finished then stop the PE and fade the canvas out
+ pe.stop();
+ _this.progressTimerEle.fade({
+ duration: (_this.interval > 1000) ? (_this.interval/8)/1000 : 0.2,
+ afterFinish: function() {
+ _this.resetProgressTimer();
+ }
+ });
+ }
+ }.bind(this),duration/100000);
+ }
+ },
+
+
+ resetProgressTimer: function() {
+ this.progressTimerEle.width = this.progressTimerEle.width;
+ },
+
+ stopProgressTimer: function() {
+ this.resetProgressTimer();
+ clearInterval(this.progressTimerPE);
+ },
+
+ drawArc: function(canvasCtx,startAngle,endAngle,strokeStyle) {
+ // Role: utility function for drawing archs on <canvas> elements
+
+ var drawingArc = true;
+ var ctx = canvasCtx;
+
+ ctx.beginPath();
+ ctx.strokeStyle = strokeStyle;
+ ctx.lineCap = 'butt';
+ ctx.lineWidth = 4;
+
+ ctx.arc(15,15,10, (Math.PI/180)*(startAngle-90),(Math.PI/180)*(endAngle-90), false);
+ ctx.stroke();
+ var drawingArc = false;
+ },
+
+
/* LOGGING FUNCTIONS
------------------------------------------------*/
Please sign in to comment.
Something went wrong with that request. Please try again.