cleaning up directory for release

zurb · Jun 13, 2011 · f13d3d7 · f13d3d7
1 parent c155895
commit f13d3d7
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 180 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/app.css b/css/app.css
@@ -95,7 +95,7 @@ h1 {
 #demo-splash span {
 	position: absolute;
 	top: 5px;
-	left: 35px;
+	left: 10px;
 	font-weight: bold;
 	z-index: 0;
 }
@@ -152,12 +152,12 @@ h3 {
 	display: block;
 	float: left;
 	height: 115px;
-	padding-left: 15px;
+	padding-left: 21px;
 }
 .old-vs-new li.first {
 	border-right: 1px solid #c9c8c8;
 	height: 100%;
-	padding-right: 15px;
+	padding-right: 21px;
 	padding-left: 0;
 }
 .old-vs-new h5 {
@@ -200,4 +200,15 @@ h3 {
 }
 .highlight pre {
 	-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0; line-height: 125%;
+}
+.button {
+	background: #2B7F9E;
+	color: #eee !important;
+}
+.button:hover {
+	background: #3CB1DC;
+}
+#johnstewart {
+	float: right;
+	padding-left: 10px;
 }
diff --git a/css/flickrbomb.css b/css/flickrbomb.css
@@ -77,11 +77,8 @@ img.flickrbomb {
 	);
 	padding: 20px 35px 0px 45px; 
 
-	/* Just for demo */ 
-	position: absolute; 
-	z-index: 99999;
-	bottom: -250px;
-	right: 7px;
+	position: absolute;
+	z-index: 9999;
 }
 /*.flickrbombFlyout:after {
 	content:"";
@@ -142,4 +139,9 @@ img.flickrbomb {
 }
 .flickrbombFlyout a.next {
 	right: 10px;
+}
+.flickrbombGallery {
+	display:none;
+	position: absolute;
+	z-index: 9999;
 }
diff --git a/index.php → demo.php b/index.php → demo.php
@@ -1,8 +1,18 @@
-<?php include("includes/_doc_head.php"); ?>
+<!DOCTYPE html>
+<head>
+	<meta charset="utf-8" />
+	<title>ZURBflickrbomb</title>
+  
+	<!--============== IMPORT EXTERNAL SHEETS ================== -->
+	<link rel="stylesheet" href="css/global.css">
+	<link rel="stylesheet" href="css/app.css">
+	<link rel="stylesheet" href="css/flickrbomb.css">
+
+</head>
 <style>
 /*	#testthing {width: 400px; height: 400px;}*/
 </style>
-<body id="<?= $page_name ?>-page" class="<?=$browser?>">
+<body>
 <div class="container main-content">
 	<div class="row">
 		<div claass="sixteen columns">
@@ -41,7 +51,7 @@
 								<li class="no-caption"><img src="flickr://tennis" width="100px" height="100px"></li>
 							</ul>
 							</div>
-							<div style="clear:both"></div>
+							<div style="clear:both"><br></div>
 							<h3>
 								1. Set up
 							</h3>
@@ -108,7 +118,7 @@
 								<h3>
 									3. How it works
 								</h3>
-								<p>
+								<p><img src="flickr://john stewart" width="175px" height="175px">
 									flickrBomb uses <a href="http://jquery.com" title="jQuery">jQuery</a>, <a href="http://documentcloud.github.com/underscore/" title="Underscore.js">Underscore</a>, <a href="http://documentcloud.github.com/backbone/" title="Backbone.js">Backbone.js</a>, and your browsers <a href="http://documentcloud.github.com/backbone/docs/backbone-localstorage.html" title="Backbone.js Local Storage Adapter">local storage</a> to make the magic happen. The plugin scours your html and finds all the image tags that have a source attribute that starts with <span>flickr://</span> and searches flickr for the terms that follow. If it finds anything, the image tag is replaced with flickrbomb's <span>flickrbombContainer</span> div. It does this for each images pointing to flickr://.
 								</p>
 								<h3>
@@ -135,7 +145,7 @@
 								</h3>
 								<p>
 									You can download your copy right here or on <a href="http://github.com" title="flickrBomb Github">github</a>.
-								</p><a href="#download" class="nice button radius" title="minified version">flickrBomb Minified (20kb)</a> <a href="#download" class="nice button radius" title="flickrBomb uncompressed">flickrBomb Uncompressed (70kb)</a><br>
+								</p><a href="#download" class="nice button radius large" title="minified version">flickrBomb Minified (20kb)</a> <a href="#download" class="nice button radius large" title="flickrBomb uncompressed">flickrBomb Uncompressed (70kb)</a><br>
 								<br>
 							</div>
 						</div>
@@ -144,6 +154,8 @@
 			</div>
 			</div>
 </div>
-<?php include("includes/_footer.php");  ?>
+<script src="//code.jquery.com/jquery-1.6.min.js"></script>
+<script src="js/jquery.flickrbomb.demo.min.js"></script>
+<script src="js/app.js"></script>
 </body>
 </html>
diff --git a/images/bomber.jpg b/images/bomber.jpg
diff --git a/includes/_doc_head.php b/includes/_doc_head.php
diff --git a/includes/_footer.php b/includes/_footer.php
diff --git a/js/flickrbomb-demo.js b/js/flickrbomb-demo.js
@@ -1,97 +1,5 @@
 //FlickrBomb by ZURB 2011; http://www.zurb.com/playground
 var startFlickrBomb = function () {
-function supports_local_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch(e){ return false; } }
-
-if (supports_local_storage()) {
-
-  // A simple module to replace `Backbone.sync` with *localStorage*-based
-  // persistence. Models are given GUIDS, and saved into a JSON object. Simple
-  // as that.
-
-  // Generate four random hex digits.
-  function S4() {
-     return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
-  };
-
-  // Generate a pseudo-GUID by concatenating random hexadecimal.
-  function guid() {
-     return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
-  };
-
-  // Our Store is represented by a single JS object in *localStorage*. Create it
-  // with a meaningful name, like the name you'd give a table.
-  var Store = function(name) {
-    this.name = name;
-    var store = localStorage.getItem(this.name);
-    this.data = (store && JSON.parse(store)) || {};
-  };
-
-  _.extend(Store.prototype, {
-
-    // Save the current state of the **Store** to *localStorage*.
-    save: function() {
-      localStorage.setItem(this.name, JSON.stringify(this.data));
-    },
-
-    // Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
-    // have an id of it's own.
-    create: function(model) {
-      if (!model.id) model.id = model.attributes.id = guid();
-      this.data[model.id] = model;
-      this.save();
-      return model;
-    },
-
-    // Update a model by replacing its copy in `this.data`.
-    update: function(model) {
-      this.data[model.id] = model;
-      this.save();
-      return model;
-    },
-
-    // Retrieve a model from `this.data` by id.
-    find: function(model) {
-      return this.data[model.id];
-    },
-
-    // Return the array of all models currently in storage.
-    findAll: function() {
-      return _.values(this.data);
-    },
-
-    // Delete a model from `this.data`, returning it.
-    destroy: function(model) {
-      delete this.data[model.id];
-      this.save();
-      return model;
-    }
-
-  });
-  // Override `Backbone.sync` to use delegate to the model or collection's
-  // *localStorage* property, which should be an instance of `Store`.
-  Backbone.sync = function(method, model, success, error) {
-
-    var resp;
-    var store = model.localStorage || model.collection.localStorage;
-
-    switch (method) {
-      case "read":    resp = model.id ? store.find(model) : store.findAll(); break;
-      case "create":  resp = store.create(model);                            break;
-      case "update":  resp = store.update(model);                            break;
-      case "delete":  resp = store.destroy(model);                           break;
-    }
-
-    if (resp) {
-      success(resp);
-    } else {
-      // Swallow errors for now
-      // error("Record not found");
-    }
-  };
-} else {
-  Backbone.sync = $.noop;
-}
-//FlickrBomb by ZURB 2011; http://www.zurb.com/playground
 (function ($) {
   var localStorage = (supports_local_storage()) ? new Store("flickrBombImages") : null,
 
@@ -209,24 +117,28 @@ if (supports_local_storage()) {
         }
 
       }),
-      
+
       ImageView = Backbone.View.extend({
 
         tagName: "div",
 
         className: "flickrbombContainer",
 
-        template: _.template('<div class="flickrbombWrapper"><img class="flickrbomb" src="" /><a href="#" title="Setup" class="setupIcon"></a></div><div class="flickrbombFlyout"><div class="content"><a href="#" title="Previous Page" class="prev">&#9664;</a><a href="#" title="Next Page" class="next">&#9654;</a></div></div>'),
+		nodeID: null,
+
+        template: _.template('<div id="<%= this.nodeID %>" class="flickrbombWrapper"><img class="flickrbomb" src="" /><a href="#" title="Setup" class="setupIcon"></a></div><div class="flickrbombFlyout"><div class="content"><a href="#" title="Previous Page" class="prev">&#9664;</a><a href="#" title="Next Page" class="next">&#9654;</a></div></div>'),
 
         initialize: function (options) {
           _.bindAll(this, 'addImage', 'updateSrc', 'setDimentions', 'updateDimentions');
           var keywords = options.img.attr('src').replace('flickr://', '');
 
           this.$el = $(this.el);
-
+		  
           this.image = new Image({keywords: keywords, id: options.img.attr('id')});
           this.image.flickrImages.bind('add', this.addImage);
           this.image.bind('change:src', this.updateSrc);
+
+		  this.nodeID = this.image.id.replace(/ /g,'');
         },
 
         events: {
@@ -298,13 +210,14 @@ if (supports_local_storage()) {
 
         clickSetup: function (event) {
           event.preventDefault();
+
           this.toggleFlyout();
         },
 
-        toggleFlyout: function () {    
-          this.$('.flickrbombFlyout').toggle();
+        toggleFlyout: function () {
+			this.$('.flickrbombFlyout').toggle();
         },
-
+		
         selectImage: function (event) {
           event.preventDefault();
 
@@ -313,7 +226,6 @@ if (supports_local_storage()) {
 
         nextFlickrPhotos: function (event) {
           event.preventDefault();
-
           this.$('.flickrbombFlyout').find('a.photo').remove();
           this.image.flickrImages.nextPage();
         },
@@ -326,7 +238,7 @@ if (supports_local_storage()) {
 
         resize: function () {
           this.$('div.flickrbombWrapper').css({
-              width: this.width() + 'px', 
+              width: this.width() + 'px',
               height: this.height() + 'px'
           });
         },
@@ -340,10 +252,8 @@ if (supports_local_storage()) {
         }
 
       });
-
   $("img[src^='flickr://']").each(function () {
     var img = $(this);
-	$('.flickrbombContainer').css('height', img.height()+'px !important');
     var imageView = new ImageView({img: img});
     img.replaceWith(imageView.render().el);
   });