rails_stackview 1.0.0 → 1.0.1

data/vendor/assets/javascripts/stackview/types/my_plain.js

@@ -0,0 +1,183 @@
+(function($, window, undefined) {
+	/*
+	   Extend StackView defaults to include options for this item type.
+
+	   max_height_percentage
+	      Books with the maximum height will render as this percentage
+	      width in the stack.
+
+	   max_height
+		    The maximum height in centimeters that an item will render as,
+		    regardless of the true height of the item.
+
+		 max_pages
+		    The maximum number of pages that a book will render as,
+		    regardless of the true number of pages.
+
+		 min_height_percentage
+		    Books with the minimum height will render as this percentage
+		    width in the stack.
+
+		 min_height
+		    The minimum height in centimeters that an item will render as,
+		    regardless of the true height of the item.
+
+		 min_pages
+		    The minimum number of pages that a book will render as,
+		    regardless of the true number of pages.
+
+		 page_multiple
+		    A number that when multiplied by the number of pages in a book
+		    gives us the total pixel height to be rendered.
+
+		 selectors.book
+		    Item selector specific to the book type.
+	*/
+	$.extend(true, window.StackView.defaults, {
+		plain: {
+			max_height_percentage: 100,
+			max_height: 39,
+			max_pages: 540,
+			min_height_percentage: 59,
+			min_height: 20,
+			min_pages: 200,
+			page_multiple: 0.20
+		},
+
+		selectors: {
+			plain: '.stack-plain'
+		}
+	});
+
+	/*
+	   #translate(number, number, number, number, number) - Private
+	
+	   Takes a value (the first argument) and two ranges of numbers. Translates
+	   this value from the first range to the second range.  E.g.:
+	
+	   translate(0, 0, 10, 50, 100) returns 50.
+	   translate(10, 0, 10, 50, 100) returns 100.
+	   translate(5, 0, 10, 50, 100) returns 75.
+	
+	   http://stackoverflow.com/questions/1969240/mapping-a-range-of-values-to-another
+	*/
+	var translate = function(value, start_min, start_max, end_min, end_max) {
+		var start_range = start_max - start_min,
+		    end_range = end_max - end_min,
+		    scale = (value - start_min) / (start_range);
+		
+		return end_min + scale * end_range;
+	};
+
+	/*
+	   #get_height(StackView, object) - Private
+	
+	   Takes a StackView options object and a book object. Returns a
+	   normalized book height percentage, taking into account the minimum
+	   height, maximum height, height multiple, and translating them onto
+	   the percentage range specified in the stack options.
+	*/
+	var get_height = function(options, book) {
+		var height = parseInt(book.measurement_height_numeric, 10),
+		    min = options.book.min_height,
+		    max = options.book.max_height;
+		
+		if (isNaN(height)) {
+			height = min;
+		}
+		height = Math.min(Math.max(height, min), max);
+		height = translate(
+			height,
+			options.book.min_height,
+			options.book.max_height,
+			options.book.min_height_percentage,
+			options.book.max_height_percentage
+		);
+		return height + '%';
+	};
+
+	/*
+	   #get_thickness(StackView, object) - Private
+	
+	   Takes a StackView instance and a book object. Returns a normalized
+	   book thickness using the number of book pages, taking into account
+	   the minimum pages, maximum pages, and pages multiple.
+	*/
+	var get_thickness = function(options, book) {
+		var thickness = parseInt(book.measurement_page_numeric, 10),
+		    min = options.book.min_pages,
+		    max = options.book.max_pages,
+		    multiple = options.book.page_multiple;
+		
+		if (isNaN(thickness)) {
+			thickness = min;
+		}
+		thickness = Math.min(Math.max(thickness, min), max) * multiple;
+		return thickness + 'px';
+	};
+
+	/*
+	   #normalize_link(object) - Private
+	
+	   Takes an item and returns the item's link, taking into account
+	   workarounds that may come from inconsistent data structure.
+	*/
+	var normalize_link = function(item) {
+		//workaround for link construction from LibraryCloud
+		return item.title_link_friendly ?
+			'../shelflife/book/' + item.title_link_friendly + '/' + item.id :
+			item.link;
+	};
+
+	/*
+	   #get_author(object) - Private
+	
+	   Takes an item and returns the item's author, taking the first
+	   author if an array of authors is defined.
+	*/
+	var get_author = function(item) {
+		var author = item.creator && item.creator.length ? item.creator[0] : '';
+		
+		if(/^([^,]*)/.test(author)) {
+			author = author.match(/^[^,]*/);
+		}
+		
+		return author;
+	};
+
+
+	/*
+	   Book type definition.
+	*/
+	window.StackView.register_type({
+		name: 'plain',
+
+		match: function(item) {
+			return (item.format && item.format === 'plain');
+		},
+
+		adapter: function(item, options) {
+			return {
+				heat: window.StackView.utils.get_heat(item.shelfrank),
+				book_height: get_height(options, item),
+				book_thickness: get_thickness(options, item),
+				link: normalize_link(item),
+				title: item.title,
+				author: get_author(item),
+				year: item.pub_date
+			};
+		},
+
+		template: '\
+			<li class="stack-item stack-plain heat<%= heat %>" style="width:<%= book_height %>; height:<%= book_thickness %>;">\
+				<a href="<%= link %>" target="_blank">\
+					<span class="spine-text">\
+						<span class="spine-title"><%= title %></span>\
+						<span class="spine-author"><%= author %></span>\
+					</span>\
+					<span class="spine-year"><%= year %></span>\
+					<span class="plain-top item-colors" />\
+					<span class="plain-edge item-colors" />\
+				</a>\
+			</li>'	});
+})(jQuery, window);

data/vendor/assets/javascripts/stackview/types/serial.js

@@ -0,0 +1,40 @@
+(function($, window, undefined) {
+	/*
+	   Extend StackView defaults to include options for this item type.
+
+	   selectors.serial
+	      Item selector specific to the serial type.
+	*/
+	$.extend(true, window.StackView.defaults, {
+		selectors: {
+			serial: '.stack-serial'
+		}
+	});
+
+	window.StackView.register_type({
+		name: 'serial',
+
+		match: function(item) {
+			return item.format === 'Serial';
+		},
+
+		adapter: function(item, options) {
+			return {
+				heat: window.StackView.utils.get_heat(item.shelfrank),
+				title: item.title,
+				link: item.link
+			};
+		},
+
+		template: '\
+			<li class="stack-item stack-serial heat<%= heat %>">\
+				<a href="<%= link %>" target="_blank">\
+					<span class="spine-text">\
+						<span class="spine-title"><%= title %></span>\
+					</span>\
+					<span class="serial-edge" />\
+					<span class="serial-cover" />\
+				</a>\
+			</li>'
+	});
+})(jQuery, window);

data/vendor/assets/javascripts/stackview/types/soundrecording.js

@@ -0,0 +1,42 @@
+(function($, window, undefined) {
+	/*
+	   Extend StackView defaults to include options for this item type.
+
+	   selectors.soundrecording
+	      Item selector specific to the soundrecording type.
+	*/
+	$.extend(true, window.StackView.defaults, {
+		selectors: {
+			soundrecording: '.stack-soundrecording'
+		}
+	});
+
+	window.StackView.register_type({
+		name: 'soundrecording',
+
+		match: function(item) {
+			return item.format === 'Sound Recording';
+		},
+
+		adapter: function(item, options) {
+			return {
+				heat: window.StackView.utils.get_heat(item.shelfrank),
+				link: item.link || '#',
+				title: item.title,
+				year: item.pub_date
+			};
+		},
+
+		template: '\
+			<li class="stack-item stack-soundrecording heat<%= heat %>">\
+				<a href="<%= link %>" target="_blank">\
+						<span class="spine-text">\
+							<span class="spine-title"><%= title %></span>\
+						</span>\
+						<span class="spine-year"><%= year %></span>\
+						<span class="sound-edge"></span>\
+						<span class="sound-cover"></span>\
+				</a>\
+			</li>'
+	});
+})(jQuery, window);

data/vendor/assets/javascripts/stackview/types/videofilm.js

@@ -0,0 +1,56 @@
+(function($, window, undefined) {
+	/*
+	   Extend StackView defaults to include options for this item type.
+
+	   selectors.videofilm
+	      Item selector specific to the videofilm type.
+	*/
+	$.extend(true, window.StackView.defaults, {
+		selectors: {
+			videofilm: '.stack-videofilm'
+		}
+	});
+
+	/*
+	   #normalize_link(object) - Private
+	
+	   Takes an item and returns the item's link, taking into account
+	   workarounds that may come from inconsistent data structure.
+	*/
+	var normalize_link = function(item) {
+		// TODO: How should this be normalized? Can we just drop normalization
+		// in favor of other systems modifying or redefining types?
+		return item.link || item.title || '#'
+	};
+
+	window.StackView.register_type({
+		name: 'videofilm',
+
+		match: function(item) {
+			return item.format === 'Video\/Film';
+		},
+
+		adapter: function(item, options) {
+			return {
+				heat: window.StackView.utils.get_heat(item.shelfrank),
+				/* TODO: How should video widths be calculated? */
+				height: '65%',
+				title: item.title,
+				year: item.pub_date,
+				link: normalize_link(item)
+			};
+		},
+
+		template: '\
+			<li class="stack-item stack-videofilm heat<%= heat %>" style="width:<%= height %>;">\
+				<a href="<%= link %>" target="_blank">\
+					<span class="spine-text">\
+						<span class="spine-title"><%= title %></span>\
+					</span>\
+					<span class="spine-year"><%= year %></span>\
+					<span class="videofilm-edge" />\
+					<span class="videofilm-cover" />\
+				</a>\
+			</li>'
+	});
+})(jQuery, window);

data/vendor/assets/javascripts/stackview/types/webpage.js

@@ -0,0 +1,42 @@
+(function($, window, undefined) {
+	/*
+	   Extend StackView defaults to include options for this item type.
+
+	   selectors.webpage
+	      Item selector specific to the webpage type.
+	*/
+	$.extend(true, window.StackView.defaults, {
+		selectors: {
+			webpage: '.stack-webpage'
+		}
+	});
+
+	window.StackView.register_type({
+		name: 'webpage',
+
+		match: function(item) {
+			return item.format === 'webpage';
+		},
+
+		adapter: function(item, options) {
+			return {
+				heat: window.StackView.utils.get_heat(item.shelfrank),
+				link: item.rsrc_value || item.link,
+				publisher: item.publisher,
+				title: item.title
+			};
+		},
+
+		template: '\
+			<li class="stack-item stack-webpage heat<%= heat %>">\
+				<a href="<%= link %>" target="_blank">\
+					<span class="url-bar">\
+						<span class="url-publisher"><%= publisher %>:</span>\
+						<span class="url-title"><%= title %></span>\
+					</span>\
+					<span class="webpage-top"></span>\
+					<span class="webpage-edge"></span>\
+				</a>\
+			</li>'
+	});
+})(jQuery, window);

data/vendor/assets/stackview.sha

@@ -0,0 +1 @@
+5c6d6ea6ca51e7b335f1f8018017292e2c02203c

data/vendor/assets/stylesheets/stackview/_book.scss

@@ -0,0 +1,66 @@
+.stack-book {
+	margin:0 0 2px 0;
+	
+	> a {
+		border-width:1px 2px;
+		border-style:solid;
+		border-radius:3px / 20px;
+	}
+
+	.spine-text {
+		height:40px;
+		line-height:40px;
+		top:50%;
+		margin-top:-7px;
+		left:15px;
+		right:24px;
+	}
+
+	.spine-year {
+		@include rotate(-90deg);
+	}
+}
+
+.stack-pages {
+	position:absolute;
+	z-index:4;
+	display:block;
+	width:10px;
+	right:-6px;
+	top:0;
+	bottom:-4px;
+	border-width:3px 0 3px 2px;
+	border-style:solid;
+	border-radius:4px 0 0 4px / 20px 0 0 20px;
+	@include transform-origin(0 100%);
+	@include skew(0deg, -20deg);
+	
+	&:after {
+		position:absolute;
+		content:"";
+		left:0;
+		right:2px;
+		top:0;
+		bottom:0;
+		background:#f5f2e8;
+		border-radius:3px 0 0 3px / 20px 0 0 20px;
+		border-width:3px 1px 2px 0px;
+		border-style:solid dotted solid solid;
+		border-color:#aaa #e0d7b9 #ccc #ccc;
+	}
+}
+
+.stack-cover {
+	position:absolute;
+	z-index:4;
+	height:2px;
+	border-width:1px;
+	border-style:solid;
+	border-right-width:2px;
+	top:-4px;
+	left:0;
+	right:5px;
+	border-radius:4px 0 0 50px;
+	@include transform-origin(0 100%);
+	@include skew(-70deg, 0deg);
+}

data/vendor/assets/stylesheets/stackview/_heatmap.scss

@@ -0,0 +1,154 @@
+/******************
+   HEATMAP
+
+   hottest = heat10
+   coldest = heat1
+*******************/
+
+.heat1 {
+	$bg: #ccebff;
+	$border: #adf;
+	
+	a {
+		background-color:$bg;
+		background-image:asset-url("stackview/superGloss.png");
+		color:#222;
+		text-shadow:0 1px 0 #fff;
+		border-color:$border;
+
+		&:visited, &:hover, &:active {
+			color:#222;
+		}
+	}
+	
+	@include decorations($bg, $border);
+}
+
+.heat2 {
+	$bg: #adf;
+	$border: #88cfff;
+	
+	a {
+		background-color:$bg;
+		background-image:asset-url("stackview/superGloss.png");
+		color:#222;
+		text-shadow:0 1px 0 #ddf1ff;
+		border-color:$border;
+
+		&:visited, &:hover, &:active {
+			color:#222;
+		}
+	}
+	
+	@include decorations($bg, $border);
+}
+
+.heat3 {
+	$bg: #77c9ff;
+	$border: #59b6ef;
+	
+	a {
+		background-color:$bg;
+		background-image:asset-url("stackview/highGloss.png");
+		color:#111;
+		text-shadow:0 1px 0 #adf;
+		border-color:$border;
+
+		&:visited, &:hover, &:active {
+			color:#111;
+		}
+	}
+	
+	@include decorations($bg, $border);
+}
+
+.heat4 {
+	$bg: #44b4ff;
+	$border: #11a0ff;
+	
+	a {
+		background-color:$bg;
+		text-shadow:0 -1px 0 $border;
+		border-color:$border;
+	}
+	
+	@include decorations($bg, $border);
+}
+
+.heat5 {
+	$bg: #22a7ff;
+	$border: #008fee;
+	
+	a {
+		background-color:$bg;
+		text-shadow:0 -1px 0 $border;
+		border-color:$border;
+	}
+	
+	@include decorations($bg, $border);
+}
+
+.heat6 {
+	$bg: #0099ff;
+	$border: #007acc;
+	
+	a {
+		background-color:$bg;
+		text-shadow:0 -1px 0 #0085dd;
+		border-color:$border;
+	}
+	
+	@include decorations($bg, $border);
+}
+
+.heat7 {
+	$bg: #0085dd;
+	$border: #06a;
+	
+	a {
+		background-color:$bg;
+		text-shadow:0 -1px 0 #0070bb;
+		border-color:$border;
+	}
+	
+	@include decorations($bg, $border);
+}
+
+.heat8 {
+	$bg: #0070bb;
+	$border: #004777;
+	
+	a {
+		background-color:$bg;
+		text-shadow:0 -1px 0 #005c99;
+		border-color:$border;
+	}
+	
+	@include decorations($bg, $border);
+}
+
+.heat9 {
+	$bg: #005c99;
+	$border: #002944;
+	
+	a {
+		background-color:$bg;
+		text-shadow:0 -1px 0 #004777;
+		border-color:$border;
+	}
+	
+	@include decorations($bg, $border);
+}
+
+.heat10 {
+	$bg: #004777;
+	$border: #001522;
+	
+	a {
+		background-color:$bg;
+		text-shadow:0 -1px 0 #035;
+		border-color:$border;
+	}
+	
+	@include decorations($bg, $border);
+}