From d70b41b915fba4a5613868c2824eb1853420dbc4 Mon Sep 17 00:00:00 2001 From: Jonathon Wilson Date: Sat, 22 Sep 2012 13:21:56 -0600 Subject: [PATCH 1/6] Get webfonts working in client. --- app/assets/javascripts/layout.js | 1 - app/assets/stylesheets/lato.css | 116 ++++++++++++++++++++++++++++++ app/views/clients/index.html.erb | 24 +------ app/views/layouts/client.html.erb | 1 - config/application.rb | 4 ++ 5 files changed, 122 insertions(+), 24 deletions(-) create mode 100644 app/assets/stylesheets/lato.css diff --git a/app/assets/javascripts/layout.js b/app/assets/javascripts/layout.js index e9ab3998e..5f2a4947d 100644 --- a/app/assets/javascripts/layout.js +++ b/app/assets/javascripts/layout.js @@ -318,7 +318,6 @@ function linkClicked(evt) { evt.preventDefault(); var destination = $(this).attr('layout-link'); - console.debug("Destination:" + destination); var destinationType = $('[layout-id="' + destination + '"]').attr("layout"); if (destinationType === "screen") { self.location = '#/' + destination; diff --git a/app/assets/stylesheets/lato.css b/app/assets/stylesheets/lato.css new file mode 100644 index 000000000..ed16aefd1 --- /dev/null +++ b/app/assets/stylesheets/lato.css @@ -0,0 +1,116 @@ +@font-face { + font-family: 'LatoBlackItalic'; + src: url('lato/Lato-BlaIta-webfont.eot'); + src: url('lato/Lato-BlaIta-webfont.eot?#iefix') format('embedded-opentype'), + url('lato/Lato-BlaIta-webfont.woff') format('woff'), + url('lato/Lato-BlaIta-webfont.ttf') format('truetype'), + url('lato/Lato-BlaIta-webfont.svg#LatoBlackItalic') format('svg'); + font-weight: normal; + font-style: normal; + +} + +@font-face { + font-family: 'LatoBlack'; + src: url('lato/Lato-Bla-webfont.eot'); + src: url('lato/Lato-Bla-webfont.eot?#iefix') format('embedded-opentype'), + url('lato/Lato-Bla-webfont.woff') format('woff'), + url('lato/Lato-Bla-webfont.ttf') format('truetype'), + url('lato/Lato-Bla-webfont.svg#LatoBlack') format('svg'); + font-weight: normal; + font-style: normal; + +} + +@font-face { + font-family: 'LatoBoldItalic'; + src: url('lato/Lato-BolIta-webfont.eot'); + src: url('lato/Lato-BolIta-webfont.eot?#iefix') format('embedded-opentype'), + url('lato/Lato-BolIta-webfont.woff') format('woff'), + url('lato/Lato-BolIta-webfont.ttf') format('truetype'), + url('lato/Lato-BolIta-webfont.svg#LatoBoldItalic') format('svg'); + font-weight: normal; + font-style: normal; + +} + +@font-face { + font-family: 'LatoBold'; + src: url('lato/Lato-Bol-webfont.eot'); + src: url('lato/Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'), + url('lato/Lato-Bol-webfont.woff') format('woff'), + url('lato/Lato-Bol-webfont.ttf') format('truetype'), + url('lato/Lato-Bol-webfont.svg#LatoBold') format('svg'); + font-weight: normal; + font-style: normal; + +} + +@font-face { + font-family: 'LatoItalic'; + src: url('lato/Lato-RegIta-webfont.eot'); + src: url('lato/Lato-RegIta-webfont.eot?#iefix') format('embedded-opentype'), + url('lato/Lato-RegIta-webfont.woff') format('woff'), + url('lato/Lato-RegIta-webfont.ttf') format('truetype'), + url('lato/Lato-RegIta-webfont.svg#LatoItalic') format('svg'); + font-weight: normal; + font-style: normal; + +} + +@font-face { + font-family: 'LatoRegular'; + src: url('lato/Lato-Reg-webfont.eot'); + src: url('lato/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'), + url('lato/Lato-Reg-webfont.woff') format('woff'), + url('lato/Lato-Reg-webfont.ttf') format('truetype'), + url('lato/Lato-Reg-webfont.svg#LatoRegular') format('svg'); + font-weight: normal; + font-style: normal; + +} +@font-face { + font-family: 'LatoLightItalic'; + src: url('lato/Lato-LigIta-webfont.eot'); + src: url('lato/Lato-LigIta-webfont.eot?#iefix') format('embedded-opentype'), + url('lato/Lato-LigIta-webfont.woff') format('woff'), + url('lato/Lato-LigIta-webfont.ttf') format('truetype'), + url('lato/Lato-LigIta-webfont.svg#LatoLightItalic') format('svg'); + font-weight: normal; + font-style: normal; + +} +@font-face { + font-family: 'LatoLight'; + src: url('lato/Lato-Lig-webfont.eot'); + src: url('lato/Lato-Lig-webfont.eot?#iefix') format('embedded-opentype'), + url('lato/Lato-Lig-webfont.woff') format('woff'), + url('lato/Lato-Lig-webfont.ttf') format('truetype'), + url('lato/Lato-Lig-webfont.svg#LatoLight') format('svg'); + font-weight: normal; + font-style: normal; + +} +@font-face { + font-family: 'LatoHairlineItalic'; + src: url('lato/Lato-HaiIta-webfont.eot'); + src: url('lato/Lato-HaiIta-webfont.eot?#iefix') format('embedded-opentype'), + url('lato/Lato-HaiIta-webfont.woff') format('woff'), + url('lato/Lato-HaiIta-webfont.ttf') format('truetype'), + url('lato/Lato-HaiIta-webfont.svg#LatoHairlineItalic') format('svg'); + font-weight: normal; + font-style: normal; + +} + +@font-face { + font-family: 'LatoHairline'; + src: url('lato/Lato-Hai-webfont.eot'); + src: url('lato/Lato-Hai-webfont.eot?#iefix') format('embedded-opentype'), + url('lato/Lato-Hai-webfont.woff') format('woff'), + url('lato/Lato-Hai-webfont.ttf') format('truetype'), + url('lato/Lato-Hai-webfont.svg#LatoHairline') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/app/views/clients/index.html.erb b/app/views/clients/index.html.erb index bb54e2fad..6c34e12aa 100644 --- a/app/views/clients/index.html.erb +++ b/app/views/clients/index.html.erb @@ -384,31 +384,11 @@

- - - - + diff --git a/app/views/layouts/client.html.erb b/app/views/layouts/client.html.erb index 041592a26..0e1acf064 100644 --- a/app/views/layouts/client.html.erb +++ b/app/views/layouts/client.html.erb @@ -5,7 +5,6 @@ - <%= stylesheet_link_tag "common", media: "all" %> <%= stylesheet_link_tag "ie", media: "all" %> <%= stylesheet_link_tag "jamkazam", media: "all" %> <%= stylesheet_link_tag "lato", media: "all" %> diff --git a/config/application.rb b/config/application.rb index f68e29ce7..390f02ace 100644 --- a/config/application.rb +++ b/config/application.rb @@ -67,5 +67,9 @@ module SampleApp # Runs the websocket gateway within the web app config.websocket_gateway_uri = "ws://localhost:6767/websocket" + + # Add the assets/fonts directory to assets.paths + config.assets.paths << "#{Rails.root}/app/assets/fonts" + end end From 4e07d98315c90935542236d84e9f6051675da390 Mon Sep 17 00:00:00 2001 From: Jonathon Wilson Date: Sat, 22 Sep 2012 14:35:07 -0600 Subject: [PATCH 2/6] Remove Gemfile.lock. Will include in .gitignore shortly. --- Gemfile.lock | 249 --------------------------------------------------- 1 file changed, 249 deletions(-) delete mode 100644 Gemfile.lock diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 2708c2e65..000000000 --- a/Gemfile.lock +++ /dev/null @@ -1,249 +0,0 @@ -PATH - remote: ~/workspace/jam-db/target/ruby_package - specs: - jam_db (0.0.1) - pg_migrate (= 0.1.5) - -PATH - remote: ~/workspace/jam-pb/target/ruby/jampb - specs: - jampb (0.0.1) - -PATH - remote: ~/workspace/jam-ruby - specs: - jam_ruby (0.0.1) - -GEM - remote: https://rubygems.org/ - specs: - actionmailer (3.2.8) - actionpack (= 3.2.8) - mail (~> 2.4.4) - actionpack (3.2.8) - activemodel (= 3.2.8) - activesupport (= 3.2.8) - builder (~> 3.0.0) - erubis (~> 2.7.0) - journey (~> 1.0.4) - rack (~> 1.4.0) - rack-cache (~> 1.2) - rack-test (~> 0.6.1) - sprockets (~> 2.1.3) - activemodel (3.2.8) - activesupport (= 3.2.8) - builder (~> 3.0.0) - activerecord (3.2.8) - activemodel (= 3.2.8) - activesupport (= 3.2.8) - arel (~> 3.0.2) - tzinfo (~> 0.3.29) - activeresource (3.2.8) - activemodel (= 3.2.8) - activesupport (= 3.2.8) - activesupport (3.2.8) - i18n (~> 0.6) - multi_json (~> 1.0) - addressable (2.2.8) - arel (3.0.2) - bcrypt-ruby (3.0.1) - bootstrap-sass (2.0.4.0) - bootstrap-will_paginate (0.0.6) - will_paginate - builder (3.0.0) - capybara (1.1.2) - mime-types (>= 1.16) - nokogiri (>= 1.3.3) - rack (>= 1.0.0) - rack-test (>= 0.5.4) - selenium-webdriver (~> 2.0) - xpath (~> 0.1.4) - childprocess (0.3.5) - ffi (~> 1.0, >= 1.0.6) - chunky_png (1.2.6) - coffee-rails (3.2.2) - coffee-script (>= 2.2.0) - railties (~> 3.2.0) - coffee-script (2.2.0) - coffee-script-source - execjs - coffee-script-source (1.3.3) - compass (0.12.2) - chunky_png (~> 1.2) - fssm (>= 0.2.7) - sass (~> 3.1) - compass-rails (1.0.3) - compass (>= 0.12.2, < 0.14) - cucumber (1.2.1) - builder (>= 2.1.2) - diff-lcs (>= 1.1.3) - gherkin (~> 2.11.0) - json (>= 1.4.6) - cucumber-rails (1.2.1) - capybara (>= 1.1.2) - cucumber (>= 1.1.3) - nokogiri (>= 1.5.0) - database_cleaner (0.7.0) - diff-lcs (1.1.3) - erubis (2.7.0) - execjs (1.4.0) - multi_json (~> 1.0) - factory_girl (2.3.2) - activesupport - factory_girl_rails (1.4.0) - factory_girl (~> 2.3.0) - railties (>= 3.0.0) - faker (1.0.1) - i18n (~> 0.4) - ffi (1.1.5) - fssm (0.2.9) - gherkin (2.11.2) - json (>= 1.4.6) - gon (4.0.0) - actionpack (>= 2.3.0) - json - guard (1.3.2) - listen (>= 0.4.2) - thor (>= 0.14.6) - guard-rspec (0.5.5) - guard (>= 0.8.4) - guard-spork (0.3.2) - guard (>= 0.8.4) - spork (>= 0.8.4) - hike (1.2.1) - i18n (0.6.0) - journey (1.0.4) - jquery-rails (2.0.2) - railties (>= 3.2.0, < 5.0) - thor (~> 0.14) - json (1.7.5) - launchy (2.1.0) - addressable (~> 2.2.6) - libwebsocket (0.1.5) - addressable - listen (0.4.7) - rb-fchange (~> 0.0.5) - rb-fsevent (~> 0.9.1) - rb-inotify (~> 0.8.8) - little-plugger (1.1.3) - logging (1.7.2) - little-plugger (>= 1.1.3) - mail (2.4.4) - i18n (>= 0.4.0) - mime-types (~> 1.16) - treetop (~> 1.4.8) - mime-types (1.19) - multi_json (1.3.6) - nokogiri (1.5.5) - pg (0.14.0) - pg_migrate (0.1.5) - logging (= 1.7.2) - pg (= 0.14.0) - thor (= 0.15.4) - polyglot (0.3.3) - rack (1.4.1) - rack-cache (1.2) - rack (>= 0.4) - rack-ssl (1.3.2) - rack - rack-test (0.6.1) - rack (>= 1.0) - rails (3.2.8) - actionmailer (= 3.2.8) - actionpack (= 3.2.8) - activerecord (= 3.2.8) - activeresource (= 3.2.8) - activesupport (= 3.2.8) - bundler (~> 1.0) - railties (= 3.2.8) - railties (3.2.8) - actionpack (= 3.2.8) - activesupport (= 3.2.8) - rack-ssl (~> 1.3.2) - rake (>= 0.8.7) - rdoc (~> 3.4) - thor (>= 0.14.6, < 2.0) - 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) - rdoc (3.12) - json (~> 1.4) - rspec (2.11.0) - rspec-core (~> 2.11.0) - rspec-expectations (~> 2.11.0) - rspec-mocks (~> 2.11.0) - rspec-core (2.11.1) - rspec-expectations (2.11.2) - diff-lcs (~> 1.1.3) - rspec-mocks (2.11.2) - rspec-rails (2.11.0) - actionpack (>= 3.0) - activesupport (>= 3.0) - railties (>= 3.0) - rspec (~> 2.11.0) - ruby-protocol-buffers (1.2.2) - rubyzip (0.9.9) - sass (3.2.1) - sass-rails (3.2.5) - railties (~> 3.2.0) - sass (>= 3.1.10) - tilt (~> 1.3) - selenium-webdriver (2.25.0) - childprocess (>= 0.2.5) - libwebsocket (~> 0.1.3) - multi_json (~> 1.0) - rubyzip - spork (0.9.0) - sprockets (2.1.3) - hike (~> 1.2) - rack (~> 1.0) - tilt (~> 1.1, != 1.3.0) - thor (0.15.4) - tilt (1.3.3) - treetop (1.4.10) - polyglot - polyglot (>= 0.3.1) - tzinfo (0.3.33) - uglifier (1.2.3) - execjs (>= 0.3.0) - multi_json (>= 1.0.2) - uuidtools (2.1.2) - will_paginate (3.0.3) - xpath (0.1.4) - nokogiri (~> 1.3) - -PLATFORMS - ruby - -DEPENDENCIES - bcrypt-ruby (= 3.0.1) - bootstrap-sass (= 2.0.4) - bootstrap-will_paginate (= 0.0.6) - capybara (= 1.1.2) - coffee-rails (= 3.2.2) - compass-rails - cucumber-rails (= 1.2.1) - database_cleaner (= 0.7.0) - factory_girl_rails (= 1.4.0) - faker (= 1.0.1) - gon - guard-rspec (= 0.5.5) - guard-spork (= 0.3.2) - jam_db! - jam_ruby! - jampb! - jquery-rails (= 2.0.2) - launchy (= 2.1.0) - pg (= 0.14.0) - pg_migrate (= 0.1.5) - rails (= 3.2.8) - rspec-rails (= 2.11.0) - ruby-protocol-buffers (= 1.2.2) - sass-rails (= 3.2.5) - spork (= 0.9.0) - uglifier (= 1.2.3) - uuidtools (= 2.1.2) - will_paginate (= 3.0.3) From 3e8dfdf8f8b89e5e6308114978ad99fec357ba10 Mon Sep 17 00:00:00 2001 From: Jonathon Wilson Date: Sat, 22 Sep 2012 14:36:12 -0600 Subject: [PATCH 3/6] Ignore Gemfile.lock --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index c1acccabb..b2320f72a 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ doc/ .DS_Store .idea *.iml + +Gemfile.lock From 82cea286be965aa37b4ea4b2c17e9af17e02dd81 Mon Sep 17 00:00:00 2001 From: tihot_jk Date: Fri, 28 Sep 2012 01:20:43 -0700 Subject: [PATCH 4/6] Added initial web-socket communication to the client page. --- app/assets/javascripts/JamServer.js | 96 +++++++++++++++++++++++++++ app/controllers/clients_controller.rb | 5 ++ app/helpers/users_helper.rb | 5 +- app/views/clients/index.html.erb | 18 +++-- config/application.rb | 2 +- 5 files changed, 117 insertions(+), 9 deletions(-) create mode 100644 app/assets/javascripts/JamServer.js diff --git a/app/assets/javascripts/JamServer.js b/app/assets/javascripts/JamServer.js new file mode 100644 index 000000000..c17d9c462 --- /dev/null +++ b/app/assets/javascripts/JamServer.js @@ -0,0 +1,96 @@ +// The wrapper around the web-socket connection to the server +(function(global, $) { + var server = {}; + + // Let socket.io know where WebSocketMain.swf is + WEB_SOCKET_SWF_LOCATION = "assets/flash/WebSocketMain.swf"; + + server.socket = {}; + server.singedIn = false; + server.dispatchTable = {}; + + // TODO: Create the message factory here + //server.messageFactory = global.message_factory; + + server.registerMessageCallback = function(messageType, callback) { + if (server.dispatchTable[messageType] === undefined) { + server.dispatchTable[messageType] = []; + } + + server.dispatchTable[messageType].push(callback); + }; + + server.unregisterMessageCallback = function(messageType, callback) { + if (server.dispatchTable[messageType] !== undefined) { + for(var i = server.dispatchTable.length; i--;) { + if (server.dispatchTable[messageType][i] === callback) + { + server.dispatchTable[messageType].splice(i, 1); + break; + } + } + } + + if (server.dispatchTable[messageType].length == 0) { + delete server.dispatchTable[messageType]; + } + }; + + server.connect = function() { + server.registerMessageCallback(LOGIN_ACK, function() { server.signedIn = true; }); + + server.socket = new WebSocket(gon.websocket_gateway_uri); + server.socket.onopen = server.onOpen; + server.socket.onmessage = server.onMessage; + server.socket.onclose = server.onClose; + }; + + server.onOpen = function() { + var token, loginMessage; + + token = $.cookie("remember_token"); + loginMessage = global.message_factory.login_with_token(token); + + server.send(loginMessage); + }; + + server.onMessage = function(e) { + var message = JSON.parse(e.data), + payload = message[message.type.toLowerCase()], + callbacks = server.dispatchTable[message.type]; + + if (callbacks !== undefined) { + for(var i = callbacks.length; i--;) { + callbacks[i](payload); + } + } + else { + console.log("Unexpected message type %s.", message.type); + } + }; + + server.onClose = function() { + console.log("Socket to server closed."); + // TODO: reconnect + }; + + server.send = function(message) { + server.socket.send(JSON.stringify(message)); + }; + + server.loginSession = function(sessionId) { + var loginMessage; + + if (!signedIn) { + console.log("Not signed in!"); + // TODO: surface the error + return; + } + + loginMessage = global.message_factory.login_jam_session(sessionId); + server.send(loginMessage); + }; + + global.JamServer = server; + +})(window, jQuery); diff --git a/app/controllers/clients_controller.rb b/app/controllers/clients_controller.rb index bba33fde4..fad1d3213 100644 --- a/app/controllers/clients_controller.rb +++ b/app/controllers/clients_controller.rb @@ -1,9 +1,14 @@ class ClientsController < ApplicationController + include UsersHelper + # have to be signed in currently to see this screen before_filter :signed_in_user def index + # use gon to pass variables into javascript + gon.websocket_gateway_uri = Rails.application.config.websocket_gateway_uri + # don't use the rails tutorial layout for this page render :layout => 'client' end diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb index c27d31cbb..cf892e07f 100644 --- a/app/helpers/users_helper.rb +++ b/app/helpers/users_helper.rb @@ -1,11 +1,12 @@ module UsersHelper # Returns the Gravatar (http://gravatar.com/) for the given user. - def gravatar_for(user, options = { size: 50 }) + def gravatar_for(user, options = { size: 50, hclass: "gravatar" }) gravatar_id = Digest::MD5::hexdigest(user.email.downcase) size = options[:size] + hclass = options[:hclass] gravatar = gravatar_url = "https://secure.gravatar.com/avatar/#{gravatar_id}?s=#{size}" - image_tag(gravatar_url, alt: user.name, class: "gravatar") + image_tag(gravatar_url, alt: user.name, class: "#{hclass}") end end diff --git a/app/views/clients/index.html.erb b/app/views/clients/index.html.erb index 6c34e12aa..e3e50d962 100644 --- a/app/views/clients/index.html.erb +++ b/app/views/clients/index.html.erb @@ -2,16 +2,13 @@

JamKazam

- <%= image_tag "avatars/avatar_jonathon.png", :class=> "avatar medium" %> + <%= gravatar_for current_user, size: 52, hclass: "avatar medium" %>
-

Jonathon Wilson

+

<%= current_user.name %>

<%= image_tag "down_arrow.png", :class=> "profile-toggle" %>
  • Profile
    • -
  • Log Out
    • -
  • Log Out
    • -
  • Log Out
    • -
  • Log Out
    • +
  • <%= link_to "Sign out", signout_path, method: "delete" %>
@@ -388,6 +385,15 @@ $(function() { var jk = JamKazam(); jk.initialize(); + + window.JamServer.registerMessageCallback( + LOGIN_ACK, + function(payload) { + // TODO: Get a list of sessions and update in the UI to enable joining + alert("Logged in from IP: " + payload.public_ip); + }); + + window.JamServer.connect(); }) diff --git a/config/application.rb b/config/application.rb index 390f02ace..3e49197c2 100644 --- a/config/application.rb +++ b/config/application.rb @@ -66,7 +66,7 @@ module SampleApp config.assets.version = '1.0' # Runs the websocket gateway within the web app - config.websocket_gateway_uri = "ws://localhost:6767/websocket" + config.websocket_gateway_uri = "ws://ubuntu:6767/websocket" # Add the assets/fonts directory to assets.paths config.assets.paths << "#{Rails.root}/app/assets/fonts" From b395abf94492509d0b1dca733ba94b2644127d97 Mon Sep 17 00:00:00 2001 From: Jonathon Wilson Date: Sat, 29 Sep 2012 10:43:01 -0600 Subject: [PATCH 5/6] Add jasmine JS test support. Minor code cleanup. --- Gemfile | 1 + README.md | 13 ++- app/assets/javascripts/jamkazam.js | 33 +----- app/assets/javascripts/layout.js | 1 - spec/javascripts/helpers/.gitkeep | 0 spec/javascripts/layout.spec.js | 161 +++++++++++++++++++++++++++ spec/javascripts/support/jasmine.yml | 76 +++++++++++++ 7 files changed, 251 insertions(+), 34 deletions(-) create mode 100644 spec/javascripts/helpers/.gitkeep create mode 100644 spec/javascripts/layout.spec.js create mode 100644 spec/javascripts/support/jasmine.yml diff --git a/Gemfile b/Gemfile index 5165996b1..c01237dea 100644 --- a/Gemfile +++ b/Gemfile @@ -24,6 +24,7 @@ gem 'compass-rails' group :development, :test do gem 'rspec-rails', '2.11.0' gem 'guard-rspec', '0.5.5' + gem 'jasmine' end # Gems used only for assets and not required diff --git a/README.md b/README.md index 41d96a531..a8544c34b 100644 --- a/README.md +++ b/README.md @@ -1 +1,12 @@ -* TODO \ No newline at end of file +* TODO + +Jasmine Javascript Unit Tests +============================= + +1. Ensure you have the jasmine Gem installed; +$ bundle + +2. Start the jasmine server (defaults to :8888) +$ rake jasmine + +Open browser to localhost:8888 diff --git a/app/assets/javascripts/jamkazam.js b/app/assets/javascripts/jamkazam.js index e577a9398..67fe7c864 100644 --- a/app/assets/javascripts/jamkazam.js +++ b/app/assets/javascripts/jamkazam.js @@ -11,37 +11,6 @@ return template; } - var ChannelView = global.ChannelView = function($elem, options) { - var _view; - var _foo; - var _$element; - var _options = { - height: 300, - width: 100 - }; - - function _build() { - var instrument = _$element.attr("channel-instrument"); - var name = _$element.attr("channel-name"); - var template = $('#channel-view').html(); - var vals = { name: name, instrument: instrument}; - var filled = _fillTemplate(template, vals); - _$element.html(filled); - var containerStyle = "width:" + _options.width + "px; height:" + _options.height + "px;"; - containerStyle += "top:0px; left:0px;"; - $('.channel-container', _$element).attr("style", containerStyle); - } - - this.initialize = function(jqElem, user_options) { - _view = this; - _$element = jqElem; - _options = $.extend(_options, user_options); - _build(); - return _view; - }; - return this.initialize($elem, options); - }; - var JamKazam = global.JamKazam = function() { var app; @@ -87,4 +56,4 @@ return this; }; - })(window,jQuery); \ No newline at end of file + }(window,jQuery)); \ No newline at end of file diff --git a/app/assets/javascripts/layout.js b/app/assets/javascripts/layout.js index 5f2a4947d..fec502265 100644 --- a/app/assets/javascripts/layout.js +++ b/app/assets/javascripts/layout.js @@ -429,7 +429,6 @@ //}, 2000); }; - return this; }; diff --git a/spec/javascripts/helpers/.gitkeep b/spec/javascripts/helpers/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/spec/javascripts/layout.spec.js b/spec/javascripts/layout.spec.js new file mode 100644 index 000000000..d2b492ab3 --- /dev/null +++ b/spec/javascripts/layout.spec.js @@ -0,0 +1,161 @@ +(function(context, $) { + + describe("Layout", function() { + var layout, cardLayout, testOpts; + + beforeEach(function() { + layout = new context.Layout(); + }); + + describe("Construct", function() { + describe("defaults", function() { + it("headerHeight should be 75", function() { + expect(layout.getOpts().headerHeight).toEqual(75); + }); + it("sidebarWidth should be 300", function() { + expect(layout.getOpts().sidebarWidth).toEqual(300); + }); + it("gutter should be 20", function() { + expect(layout.getOpts().gutter).toEqual(20); + }); + }); + describe("override one default", function() { + it("headerHeight should be 300", function() { + testOpts = { + headerHeight: 300 + }; + layout.initialize(testOpts); + expect(layout.getOpts().headerHeight).toEqual(300); + }); + it("sidebarWidth should be 300", function() { + expect(layout.getOpts().sidebarWidth).toEqual(300); + }); + }); + + }); + + describe("getScreenDimensions", function() { + describe("Description", function() { + + }); + }); + + describe("CardLayout", function() { + describe("One cell, zero margins", function() { + it("should fill space", function() { + testOpts = { gridOuterMargin: 0, gridPadding: 0}; + layout.initialize(testOpts); + cardLayout = layout.getCardLayout(100, 100, 1, 1, 0, 0, 1, 1); + expect(cardLayout).toEqual({top:0,left:0,width:100,height:100}); + }); + }); + + describe("Two columns, zero margins", function() { + it("should be half width each", function() { + testOpts = { gridOuterMargin: 0, gridPadding: 0}; + layout.initialize(testOpts); + cardLayout = layout.getCardLayout(100, 100, 1, 2, 0, 0, 1, 1); + expect(cardLayout).toEqual({top:0,left:0,width:50,height:100}); + + cardLayout = layout.getCardLayout(100, 100, 1, 2, 0, 1, 1, 1); + expect(cardLayout).toEqual({top:0,left:50,width:50,height:100}); + }); + }); + + describe("Two rows, zero margins", function() { + it("should be half height each", function() { + testOpts = { gridOuterMargin: 0, gridPadding: 0}; + layout.initialize(testOpts); + cardLayout = layout.getCardLayout(100, 100, 2, 1, 0, 0, 1, 1); + expect(cardLayout).toEqual({top:0,left:0,width:100,height:50}); + + cardLayout = layout.getCardLayout(100, 100, 2, 1, 1, 0, 1, 1); + expect(cardLayout).toEqual({top:50,left:0,width:100,height:50}); + }); + }); + + describe("two cols, colspan 2, zero margins", function() { + it("should fill width", function() { + testOpts = { gridOuterMargin: 0, gridPadding: 0}; + layout.initialize(testOpts); + cardLayout = layout.getCardLayout(100, 100, 1, 2, 0, 0, 1, 2); + expect(cardLayout).toEqual({top:0,left:0,width:100,height:100}); + }); + }); + + describe("two rows, rowspan 2, zero margins", function() { + it("should fill height", function() { + testOpts = { gridOuterMargin: 0, gridPadding: 0}; + layout.initialize(testOpts); + cardLayout = layout.getCardLayout(100, 100, 2, 1, 0, 0, 2, 1); + expect(cardLayout).toEqual({top:0,left:0,width:100,height:100}); + }); + }); + + describe("4x4, zero margins, row 1, col 1, rowspan 2, colspan 2", function() { + it("should fill middle 4 cells", function() { + testOpts = { gridOuterMargin: 0, gridPadding: 0}; + layout.initialize(testOpts); + cardLayout = layout.getCardLayout(100, 100, 4, 4, 1, 1, 2, 2); + expect(cardLayout).toEqual({top:25,left:25,width:50,height:50}); + }); + }); + + // Outer margins + describe("1x1, 100x100, outermargin 10", function() { + it("should be inset 10 pixels, 80x80", function() { + testOpts = { gridOuterMargin: 10, gridPadding: 0}; + layout.initialize(testOpts); + cardLayout = layout.getCardLayout(100, 100, 1, 1, 0, 0, 1, 1); + expect(cardLayout).toEqual({top:10,left:10,width:80,height:80}); + }); + }); + describe("2x2, 100x100, outermargin 10", function() { + it("should be inset 10 pixels, 40x40", function() { + testOpts = { gridOuterMargin: 10, gridPadding: 0}; + layout.initialize(testOpts); + cardLayout = layout.getCardLayout(100, 100, 2, 2, 0, 0, 1, 1); + expect(cardLayout).toEqual({top:10,left:10,width:40,height:40}); + }); + }); + + // Inner margins + describe("2x2, 100x100, padding 10", function() { + it("10 pixels in and 10 pixel gutters", function() { + testOpts = { gridOuterMargin: 0, gridPadding: 10}; + layout.initialize(testOpts); + // upper left + cardLayout = layout.getCardLayout(100, 100, 2, 2, 0, 0, 1, 1); + expect(cardLayout).toEqual({top:10,left:10,width:30,height:30}); + // upper right + cardLayout = layout.getCardLayout(100, 100, 2, 2, 0, 1, 1, 1); + expect(cardLayout).toEqual({top:10,left:60,width:30,height:30}); + }); + }); + + // 5 block test like starting home. + describe("home page test", function() { + it("5 blocks", function() { + testOpts = { gridOuterMargin: 10, gridPadding: 10}; + layout.initialize(testOpts); + // Cell 1 + cardLayout = layout.getCardLayout(1000, 1000, 2, 4, 0, 0, 1, 1); + expect(cardLayout).toEqual({top:20,left:20,width:225,height:470}); + // Cell 2 + cardLayout = layout.getCardLayout(1000, 1000, 2, 4, 0, 1, 1, 1); + expect(cardLayout).toEqual({top:20,left:265,width:225,height:470}); + // Cell 3 + cardLayout = layout.getCardLayout(1000, 1000, 2, 4, 0, 2, 1, 2); + expect(cardLayout).toEqual({top:20,left:510,width:470,height:470}); + // Cell 4 + cardLayout = layout.getCardLayout(1000, 1000, 2, 4, 1, 0, 1, 2); + expect(cardLayout).toEqual({top:510,left:20,width:470,height:470}); + // Cell 5 + cardLayout = layout.getCardLayout(1000, 1000, 2, 4, 1, 2, 1, 2); + expect(cardLayout).toEqual({top:510,left:510,width:470,height:470}); + }); + }); + + }); + }); +}(window, jQuery)); \ No newline at end of file diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml new file mode 100644 index 000000000..9bfa261a3 --- /dev/null +++ b/spec/javascripts/support/jasmine.yml @@ -0,0 +1,76 @@ +# src_files +# +# Return an array of filepaths relative to src_dir to include before jasmine specs. +# Default: [] +# +# EXAMPLE: +# +# src_files: +# - lib/source1.js +# - lib/source2.js +# - dist/**/*.js +# +src_files: + - assets/application.js + +# stylesheets +# +# Return an array of stylesheet filepaths relative to src_dir to include before jasmine specs. +# Default: [] +# +# EXAMPLE: +# +# stylesheets: +# - css/style.css +# - stylesheets/*.css +# +stylesheets: + - stylesheets/**/*.css + +# helpers +# +# Return an array of filepaths relative to spec_dir to include before jasmine specs. +# Default: ["helpers/**/*.js"] +# +# EXAMPLE: +# +# helpers: +# - helpers/**/*.js +# +helpers: + - helpers/**/*.js + +# spec_files +# +# Return an array of filepaths relative to spec_dir to include. +# Default: ["**/*[sS]pec.js"] +# +# EXAMPLE: +# +# spec_files: +# - **/*[sS]pec.js +# +spec_files: + - '**/*[sS]pec.js' + +# src_dir +# +# Source directory path. Your src_files must be returned relative to this path. Will use root if left blank. +# Default: project root +# +# EXAMPLE: +# +# src_dir: public +# +src_dir: + +# spec_dir +# +# Spec directory path. Your spec_files must be returned relative to this path. +# Default: spec/javascripts +# +# EXAMPLE: +# +# spec_dir: spec/javascripts +# +spec_dir: spec/javascripts From a463030f93d692d58bec25437b0b5a0aed25ef2a Mon Sep 17 00:00:00 2001 From: Jonathon Wilson Date: Sat, 29 Sep 2012 11:48:23 -0600 Subject: [PATCH 6/6] Unstyled. Change create session controls to reflect spec. --- .gitignore | 1 + app/assets/stylesheets/jamkazam.css.scss | 25 ++- app/views/clients/index.html.erb | 229 +++++++++++++---------- 3 files changed, 148 insertions(+), 107 deletions(-) diff --git a/.gitignore b/.gitignore index b2320f72a..4eed927db 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ doc/ *.iml Gemfile.lock +.sass-cache diff --git a/app/assets/stylesheets/jamkazam.css.scss b/app/assets/stylesheets/jamkazam.css.scss index 92d8f0d7c..dee1ab834 100644 --- a/app/assets/stylesheets/jamkazam.css.scss +++ b/app/assets/stylesheets/jamkazam.css.scss @@ -36,15 +36,28 @@ form { clear:both; margin: 1em; } +form .body { + /* TODO - size with layout */ + width: 100%; + height: 40%; + max-height: 40%; + overflow:auto; +} fieldset { - border: 1px solid #555; - padding: 1em; - margin: 2em 1em; - width:auto; - float:left; + /*border: 1px solid #555;*/ + /*padding: 1em;*/ + /*margin: 2em 1em;*/ + /*width:auto;*/ + /*float:left;*/ +} +fieldset.unstyled { + border: 1px solid #f00; } .formrow { - margin: 3em 0em; + margin: 1em; + padding: 1em; + border: 1px solid #555; + float:left; } label { display:block; diff --git a/app/views/clients/index.html.erb b/app/views/clients/index.html.erb index e3e50d962..c751a03b7 100644 --- a/app/views/clients/index.html.erb +++ b/app/views/clients/index.html.erb @@ -101,116 +101,143 @@

Home >

-

Create Session (1/3): Session Info

+

Create Session

-

Viewers: If it isn't obvious, no visual work has been done on this. Just putting the "stuff" on the page. We should be able to start making it function, and then styling can happen in parallel later.

-
-
- Session Type - - - - -
-
- -
-
- - -
-
- -
-
- - -
-
-
+
+
+
+ Unstyled (obviously) +
+ +
- -
-
-

Home >

-

Create a Session (2/3): Invite

-
- -
- Invite Musicians - - -
-
- Invite Fans - - - - +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ +

+ Upgrade your Studio subscription to let more fans listen +

+
+ +
+ +
+
- - - + +
+

Home >