overlay_me 0.13.0 → 0.13.4

data/CHANGELOG.md

@@ -1,4 +1,13 @@
-### 0.13.0 - [Diff](https://github.com/frontfoot/overlay_me/compare/v0.12.1...v0.13)
+- add jasmine tests
+- refactorings
+
+### 0.13.3 - [Diff](https://github.com/frontfoot/overlay_me/compare/v0.13.0...v0.13.3)
+- handle Rails assets pipeline
+
+### 0.13.1, 0.13.2
+- some troubles with these gem builds, no idea what I fucked up !
+
+### 0.13.0 - [Diff](https://github.com/frontfoot/overlay_me/compare/v0.12.1...v0.13.0)
 - multi/sub directories images can be added !
 - updated style and collapsing events
 

data/Gemfile

@@ -1,7 +1,16 @@
 source "http://www.rubygems.org"
 
+## gems dependencies in overlay_me.gemspec
 gemspec
 
+## packaging
 gem 'jsmin'
 gem 'yui-compressor'
-gem 'listen'
+
+## tests
+gem 'guard-coffeescript', "~>1.2.0"
+gem 'rb-fsevent'
+gem 'guard-rake'
+
+# debug
+gem 'ruby-debug'

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    overlay_me (0.13.0)
+    overlay_me (0.13.4)
       coffee-script
       compass
       haml
@@ -17,24 +17,35 @@ GEM
       Platform (>= 0.4.0)
       open4
     Platform (0.4.0)
-    chunky_png (1.2.5)
+    chunky_png (1.2.6)
     coffee-script (2.2.0)
       coffee-script-source
       execjs
     coffee-script-source (1.3.1)
-    compass (0.12.1)
+    columnize (0.3.2)
+    compass (0.12.2)
       chunky_png (~> 1.2)
       fssm (>= 0.2.7)
       sass (~> 3.1)
-    execjs (1.3.1)
+    execjs (1.4.0)
       multi_json (~> 1.0)
-    ffi (1.0.11)
+    ffi (1.1.5)
     fssm (0.2.9)
-    haml (3.1.4)
+    guard (1.3.2)
+      listen (>= 0.4.2)
+      thor (>= 0.14.6)
+    guard-coffeescript (1.2.0)
+      coffee-script (>= 2.2.0)
+      guard (>= 1.1.0)
+    guard-rake (0.0.7)
+      guard
+      rake
+    haml (3.1.7)
     hike (1.2.1)
     jsmin (1.0.1)
-    json (1.7.0)
-    listen (0.4.2)
+    json (1.7.5)
+    linecache (0.43)
+    listen (0.4.7)
       rb-fchange (~> 0.0.5)
       rb-fsevent (~> 0.9.1)
       rb-inotify (~> 0.8.8)
@@ -47,15 +58,21 @@ GEM
     rb-fsevent (0.9.1)
     rb-inotify (0.8.8)
       ffi (>= 0.5.0)
-    sass (3.1.15)
-    sprockets (2.4.1)
+    ruby-debug (0.10.4)
+      columnize (>= 0.1)
+      ruby-debug-base (~> 0.10.4.0)
+    ruby-debug-base (0.10.4)
+      linecache (>= 0.3)
+    sass (3.2.1)
+    sprockets (2.4.5)
       hike (~> 1.2)
       multi_json (~> 1.0)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
-    sprockets-sass (0.8.0)
+    sprockets-sass (0.9.0)
       sprockets (~> 2.0)
       tilt (~> 1.1)
+    thor (0.16.0)
     tilt (1.3.3)
     yui-compressor (0.9.6)
       POpen4 (>= 0.1.4)
@@ -64,7 +81,10 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  guard-coffeescript (~> 1.2.0)
+  guard-rake
   jsmin
-  listen
   overlay_me!
+  rb-fsevent
+  ruby-debug
   yui-compressor

data/Guardfile

@@ -0,0 +1,13 @@
+# A Guardfile
+# More info at https://github.com/guard/guard#readme
+
+require 'coffee_script'
+require 'sass'
+
+guard 'rake', :task => 'assets:compile_debug', :run_on_start => false do
+  watch(%r{^javascripts/coffeescripts/*})
+  watch(%r{^stylesheets/scss/overlay_me.css.scss})
+end
+
+guard 'coffeescript', :input => 'spec/javascripts/coffeescripts', :output => 'spec/javascripts', :all_on_start => true
+

data/README.md

@@ -4,41 +4,56 @@ Store the bookmarklet from [this page](http://frontfoot.github.com/overlay_me/de
 
 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
+note: javascripts/*.js and stylesheets/*.css are both generated unminified archives, original source code is in respective coofeescripts and scss subfolders
 
 ## Screenshot
 
 ![Screenshot](http://github.com/frontfoot/overlay_me/raw/master/screenshot_frontfoot_website.jpg)
 
 
+## 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.
+
+
 ## 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)
+- overlay images over a web page
+  - position and opacity of each image is saved locally to the browser (using HTML5 localStorage)
+  - images can be loaded from a project directory (see Project base use underneath)
   - an image can be added on the fly with its absolute url
-- bring back your HTML on top of the overlays
+  - hideable / collapsible toolbox ('h' and 'c' keys)
+- HTML on top of the overlays
+  - page content can be brought back on top of the overlays ('t' key switch)
   - 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
+  - keep on playing with the CSS while having the visual overlay by transparency
+- addon layout_resizer: switch between pre-recorded devices format
 
 
-## Why
+## Compare
 
-The purpose of this tool is to help the developer to meet designers requirements by overlaying images on the page.
+I've found 2 other similar tools
 
-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.
+- [http://makiapp.com/](http://makiapp.com/) - really nice if you're not a dev guy and want to upload local files
+- [http://pixelperfectplugin.com/](http://pixelperfectplugin.com/) - same idea than overlay_me but firefox only (extension) and really less smooth on the dragging
 
 
 ## Todo
 
-- fix styles for firefox
+- fix styles for firefox and IE (may not happen)
 - allow local image uploading (hosting on amazon s3 ?), [makiapp.com](http://makiapp.com/) does it!
 - add another dragging bar at the bottom (or not)
 - prevent the dragging bar(s) to be out of reach
 - overlays
   - make a cycling system, by click or keypress, to iterate through overlays one by one
-- write some tests !!!
-
+  - make a pixel by pixel motion feature - see https://github.com/madrobby/keymaster
+- write more tests
+  - tests are in progress
+  - why not a CI service - see [travis-ci.org](http://travis-ci.org/#!/michelson/lazy_high_charts/builds/527014)
+- investigate non working sites
+  - http://www.informit.com/articles/article.aspx?p=1383760
 
 
 ## Usage
@@ -114,7 +129,6 @@ using middleman
     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
@@ -122,12 +136,10 @@ You can add some app specific menu for specific project.. Have a look at layout_
     = 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')
-
+- you see the overlay but can't drag it? the 'Content on Top' option is probably on (press 't')
 
 
 ## Author
@@ -141,3 +153,7 @@ You can add some app specific menu for specific project.. Have a look at layout_
 - Lachlan Sylvester - Ruby advisor - Frontfoot Media Solutions
 - Dan Smith - User Experience Strategist and Califloridian - former workmate
 
+
+## License
+
+MIT License

data/Rakefile

@@ -3,114 +3,93 @@ 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"
+namespace :assets do
 
-ENV['addon_layout_resizer'] = "addons/layout_resizer.js"
+  ENV['js_sprocket'] = "javascripts/overlay_me.js"
+  ENV['js_with_css'] = "javascripts/overlay_me.css_embedded.js"
+  ENV['js_minified'] = "vendor/assets/javascripts/overlay_me/overlay_me.min.js"
+  ENV['css_sprocket'] = "stylesheets/overlay_me.css"
+  ENV['css_minified'] = "stylesheets/overlay_me.min.css"
+  ENV['addon_layout_resizer'] = "vendor/assets/javascripts/overlay_me/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'
+  # config to remove the original filenames into generated css (bloody useful for dev though)
+  Sprockets::Sass.options[:line_comments] = false
 
-  t.environment = environment
-  t.output      = "./"
-  t.assets      = [ ENV['js_sprocket'], ENV['css_sprocket'], ENV['addon_layout_resizer'] ]
-end
+  desc "sprockets compiling/jamming"
+  puts "\n** Sprocketting #{ENV['js_sprocket']}, #{ENV['css_sprocket']}, #{ENV['addon_layout_resizer']} **"
+  task :compile do
+    environment = Sprockets::Environment.new
+    environment.append_path 'javascripts/coffeescripts'
+    environment.append_path 'stylesheets/scss'
 
-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}`
+    File.open(ENV['js_sprocket'], 'w'){ |f| f.write(environment[File.basename(f.path)].to_s) }
+    File.open(ENV['css_sprocket'], 'w'){ |f| f.write(environment[File.basename(f.path)].to_s) }
+    File.open(ENV['addon_layout_resizer'], 'w'){ |f| f.write(environment[File.basename(f.path)].to_s) }
   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/ **"
-  `rm -rf vendor/assets/javascripts/overlay_me/addons`
-  `mv addons vendor/assets/javascripts/overlay_me/`
-end
 
+  desc "minify the assets"
+  namespace :minify do
 
-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'])))
+    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
-  end
 
-  task :add_minified_css_to_js do
-    puts "\n** Add CSS minified blob inline in the javascript :! **"
+    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
+      css_blob = File.read(ENV['css_minified'])
+      js_string = File.read(ENV['js_sprocket']).gsub(/#CSS_BLOB#/, css_blob)
+      File.open(ENV['js_with_css'], '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'])))
+    task :js do
+      puts "\n** Minify JS file #{ENV['js_with_css']} -> #{ENV['js_minified']} **"
+      File.open(ENV['js_minified'], 'w') do |file|
+        file.write(JSMin.minify(File.read(ENV['js_with_css'])))
+      end
     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)
+    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]
+    task :only_css_for_js_debug => [:css, :add_minified_css_to_js]
   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 "package, aka prepare the minified .js"
-task :package => [:compile, 'minify:all_in_one']
+  desc "compile all js in 1, but no minifying (useful for jasmine tests via guard-rake)"
+  task :compile_debug => [:compile, 'minify:only_css_for_js_debug']
 
-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/javascripts/coffeescripts/basics_panel.js.coffee

@@ -0,0 +1,42 @@
+#= require 'menu'
+#= require 'menu_item'
+
+class OverlayMe.BasicsPanel extends OverlayMe.MenuItem
+
+  initialize: (attributes, options) ->
+    super({id: "basics-options-panel", title: "Basics" }, options)
+
+    collapse_button = (new Backbone.View).make 'button', { class: 'collapse'}, 'Collapse (c)'
+    $o(collapse_button).bind 'click', (event) =>
+      OverlayMe.menu.toggleCollapse()
+    @append collapse_button
+
+    clear_all_button = (new Backbone.View).make 'button', { class: 'reset', onClick: "javascript: OverlayMe.clearAndReload()" }, 'Reset All (r)'
+    @append clear_all_button
+
+    toggle_all_display = ->
+      $o(window).trigger 'overlay_me:toggle_all_display'
+      $o(window).trigger 'overlay_me:toggle_overlay_me_images_container_display'
+
+    hide_button = (new Backbone.View).make 'button', { class: 'hide' }, 'Hide (h)'
+    $o(hide_button).bind 'click', (event) =>
+      toggle_all_display()
+    @append hide_button
+
+    # add the element to the menu (so yes it has to be there!)
+    OverlayMe.menu.append @render()
+
+    # add listener for keypress
+    $o(window).bind('keypress', (event) =>
+      # console.log event.keyCode, event.charCode
+      if event.charCode == 104 # h
+        toggle_all_display()
+      if event.charCode == 99 # c
+        OverlayMe.menu.toggleCollapse()
+      if event.charCode == 114 # r
+        OverlayMe.clearAndReload()
+    )
+
+# create one at DOM loaded
+$o ->
+  OverlayMe.basics_panel = new OverlayMe.BasicsPanel() unless OverlayMe.basics_panel