And Finally andfinally

## ping_google_analytics.js
// Converts number of seconds to hh:mm:ss
if( typeof Number.prototype.toHHMMSS !== 'function' ) {
  Number.prototype.toHHMMSS = function (){
		var hours = Math.floor(this / 3600);
		var minutes = Math.floor((this - (hours * 3600)) / 60);
		var seconds = this - (hours * 3600) - (minutes * 60);
		var str;
		str = ( hours === 0 ? '' : (hours < 10 ? '0' + hours : hours ) + ':' );
		str += ( minutes < 10 ? '0' + minutes : minutes ) + ':';
		str += ( seconds < 10 ? '0' + seconds : seconds );

## adjust_page_height.js
// Make the contentArea height equal to the paneVisible height. (We view the latter through the former.)
var updateHeight = function(){
	var height = $(paneVisible).children().height();
	if (height) {
		$(contentArea).height(height + paneVisibleMargin);
	}
};

// Set a periodic height adjustment for the content area. Necessary to account for diverse heights of side-panes as they slide in, and dynamic page elements.
setInterval(function(){

## normalise-url.js
// normalizeUrl('http://news.bbc.co.uk/sport/?page=1#test');
// returns "/sport/?page=1"

var normalizeUrl = function (url) {
	var a = document.createElement('a');
	a.href = url;
	a = a.pathname + a.search;
	a = a.indexOf('/') === 0 ? a : '/' + a; // because IE doesn't return a leading '/'
	return a;
};

## .htaccess
# html5 pushstate (history) support:
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L,QSA]
</ifModule>

## Interactive-Before-After-Image-Comparison.markdown

      
              4 files
            
          
              0 forks
            
          
              1 comment
            
          
              0 stars
            
          
                andfinally
                / Interactive-Before-After-Image-Comparison.markdown
            
            
              Created
              August 5, 2014 13:14
            
              
                A Pen by And Finally.
              
          
    Interactive Before-After Image Comparison

A variation on my previous work.
Forked from Dudley Storey's Pen Interactive Before-After Image Comparison.
A Pen by And Finally on CodePen.
License.

  
## font.js
/**
 * Adapted from https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
 * This version tries to load the font from localStorage. If it's not there it simply adds a link to the stylesheet
 * and ajaxes the contents in on load. This makes an extra request. But adding the stylesheet link renders quicker than
 * waiting for a response to the ajax request and then injecting the contents into a style tag, hopefully minimising the
 * FOUT you get when you view http://www.theguardian.com/ and http://www.smashingmagazine.com.
 */
(function () {
	"use strict";
	// Once cached the css file is stored on the client forever. To invalidate the cache change this URL.

## index.html
<html>
<head>
	<title>-- == TEST == --</title>
</head>

<style>

	body {
		background: #FF1493;
	}

## sample.js
// Add action
wpdk_add_action( 'test_action', test_action );

// Action function
function test_action()
{
  console.log( 'Fires test_action' );
}

wpdk_do_action( 'test_action' );

## gulpfile.babel.js
import gulp from 'gulp';
import sass from 'gulp-sass';
import babel from 'gulp-babel';
import sourcemaps from 'gulp-sourcemaps';
import es from 'event-stream';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';

const sassOpts = {outputStyle: 'compressed', errLogToConsole: true};

## calypso-anybar-handler.sh
#!/bin/bash

PORT="${PORT:-1738}"
DONE_COLOR="${DONE_COLOR:-"green"}"
PROGRESS_COLOR="${PROGRESS_COLOR:-"orange"}"
INITIAL_COLOR="${INITIAL_COLOR:-"white"}"
BUILD_ERROR_COLOR="${BUILD_ERROR_COLOR:-"red"}"
TEST_ERROR_COLOR="${TEST_ERROR_COLOR:-"purple"}"

HAS_ERROR=0
	// Converts number of seconds to hh:mm:ss
	if( typeof Number.prototype.toHHMMSS !== 'function' ) {
	Number.prototype.toHHMMSS = function (){
	var hours = Math.floor(this / 3600);
	var minutes = Math.floor((this - (hours * 3600)) / 60);
	var seconds = this - (hours * 3600) - (minutes * 60);
	var str;
	str = ( hours === 0 ? '' : (hours < 10 ? '0' + hours : hours ) + ':' );
	str += ( minutes < 10 ? '0' + minutes : minutes ) + ':';
	str += ( seconds < 10 ? '0' + seconds : seconds );
	// Make the contentArea height equal to the paneVisible height. (We view the latter through the former.)
	var updateHeight = function(){
	var height = $(paneVisible).children().height();
	if (height) {
	$(contentArea).height(height + paneVisibleMargin);
	}
	};

	// Set a periodic height adjustment for the content area. Necessary to account for diverse heights of side-panes as they slide in, and dynamic page elements.
	setInterval(function(){
	// normalizeUrl('http://news.bbc.co.uk/sport/?page=1#test');
	// returns "/sport/?page=1"

	var normalizeUrl = function (url) {
	var a = document.createElement('a');
	a.href = url;
	a = a.pathname + a.search;
	a = a.indexOf('/') === 0 ? a : '/' + a; // because IE doesn't return a leading '/'
	return a;
	};
	# html5 pushstate (history) support:
	<ifModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteCond %{REQUEST_URI} !index
	RewriteRule (.*) index.html [L,QSA]
	</ifModule>
	/**
	* Adapted from https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
	* This version tries to load the font from localStorage. If it's not there it simply adds a link to the stylesheet
	* and ajaxes the contents in on load. This makes an extra request. But adding the stylesheet link renders quicker than
	* waiting for a response to the ajax request and then injecting the contents into a style tag, hopefully minimising the
	* FOUT you get when you view http://www.theguardian.com/ and http://www.smashingmagazine.com.
	*/
	(function () {
	"use strict";
	// Once cached the css file is stored on the client forever. To invalidate the cache change this URL.
	<html>
	<head>
	<title>-- == TEST == --</title>
	</head>

	<style>

	body {
	background: #FF1493;
	}
	// Add action
	wpdk_add_action( 'test_action', test_action );

	// Action function
	function test_action()
	{
	console.log( 'Fires test_action' );
	}

	wpdk_do_action( 'test_action' );
	import gulp from 'gulp';
	import sass from 'gulp-sass';
	import babel from 'gulp-babel';
	import sourcemaps from 'gulp-sourcemaps';
	import es from 'event-stream';
	import rename from 'gulp-rename';
	import uglify from 'gulp-uglify';

	const sassOpts = {outputStyle: 'compressed', errLogToConsole: true};
	#!/bin/bash

	PORT="${PORT:-1738}"
	DONE_COLOR="${DONE_COLOR:-"green"}"
	PROGRESS_COLOR="${PROGRESS_COLOR:-"orange"}"
	INITIAL_COLOR="${INITIAL_COLOR:-"white"}"
	BUILD_ERROR_COLOR="${BUILD_ERROR_COLOR:-"red"}"
	TEST_ERROR_COLOR="${TEST_ERROR_COLOR:-"purple"}"

	HAS_ERROR=0