overlay_me 0.12.0

data/.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+*.gem
+.sass-cache
+manifest.json

data/CHANGELOG.md

@@ -0,0 +1,37 @@
+### Coming up
+..?
+
+### 0.12.0 - [Diff](https://github.com/frontfoot/overlay_me/compare/v0.11.1...v0.12.0)
+- changed the file structure, gem now includes only the minified javascript
+- minifying process became a bit cleaner
+- add RakeTask :watch to compile on the flow
+
+### 0.11.1 - [Diff](https://github.com/frontfoot/overlay_me/compare/v0.11.0...v0.11.1)
+- fix dynamic images duplication bug
+- fix hidden menu and content on top retention bug
+- update header of minified file to include sub-projects
+
+### 0.11.0 - [Diff](https://github.com/frontfoot/overlay_me/compare/v0.10.1...v0.11.0)
+- moving the original page content in a controlled sub div
+
+### 0.10.1 - [Diff](https://github.com/frontfoot/overlay_me/compare/v0.10.0...v0.10.1)
+- improved usability: image cells clickable, display mouseovers
+- some design
+
+### 0.10.0 - [Diff](https://github.com/frontfoot/overlay_me/compare/v0.9.2...v0.10.0)
+- js + css all in one UNIQUE minified overlay_me.min.js file
+- a bit of styling
+- fix style and events for Firefox
+- load an image by default at first use
+
+### 0.9.2 - [Diff](https://github.com/frontfoot/overlay_me/compare/v0.9.1...v0.9.2)
+- bookmarklet access
+- load only once
+- minified assets available
+
+### 0.9.1 - [Diff](https://github.com/frontfoot/overlay_me/compare/v0.9...v0.9.1)
+- added the global image dynamic add/remove/storing
+- rename the project to overlay_me
+
+### 0.9
+- first commited/shared/published version, prior to that, the script was local to some projects

data/Gemfile

@@ -0,0 +1,7 @@
+source "http://www.rubygems.org"
+
+gemspec
+
+gem 'jsmin'
+gem 'yui-compressor'
+gem 'listen'

data/Gemfile.lock

@@ -0,0 +1,70 @@
+PATH
+  remote: .
+  specs:
+    overlay_me (0.12.0)
+      coffee-script
+      compass
+      haml
+      json
+      rack
+      rake
+      sprockets-sass
+
+GEM
+  remote: http://www.rubygems.org/
+  specs:
+    POpen4 (0.1.4)
+      Platform (>= 0.4.0)
+      open4
+    Platform (0.4.0)
+    chunky_png (1.2.5)
+    coffee-script (2.2.0)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.3.1)
+    compass (0.12.1)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    execjs (1.3.1)
+      multi_json (~> 1.0)
+    ffi (1.0.11)
+    fssm (0.2.9)
+    haml (3.1.4)
+    hike (1.2.1)
+    jsmin (1.0.1)
+    json (1.7.0)
+    listen (0.4.2)
+      rb-fchange (~> 0.0.5)
+      rb-fsevent (~> 0.9.1)
+      rb-inotify (~> 0.8.8)
+    multi_json (1.3.4)
+    open4 (1.3.0)
+    rack (1.4.1)
+    rake (0.9.2.2)
+    rb-fchange (0.0.5)
+      ffi
+    rb-fsevent (0.9.1)
+    rb-inotify (0.8.8)
+      ffi (>= 0.5.0)
+    sass (3.1.15)
+    sprockets (2.4.1)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    sprockets-sass (0.8.0)
+      sprockets (~> 2.0)
+      tilt (~> 1.1)
+    tilt (1.3.3)
+    yui-compressor (0.9.6)
+      POpen4 (>= 0.1.4)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jsmin
+  listen
+  overlay_me!
+  yui-compressor

data/LICENSE

@@ -0,0 +1,21 @@
+Copyright (c) 2012 Joseph Boiteau, FrontFoot Media Solutions
+
+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.md

@@ -0,0 +1,136 @@
+## Use it now!
+
+Store the bookmarklet from [this page](http://dev.frontfoot.com.au/overlay_me/demo_page.html) and load OverlayMe on top of any web page!
+
+If you just want download the compiled, minified archive: [overlay_me.min.js](https://raw.github.com/frontfoot/overlay_me/master/vendor/assets/javascripts/overlay_me/overlay_me.min.js) (CSS embedded!)
+
+note: overlay_me.js and overlay_me.css are both generated unminified archives, original source code is in javascripts/ and stylesheets/ folders
+
+## Screenshot
+
+![Screenshot](http://github.com/frontfoot/overlay_me/raw/master/screenshot_frontfoot_website.jpg)
+
+
+## Features
+
+- overlay images over a web page saving their position/opacity locally (using HTML5 localStorage)
+  - images can be loaded from a project local directory (see Project base use)
+  - an image can be added on the fly with its absolute url
+- bring back your HTML on top of the overlays
+  - control the opacity of the page content
+  - keep on playing with the CSS while having with a visual overlay
+- addon layout_resizer, to switch between pre-recorded devices format
+
+
+## Why
+
+The purpose of this tool is to help the developer to meet designers requirements by overlaying images on the page.
+
+We were struggling to see the gap between designers photoshop files and our HTML/CSS implementation, the best way to figure it out was to load their rendered work in the page and play with opacity to see the differences, that's what this tool facilitate.
+
+
+## Todo
+
+- allow local image uploading (a temporary hosting on amazon s3 ?), [makiapp.com](http://makiapp.com/) does it!
+- overlays
+  - make a cycling system, by click or keypress, to iterate through overlays one by one
+  - overlay images sub-sets (sub-directories) should appear as nested blocks
+  - make another version of the toolbar fixed on top of the screen
+
+
+## Usage
+
+- You can use this tool on the go, over any site, via [the bookmarket](http://dev.frontfoot.com.au/overlay_me/demo_page.html)
+
+- If you want to include it in a non-Ruby project, use the precompiled/minified script ([overlay_me.min.js](https://raw.github.com/frontfoot/overlay_me/master/vendor/assets/javascripts/overlay_me/overlay_me.min.js))
+  
+- And if you're using Ruby, install the gem :)
+
+  if using bundler:
+
+    # Gemfile
+    
+    gem "overlay_me", :git => "git://github.com/frontfoot/overlay_me.git"
+
+
+### Load the script at the end of your body tag
+
+under a rails app:
+
+    = javascript_include_tag 'overlay_me/overlay_me.min.js'
+
+or in a simpler project, (we are using [middleman](http://middlemanapp.com/))
+  
+    %script{ :src => '/javascripts/overlay_me/overlay_me.min.js', :type => 'text/javascript', :charset => 'utf-8' }
+
+
+### Extended use - share overlay images to your work team, keep images sets per project
+
+By default the script will try to load the list of images from /overlay_images
+
+List your images in JSON, simply:
+
+    [
+      "/images/overlays/Home_1024r_1.png",
+      "/images/overlays/Home_1100r_1.jpg",
+      "/images/overlays/Home_1300r_1.png",
+      "/images/overlays/Home_320r_1.jpg",
+      "/images/overlays/Home_480r_1.png",
+      "/images/overlays/Home_720r_1.png",
+      "/images/overlays/Home_768r_1.png"
+    ]
+
+If you're using the gem, I made a simple Rack app to build that JSON list for you
+
+Here is how to initialise the path and the feed route
+
+using rails
+
+    #config/initializers/overlay_me.rb
+
+    if defined?(OverlayMe)
+      OverlayMe.root_dir = Dir[Rails.root.join("public")].to_s
+      OverlayMe.overlays_directory = 'images/overlays' 
+    end
+
+    #config/routes.rb
+
+    if ["development", "test"].include? Rails.env
+      match "/overlay_images" => OverlayMe::App
+    end
+
+using middleman
+
+    #config.rb:
+    
+    OverlayMe.root_dir = Dir.pwd + '/source'
+    OverlayMe.overlays_directory = 'images/overlays'
+
+    map "/overlay_images" do
+      run OverlayMe::App
+    end
+
+
+
+## Plug on!
+
+You can add some app specific menu for specific project.. Have a look at layout_resizer.coffee addon to have a quick view of how to use OverlayMe.Menu and OverlayMe.MenuItem
+
+    = javascript_include_tag 'overlay_me/addons/layout_resizer.js'
+
+    
+
+## Known problems
+
+- you can't find the panel? it's probably hidden aside (previous bigger screen location) or hidden (press 'h')
+- you see the overlay but can't drag it? the 'Content on Top' option is probably on (press 'c')
+
+
+
+## Authors / Contributors
+
+- Rufus Post - former workmate who founded the ovelaying concept
+- Joseph Boiteau - taking Rufus's idea to 11 (and loving it) - FrontFoot Media Solutions
+- Lachlan Sylvester - Ruby advisor - Frontfoot Media Solutions
+- Dan Smith - User Experience Strategist and Califloridian - FrontFoot Media Solutions
+

data/Rakefile

@@ -0,0 +1,115 @@
+require 'rubygems'
+require "bundler/setup"
+require 'sprockets'
+require 'sprockets-sass'
+require 'compass'
+require 'rake/sprocketstask'
+require 'jsmin'
+require 'yui/compressor'
+require 'listen'
+
+ENV['js_sprocket'] = "overlay_me.js"
+ENV['js_minified'] = "vendor/assets/javascripts/overlay_me/overlay_me.min.js"
+ENV['css_sprocket'] = "overlay_me.css"
+ENV['css_minified'] = "style.min.css"
+
+ENV['addon_layout_resizer'] = "addons/layout_resizer.js"
+
+desc "default sprockets [:assets] compiling"
+Rake::SprocketsTask.new do |t|
+  environment = Sprockets::Environment.new
+  environment.append_path 'javascripts'
+  environment.append_path 'stylesheets'
+
+  t.environment = environment
+  t.output      = "./"
+  t.assets      = [ ENV['js_sprocket'], ENV['css_sprocket'], ENV['addon_layout_resizer'] ]
+end
+
+desc "remove DIGEST from filenames"
+task :remove_digest do
+  puts "\n** Rename compiled files without generated DIGEST **"
+  Dir["{.,addons}/*-*.{js,css}"].each do |file|
+    new_file = file.sub /(.*)-[^\.]+(\.[^\.]+)/, '\1\2'
+    puts "#{file} -> #{new_file}"
+    `mv #{file} #{new_file}`
+  end
+end
+
+desc "compile assets with Sprockets, remove DIGEST, move some files"
+task :compile => [:assets, :remove_digest] do
+  puts "\n** Move addons into vendor/asssets/ **"
+  `mv addons vendor/assets/javascripts/overlay_me/`
+end
+
+
+desc "minify the assets"
+namespace :minify do
+
+  task :css do
+    puts "\n** Minify CSS file #{ENV['css_sprocket']} -> #{ENV['css_minified']} **"
+    File.open(ENV['css_minified'], 'w') do |file|
+      file.write(YUI::CssCompressor.new.compress(File.read(ENV['css_sprocket'])))
+    end
+  end
+
+  task :add_minified_css_to_js do
+    puts "\n** Add CSS minified blob inline in the javascript :! **"
+
+    css_blob = File.read(ENV['css_minified'])
+    js_string = File.read(ENV['js_sprocket']).gsub(/#CSS_BLOB#/, css_blob)
+    File.open(ENV['js_sprocket'], 'w') { |f| f.write(js_string) }
+    `rm #{ENV['css_minified']}` # remove minified css file
+  end
+
+  task :js do
+    puts "\n** Minify JS file #{ENV['js_sprocket']} -> #{ENV['js_minified']} **"
+    File.open(ENV['js_minified'], 'w') do |file|
+      file.write(JSMin.minify(File.read(ENV['js_sprocket'])))
+    end
+  end
+
+  desc "add a header on the minified js file to properly redirect curious"
+  task :prepend_header do
+    puts "\n** Prepend header to compiled files **"
+
+    header  = "// OverlayMe v#{OverlayMe::VERSION}\n"
+    header += "// http://github.com/frontfoot/overlay_me\n"
+    header += "//\n"
+    header += "// #{File.open('LICENSE'){|f| f.readline().chomp() }}\n"
+    header += "// OverlayMe is freely distributable under the MIT license.\n"
+    header += "//\n"
+    header += "// Includes:\n"
+    header += "// - jQuery - http://jquery.com/ - Copyright 2011, John Resig\n"
+    header += "// - Backbone.js - http://documentcloud.github.com/backbone - (c) 2010 Jeremy Ashkenas, DocumentCloud Inc.\n"
+    header += "// - Underscore.js - http://documentcloud.github.com/underscore - (c) 2011 Jeremy Ashkenas, DocumentCloud Inc.\n"
+    header += "// - html5slider - https://github.com/fryn/html5slider - Copyright (c) 2010-2011 Frank Yan\n"
+    header += "\n"
+    puts header
+
+    original_content = File.read(ENV['js_minified'])
+    File.open(ENV['js_minified'], 'w') do |f|
+      f.write(header)
+      f.write(original_content)
+    end
+  end
+
+  task :all_in_one => [:css, :add_minified_css_to_js, :js, :prepend_header]
+end
+
+desc "package, aka prepare the minified .js"
+task :package => [:compile, 'minify:all_in_one']
+
+desc "Watch javascripts and stylesheets folders re-package the assets at each change"
+task :watch do
+  callback = Proc.new do
+    `rake package`  # trust me I'm not proud... but couldn't find any better
+    puts 'done'
+  end
+  listener = Listen.to('stylesheets', 'javascripts')
+  listener.latency(0.5)
+  listener.change(&callback)
+  listener.start
+end
+
+

data/addons/layout_resizer.js

@@ -0,0 +1,51 @@
+(function() {
+  var layout_menu, layouts;
+
+  layouts = {
+    smartphone_portrait: 320,
+    smartphone_landscape: 480,
+    tablet_port: 768,
+    tablet_land: 1024,
+    none: null
+  };
+
+  window.resize_page = function(width) {
+    if (width === null || isNaN(width)) {
+      $('#overlay_me_page_container').css({
+        width: 'auto'
+      });
+    } else {
+      $('#overlay_me_page_container').css({
+        width: "" + width + "px"
+      });
+    }
+    _.each(layouts, function(_width, name) {
+      if (width === _width) {
+        return $('body').addClass(name);
+      } else {
+        return $('body').removeClass(name);
+      }
+    });
+    return localStorage.setItem("layout-width", width);
+  };
+
+  window.resize_page(parseInt(localStorage.getItem("layout-width")));
+
+  layout_menu = new OverlayMe.MenuItem({
+    id: "layout-buttons",
+    title: "Layout Resizing"
+  });
+
+  _.each(layouts, function(width, name) {
+    var button;
+    button = (new Backbone.View).make('button', {}, name);
+    $(button).addClass(name);
+    $(button).bind('click', function(e) {
+      return window.resize_page("" + width);
+    });
+    return layout_menu.append(button);
+  });
+
+  $(OverlayMe.Menu).append(layout_menu.render());
+
+}).call(this);

data/demo_page.html

@@ -0,0 +1,33 @@
+<html>
+<head>
+  <style type="text/css">
+    a.this_link {
+      display: inline-block;
+      width: 75px;
+      vertical-align: bottom;      
+      height: 18px;
+    }
+    a.this_link:before {
+      content: "this link";
+      text-align: center;
+      text-decoration: underline;
+      background: white;
+      width: 75px;
+      height: 18px;
+      position: absolute;
+    }
+  </style>  
+</head>
+  <body>
+    <div id="container">
+
+      <h2>OverlayMe bookmarklet</h2>
+
+      <p>Drag and drop <a class="this_link" href="javascript:(function(){if(!window.overlay_me_loaded){document.body.appendChild(document.createElement('script')).src='https://raw.github.com/frontfoot/overlay_me/master/vendor/assets/javascripts/overlay_me/overlay_me.min.js';}})();">overlay_me</a> to your bookmarks, then go on any web page and click it!</p>
+
+      <p>Full project here: <a href="https://github.com/frontfoot/overlay_me">https://github.com/frontfoot/overlay_me</a></p>
+
+    </div>
+  </body>
+</html>
+

data/javascripts/addons/layout_resizer.js.coffee

@@ -0,0 +1,42 @@
+## require menu.coffee and menu_item.coffee to be loaded first !!
+# Need the page content to be in #content
+
+
+# available layouts
+layouts = {
+  smartphone_portrait: 320,
+  smartphone_landscape: 480,
+  tablet_port: 768,
+  tablet_land: 1024,
+  none: null
+}
+
+window.resize_page = (width) ->
+  if width == null || isNaN(width)
+    $('#overlay_me_page_container').css { width: 'auto' }
+  else
+    $('#overlay_me_page_container').css { width: "#{width}px" }
+
+  _.each layouts, (_width, name) ->
+    if width == _width
+      $('body').addClass name
+    else
+      $('body').removeClass name
+  localStorage.setItem "layout-width", width
+
+#load previous state (or null if empty)
+window.resize_page parseInt(localStorage.getItem("layout-width"))
+
+# add the buttons to the menu_item
+layout_menu = new OverlayMe.MenuItem({id: "layout-buttons", title: "Layout Resizing" })
+_.each layouts, (width, name) ->
+  button = (new Backbone.View).make 'button', {}, name
+  $(button).addClass name
+  $(button).bind 'click', (e) ->
+    window.resize_page "#{width}"
+  layout_menu.append button
+
+# add the element to the page menu
+$(OverlayMe.Menu).append layout_menu.render()
+
+

data/javascripts/basics.js.coffee

@@ -0,0 +1,25 @@
+#= require 'menu'
+#= require 'menu_item'
+
+if OverlayMe.mustLoad()
+
+  basics_panel = new OverlayMe.MenuItem({id: "bacis-options", title: "Basics" })
+
+  clear_all_button = (new Backbone.View).make 'button', { onClick: "javascript: localStorage.clear(); window.location.reload()" }, 'Reset All'
+  basics_panel.append clear_all_button
+
+  hide_button = (new Backbone.View).make 'button', {}, 'Hide menu (touch "h")'
+  $(hide_button).bind 'click', (event) =>
+    $(OverlayMe.menu_box).trigger 'toggle:visibility'
+  basics_panel.append hide_button
+
+  # add the element to the page menu
+  $(OverlayMe.Menu).append basics_panel.render()
+
+  # add listener for keypress
+  $(window).bind('keypress', (event) =>
+    #console.log event.keyCode, event.charCode
+    if event.charCode == 104 # H
+      $(OverlayMe.menu_box).trigger 'toggle:visibility'
+  )
+

data/javascripts/draggable.js.coffee

@@ -0,0 +1,51 @@
+class OverlayMe.Draggable extends Backbone.View
+
+  tagName: 'div'
+
+  initialize: (attributes, options) ->
+    super(attributes, options)
+    if ( cssData = localStorage.getItem(@id) )
+      $(@el).css(JSON.parse(cssData))
+    else
+      $(@el).css(options.default_css) unless options.default_css == undefined
+
+  engageMove: (event) ->
+    event.preventDefault()
+    @moving = true
+    @lastX = event.clientX
+    @lastY = event.clientY
+    $(window).bind 'mymousemove', (event, mouseEvent) =>
+      @updateOverlay(mouseEvent.clientX - @lastX, mouseEvent.clientY - @lastY)
+      @lastX = mouseEvent.clientX
+      @lastY = mouseEvent.clientY
+    $(@el).addClass 'on-move'
+
+  endMove: (event) ->
+    @moving = false
+    $(window).unbind('mymousemove')
+    $(@el).removeClass 'on-move'
+
+  toggleMove: (event) ->
+    if @moving
+      @endMove(event)
+    else
+      @engageMove(event)
+
+  updateOverlay: (x, y) ->
+    newX = parseInt($(@el).css('left')) + x
+    newY = parseInt($(@el).css('top')) + y
+    $(@el).css({ top:"#{newY}px", left:"#{newX}px", right: "auto"})
+    @saveCss()
+
+  saveCss: () ->
+    cssData = {
+      top:$(@el).css('top'),
+      left:$(@el).css('left'),
+      visibility:$(@el).css('visibility'),
+      opacity: $(@el).css('opacity')
+    }
+    localStorage.setItem(@id, JSON.stringify(cssData))
+
+  render: ->
+    @el
+

data/javascripts/init.js.coffee

@@ -0,0 +1,24 @@
+#= require 'lib/jquery.js'
+#= require 'lib/underscore.js'
+#= require 'lib/backbone.js'
+#= require 'lib/html5slider.js'
+
+# to build the 1 file minified version, we insert the minified CSS directly there
+# dirty but so convenient!
+$('head').append('<style rel="stylesheet" type="text/css">#CSS_BLOB#</style>')
+
+# initialize Models/Views namespace
+window.OverlayMe = {}
+
+# add a flag to stop crazy bookmarklet clicking
+OverlayMe.isLoaded = ->
+  window.overlay_me_loaded
+
+# check if browser is a mobile device
+OverlayMe.isMobile = ->
+  return navigator.userAgent.match /(iPhone|iPod|iPad|Android)/
+
+# give a shortName method for checks in the app
+OverlayMe.mustLoad = ->
+  return !OverlayMe.isLoaded() && !OverlayMe.isMobile()
+