ish_rails 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 1a5459b9bf3a80f7ced0a3f530809a05f79358f4
+  data.tar.gz: 366b662af177bfe930bdf044c9a533d6bf19259d
+SHA512:
+  metadata.gz: 7417477aa589661492d400a5d34634127cb67139a82adb8c063ff4ada3b75473d8c8e043dc5d1a73e5583f76cc70f36f26acfd3a92745cb68cbc6c83dad8e653
+  data.tar.gz: 287c6f3625ddb780c187a5b470be3ad846930096c668eee902963d7daf8681860713fe37f6867c8c2f5641f03933c7253951febfef05e1f7dd85f18963e8e4d8

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2014 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,3 @@
+= IshRails
+
+This project rocks and uses MIT-LICENSE.

data/Rakefile

@@ -0,0 +1,34 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'IshRails'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/ish/init.js

@@ -0,0 +1,417 @@
+$(document).ready(function() {
+(function(w){
+	var sw = document.body.clientWidth, //Viewport Width
+		minViewportWidth = 240, //Minimum Size for Viewport
+		maxViewportWidth = 2600, //Maxiumum Size for Viewport
+		viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
+		$sgWrapper = $('#sg-gen-container'), //Wrapper around viewport
+		$sgViewport = $('#sg-viewport'), //Viewport element
+		$sizePx = $('.sg-size-px'), //Px size input element in toolbar
+		$sizeEms = $('.sg-size-em'), //Em size input element in toolbar
+		$bodySize = 16, //Body size of the document
+		discoID = false,
+		fullMode = true,
+		discoMode = false,
+		hayMode = false,
+		hash = window.location.hash.replace(/^.*?#/,'');
+	
+	//URL Form Submission
+	$('#url-form').submit(function(e) {
+		var urlVal = $('#url').val();
+		var regex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
+
+		if(regex.test(urlVal)) {
+			return;
+		} else {
+			var newURL = "http://"+urlVal;
+			$('#url').val(newURL);
+			return;
+		}
+		
+	});
+	
+	$(w).resize(function(){ //Update dimensions on resize
+		sw = document.body.clientWidth;	
+		
+		if(fullMode == true) {
+			sizeFull();
+		}
+	});
+
+	/* Nav Active State */
+	function changeActiveState(link) {
+		var $activeLink = link;
+		$('.sg-size-options a').removeClass('active');
+
+		if(link) {
+			$activeLink.addClass('active');
+		}
+	}
+
+	/* Pattern Lab accordion dropdown */
+	$('.sg-acc-handle').on("click", function(e){
+		var $this = $(this),
+			$panel = $this.next('.sg-acc-panel');
+		e.preventDefault();
+		$this.toggleClass('active');
+		$panel.toggleClass('active');
+	});
+
+	//Size Trigger
+	$('#sg-size-toggle').on("click", function(e){
+		e.preventDefault();
+		$(this).parents('ul').toggleClass('active');
+	});
+	
+	//Size View Events
+
+	//Click Size Small Button
+	$('#sg-size-s').on("click", function(e){
+		e.preventDefault();
+		killDisco();
+		killHay();
+		fullMode = false;
+		window.location.hash = 's';
+		changeActiveState($(this));
+		sizeSmall();
+	});
+	
+	//Click Size Medium Button
+	$('#sg-size-m').on("click", function(e){
+		e.preventDefault();
+		killDisco();
+		killHay();
+		fullMode = false;
+		window.location.hash = 'm';
+		changeActiveState($(this));
+		sizeMedium();
+	});
+	
+	//Click Size Large Button
+	$('#sg-size-l').on("click", function(e){
+		e.preventDefault();
+		killDisco();
+		killHay();
+		fullMode = false;
+		window.location.hash = 'l';
+		changeActiveState($(this));
+		sizeLarge();
+	});
+
+	//Click Full Width Button
+	$('#sg-size-full').on("click", function(e){ //Resets 
+		e.preventDefault();
+		killDisco();
+		killHay();
+		changeActiveState($(this));
+		fullMode = true;
+		window.location.hash = '';
+		sizeiframe(sw);
+	});
+	
+	//Click Random Size Button
+	$('#sg-size-random').on("click", function(e){
+		e.preventDefault();
+		fullMode = false;
+		sizeRandom();
+		window.location.hash = 'random';
+	});
+
+	//Size Small
+	function sizeSmall() {
+		sizeiframe(getRandom(minViewportWidth,500));
+	}
+	
+	//Size Medium
+	function sizeMedium() {
+		sizeiframe(getRandom(500,800));
+	}
+	
+	//Size Large
+	function sizeLarge() {
+		sizeiframe(getRandom(800,1200));
+	}
+
+	//Size Random Size
+	function sizeRandom() {
+		killDisco();
+		killHay();
+		fullMode = false;
+		changeActiveState($('#sg-size-random'));
+		sizeiframe(getRandom(minViewportWidth,sw));
+	}
+	
+	//Size Full
+	function sizeFull() {
+		sizeiframe(sw, false);
+		updateSizeReading(sw);
+	}
+	
+	//Click for Disco Mode, which resizes the viewport randomly
+	$('#sg-size-disco').on("click", function(e){
+		e.preventDefault();
+		killHay();
+		fullMode = false;
+
+		if (discoMode) {
+			killDisco();
+			changeActiveState();
+			window.location.hash = '';
+
+		} else {
+			startDisco();
+			changeActiveState($(this));
+			window.location.hash = 'disco';
+		}
+	});
+
+	/* Disco Mode */
+	function disco() {
+		sizeiframe(getRandom(minViewportWidth,sw));
+	}
+	
+	function killDisco() {
+		discoMode = false;
+		clearInterval(discoID);
+		discoID = false;
+	}
+	
+	function startDisco() {
+		discoMode = true;
+		discoID = setInterval(disco, 800);
+	}
+
+	//Stephen Hay Mode - "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!"
+	$('#sg-size-hay').on("click", function(e){
+		e.preventDefault();
+		killDisco();
+
+		if (hayMode) {
+			killHay();
+			changeActiveState();
+			window.location.hash = '';
+		} else {
+			startHay();
+			changeActiveState($(this));
+			window.location.hash = 'hay';
+		}
+	});
+
+	//Stop Hay! Mode
+	function killHay() {
+		var currentWidth = $sgViewport.width();
+		hayMode = false;
+		$sgViewport.removeClass('hay-mode');
+		$sgWrapper.removeClass('hay-mode');
+		sizeiframe(Math.floor(currentWidth));
+	}
+	
+	// start Hay! mode
+	function startHay() {
+		hayMode = true;
+		$sgWrapper.removeClass("vp-animate").width(minViewportWidth+viewportResizeHandleWidth);
+		$sgViewport.removeClass("vp-animate").width(minViewportWidth);
+		
+		window.setTimeout(function(){
+			$sgWrapper.addClass('hay-mode').width(maxViewportWidth+viewportResizeHandleWidth);
+			$sgViewport.addClass('hay-mode').width(maxViewportWidth);
+			
+			setInterval(function(){ var vpSize = $sgViewport.width(); updateSizeReading(vpSize); },100);
+		}, 200);
+	}
+
+	//Pixel input
+	$sizePx.on('keydown', function(e){
+		var val = Math.floor($(this).val());
+
+		if(e.keyCode === 38) { //If the up arrow key is hit
+			val++;
+			sizeiframe(val,false);
+			window.location.hash = val;
+		} else if(e.keyCode === 40) { //If the down arrow key is hit
+			val--;
+			sizeiframe(val,false);
+			window.location.hash = val;
+		} else if(e.keyCode === 13) { //If the Enter key is hit
+			e.preventDefault();
+			sizeiframe(val); //Size Iframe to value of text box
+			window.location.hash = val;
+			$(this).blur();
+		}
+		changeActiveState();
+	});
+
+	$sizePx.on('keyup', function(){
+		var val = Math.floor($(this).val());
+		updateSizeReading(val,'px','updateEmInput');
+	});
+
+	//Em input
+	$sizeEms.on('keydown', function(e){
+		var val = parseFloat($(this).val());
+
+		if(e.keyCode === 38) { //If the up arrow key is hit
+			val++;
+			sizeiframe(Math.floor(val*$bodySize),false);
+		} else if(e.keyCode === 40) { //If the down arrow key is hit
+			val--;
+			sizeiframe(Math.floor(val*$bodySize),false);
+		} else if(e.keyCode === 13) { //If the Enter key is hit
+			e.preventDefault();
+			sizeiframe(Math.floor(val*$bodySize)); //Size Iframe to value of text box
+		}
+		changeActiveState();
+		
+		window.location.hash = parseInt(val*$bodySize);
+	});
+
+	$sizeEms.on('keyup', function(){
+		var val = parseFloat($(this).val());
+		updateSizeReading(val,'em','updatePxInput');
+	});
+	
+	// handle the MQ click
+	$('#sg-mq a').on("click", function(e){
+		e.preventDefault();
+		var val = $(this).html();
+		var type = (val.indexOf("px") !== -1) ? "px" : "em";
+		val = val.replace(type,"");
+		var width = (type === "px") ? val*1 : val*$bodySize;
+		sizeiframe(width,true);
+	});
+	
+	//Resize the viewport
+	//'size' is the target size of the viewport
+	//'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging
+	function sizeiframe(size,animate) {
+		var theSize;
+
+		if(size>maxViewportWidth) { //If the entered size is larger than the max allowed viewport size, cap value at max vp size
+			theSize = maxViewportWidth;
+		} else if(size<minViewportWidth) { //If the entered size is less than the minimum allowed viewport size, cap value at min vp size
+			theSize = minViewportWidth;
+		} else {
+			theSize = size;
+		}
+
+		//Conditionally remove CSS animation class from viewport
+		if(animate===false) {
+			$sgWrapper.removeClass("vp-animate");
+			$sgViewport.removeClass("vp-animate"); //If aninate is set to false, remove animate class from viewport
+		} else {
+			$sgWrapper.addClass("vp-animate");
+			$sgViewport.addClass("vp-animate");
+		}
+
+		$sgWrapper.width(theSize+viewportResizeHandleWidth); //Resize viewport wrapper to desired size + size of drag resize handler
+		$sgViewport.width(theSize); //Resize viewport to desired size
+
+		updateSizeReading(theSize); //Update values in toolbar
+	}
+	
+
+	
+	
+	//Update Pixel and Em inputs
+	//'size' is the input number
+	//'unit' is the type of unit: either px or em. Default is px. Accepted values are 'px' and 'em'
+	//'target' is what inputs to update. Defaults to both
+	function updateSizeReading(size,unit,target) {
+		if(unit=='em') { //If size value is in em units
+			emSize = size;
+			pxSize = Math.floor(size*$bodySize);
+		} else { //If value is px or absent
+			pxSize = size;
+			emSize = size/$bodySize;
+		}
+		
+		if (target == 'updatePxInput') {
+			$sizePx.val(pxSize);
+		} else if (target == 'updateEmInput') {
+			$sizeEms.val(emSize.toFixed(2));
+		} else {
+			$sizeEms.val(emSize.toFixed(2));
+			$sizePx.val(pxSize);
+		}
+	}
+	
+	/* Returns a random number between min and max */
+	function getRandom (min, max) {
+	    var num = Math.random() * (max - min) + min;
+	    
+	    return parseInt(num);
+	}
+	
+	function updateViewportWidth(size) {
+		$sgViewport.width(size);
+		$sgWrapper.width(size*1 + 14);
+		
+		updateSizeReading(size);
+	}
+
+	// handles widening the "viewport"
+	//   1. on "mousedown" store the click location
+	//   2. make a hidden div visible so that it can track mouse movements and make sure the pointer doesn't get lost in the iframe
+	//   3. on "mousemove" calculate the math, save the results to a cookie, and update the viewport
+	$('#sg-rightpull').mousedown(function(event) {
+		
+		// capture default data
+		var origClientX = event.clientX;
+		var origViewportWidth = $sgViewport.width();
+		
+		fullMode = false;
+		
+		// show the cover
+		$("#sg-cover").css("display","block");
+		
+		// add the mouse move event and capture data. also update the viewport width
+		$('#sg-cover').mousemove(function(event) {
+			
+			viewportWidth = (origClientX > event.clientX) ? origViewportWidth - ((origClientX - event.clientX)*2) : origViewportWidth + ((event.clientX - origClientX)*2);
+			
+			if (viewportWidth > minViewportWidth) {
+				
+				
+				window.location.hash = viewportWidth;
+				sizeiframe(viewportWidth,false);
+			}
+		});
+	});
+
+	// on "mouseup" we unbind the "mousemove" event and hide the cover again
+	$('body').mouseup(function(event) {
+		$('#sg-cover').unbind('mousemove');
+		$('#sg-cover').css("display","none");
+	});
+
+	// capture the viewport width that was loaded and modify it so it fits with the pull bar
+	var origViewportWidth = $sgViewport.width();
+	$sgWrapper.width(origViewportWidth);
+	$sgViewport.width(origViewportWidth - 14);
+	updateSizeReading($sgViewport.width());
+
+
+
+	//Read Hash In URL
+	if(hash === 'hay') { 
+		startHay(); ///Start Hay mode if hash says 'hay'
+	} else if(hash === 'disco') {
+		startDisco(); //Start disco mode if hash says 'disco'
+	} else if(hash === 'random') {
+		sizeRandom(); ///Random screen size if hash says 'random'
+	} else if(hash === 'l') {
+		sizeLarge();
+	} else if(hash === 'm') {
+		sizeMedium();
+	} else if(hash === 's') {
+		sizeSmall();
+	} else if(!isNaN(hash) && hash !== '') { //if screen size is a number
+		sizeiframe(parseInt(hash));
+		console.log('this is a number');
+	} else {
+		sizeFull();
+		console.log('this is not a number');
+	}
+
+})(this);
+});

data/app/assets/javascripts/ish/url-handler.js

@@ -0,0 +1,182 @@
+/*!
+ * URL Handler - v0.1
+ *
+ * Copyright (c) 2013 Dave Olsen, http://dmolsen.com
+ * Licensed under the MIT license
+ *
+ * Helps handle the initial iFrame source. Parses a string to see if it matches
+ * an expected pattern in Pattern Lab. Supports Pattern Labs fuzzy pattern partial
+ * matching style.
+ *
+ */
+
+var urlHandler = {
+	
+	// set-up some default vars
+	skipBack: false,
+	targetOrigin: (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host,
+	
+	/**
+	* get the real file name for a given pattern name
+	* @param  {String}       the shorthand partials syntax for a given pattern
+	*
+	* @return {String}       the real file path
+	*/
+	getFileName: function (name) {
+		
+		var baseDir     = "patterns";
+		var fileName    = "";
+		
+		if (name == undefined) {
+			return fileName;
+		}
+		
+		if (name == "all") {
+			return "styleguide/html/styleguide.html";
+		}
+		
+		var paths = (name.indexOf("viewall-") != -1) ? viewAllPaths : patternPaths;
+		nameClean = name.replace("viewall-","");
+		
+		// look at this as a regular pattern
+		var bits        = this.getPatternInfo(nameClean, paths);
+		var patternType = bits[0];
+		var pattern     = bits[1];
+		
+		if ((paths[patternType] != undefined) && (paths[patternType][pattern] != undefined)) {
+			
+			fileName = paths[patternType][pattern];
+			
+		} else if (paths[patternType] != undefined) {
+			
+			for (patternMatchKey in paths[patternType]) {
+				if (patternMatchKey.indexOf(pattern) != -1) {
+					fileName = paths[patternType][patternMatchKey];
+					break;
+				}
+			}
+		
+		}
+		
+		if (fileName == "") {
+			return fileName;
+		}
+		
+		var regex = /\//g;
+		if ((name.indexOf("viewall-") != -1) && (fileName != "")) {
+			fileName = baseDir+"/"+fileName.replace(regex,"-")+"/index.html";
+		} else if (fileName != "") {
+			fileName = baseDir+"/"+fileName.replace(regex,"-")+"/"+fileName.replace(regex,"-")+".html";
+		}
+		
+		return fileName;
+	},
+	
+	/**
+	* break up a pattern into its parts, pattern type and pattern name
+	* @param  {String}       the shorthand partials syntax for a given pattern
+	* @param  {Object}       the paths to be compared
+	*
+	* @return {Array}        the pattern type and pattern name
+	*/
+	getPatternInfo: function (name, paths) {
+		
+		var patternBits = name.split("-");
+		
+		var i = 1;
+		var c = patternBits.length;
+		
+		var patternType = patternBits[0];
+		while ((paths[patternType] == undefined) && (i < c)) {
+			patternType += "-"+patternBits[i];
+			i++;
+		}
+		
+		pattern = name.slice(patternType.length+1,name.length);
+		
+		return [patternType, pattern];
+		
+	},
+	
+	/**
+	* search the request vars for a particular item
+	*
+	* @return {Object}       a search of the window.location.search vars
+	*/
+	getRequestVars: function() {
+		
+		// the following is taken from https://developer.mozilla.org/en-US/docs/Web/API/window.location
+		var oGetVars = new (function (sSearch) {
+		  if (sSearch.length > 1) {
+		    for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
+		      aItKey = aCouples[nKeyId].split("=");
+		      this[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : "";
+		    }
+		  }
+		})(window.location.search);
+		
+		return oGetVars;
+		
+	},
+	
+	/**
+	* push a pattern onto the current history based on a click
+	* @param  {String}       the shorthand partials syntax for a given pattern
+	* @param  {String}       the path given by the loaded iframe
+	*/
+	pushPattern: function (pattern, givenPath) {
+		var data         = { "pattern": pattern };
+		var fileName     = urlHandler.getFileName(pattern);
+		var expectedPath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("public/index.html","public/")+fileName;
+		if (givenPath != expectedPath) {
+			// make sure to update the iframe because there was a click
+			document.getElementById("sg-viewport").contentWindow.postMessage( { "path": fileName }, urlHandler.targetOrigin);
+		} else {
+			// add to the history
+			var addressReplacement = (window.location.protocol == "file:") ? null : window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+pattern;
+			history.pushState(data, null, addressReplacement);
+			document.getElementById("title").innerHTML = "Pattern Lab - "+pattern;
+			document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(pattern));
+		}
+	},
+	
+	/**
+	* based on a click forward or backward modify the url and iframe source
+	* @param  {Object}      event info like state and properties set in pushState()
+	*/
+	popPattern: function (e) {
+		
+		var state = e.state;
+		
+		if (state == null) {
+			this.skipBack = false;
+			return;
+		} else if (state != null) {
+			var patternName = state.pattern;
+		} 
+		
+		var iFramePath = "";
+		iFramePath = this.getFileName(patternName);
+		if (iFramePath == "") {
+			iFramePath = "styleguide/html/styleguide.html";
+		}
+		
+		document.getElementById("sg-viewport").contentWindow.postMessage( { "path": iFramePath }, urlHandler.targetOrigin);
+		document.getElementById("title").innerHTML = "Pattern Lab - "+patternName;
+		document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(patternName));
+		
+		if (wsnConnected) {
+			wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+patternName+'" }' );
+		}
+		
+	}
+	
+}
+
+/**
+* handle the onpopstate event
+*/
+window.onpopstate = function (event) {
+	urlHandler.skipBack = true;
+	urlHandler.popPattern(event);
+}