init.js 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. data/.gitignore +4 -0
  2. data/Gemfile +4 -0
  3. data/Rakefile +1 -0
  4. data/Readme.md +0 -0
  5. data/chuck_testa.jpg +0 -0
  6. data/init.js.gemspec +23 -0
  7. data/lib/init.js.rb +5 -0
  8. data/lib/init.js/version.rb +3 -0
  9. data/page_specific.jpg +0 -0
  10. data/presentation.md +184 -0
  11. metadata +55 -0
data/.gitignore ADDED
@@ -0,0 +1,4 @@
1
+ *.gem
2
+ .bundle
3
+ Gemfile.lock
4
+ pkg/*
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source "http://rubygems.org"
2
+
3
+ # Specify your gem's dependencies in init.js.gemspec
4
+ gemspec
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
data/Readme.md ADDED
File without changes
data/chuck_testa.jpg ADDED
Binary file
data/init.js.gemspec ADDED
@@ -0,0 +1,23 @@
1
+ # -*- encoding: utf-8 -*-
2
+ $:.push File.expand_path("../lib", __FILE__)
3
+ require "init_js/version"
4
+
5
+ Gem::Specification.new do |s|
6
+ s.name = "init.js"
7
+ s.version = InitJs::VERSION
8
+ s.email = ["rafa-github@rafa.ca"]
9
+ s.authors = ["Rafael Cardoso"]
10
+ s.homepage = ""
11
+ s.summary = %q{Javascript loading gem}
12
+ s.description = %q{Javascript loading gem}
13
+
14
+
15
+ s.files = `git ls-files`.split("\n")
16
+ s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
17
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
18
+ s.require_paths = ["lib"]
19
+
20
+ # specify any dependencies here; for example:
21
+ # s.add_development_dependency "rspec"
22
+ # s.add_runtime_dependency "rest-client"
23
+ end
data/lib/init.js.rb ADDED
@@ -0,0 +1,5 @@
1
+ require "init_js/version"
2
+
3
+ module InitJs
4
+ # Your code goes here...
5
+ end
data/lib/init.js/version.rb ADDED
@@ -0,0 +1,3 @@
1
+ module InitJs
2
+ VERSION = "0.0.1"
3
+ end
data/page_specific.jpg ADDED
Binary file
data/presentation.md ADDED
@@ -0,0 +1,184 @@
1
+ !SLIDE
2
+
3
+ ## Loading the proper javascript for a specific page ##
4
+
5
+ # Page specific Javascript #
6
+
7
+ ### Rafa Cardoso ###
8
+
9
+ !SLIDE
10
+
11
+ ## github.com/rafamvc ##
12
+ ## r@rafa.ca ##
13
+ ## @idontusetwetter ##
14
+
15
+ !SLIDE commandline incremental
16
+
17
+ ## Lets create some app that needs page specific javascript ##
18
+
19
+ $ rails new CoolProject
20
+
21
+ $ rails generate scaffold client name:string address:string
22
+
23
+ $ rails generate scaffold product name:string price:integer
24
+
25
+ !SLIDE center transition=turnUp
26
+
27
+ ![page_specific](page_specific.jpg)
28
+
29
+ !SLIDE center transition=turnUp
30
+
31
+ ![chuck_testa](chuck_testa.jpg)
32
+
33
+ <!-- Part 1 -->
34
+
35
+ !SLIDE small
36
+
37
+ ## product.js: ##
38
+ @@@ javascript
39
+
40
+ COOLPROJECT.product = {
41
+ init: function() {
42
+ alert('product page js only');
43
+ }
44
+ }
45
+
46
+ ## application.html.erb: ##
47
+
48
+ @@@ HTML
49
+ <html>
50
+ <body data-controller="<%=controller_name%>" >
51
+ </body>
52
+ </html>
53
+
54
+ !SLIDE smaller
55
+
56
+ ## So, how do we load that javascript? ##
57
+ ### Create a init.js, and put it into the asset pipeline ###
58
+
59
+ @@@ javascript
60
+ COOLPROJECT = {
61
+ };
62
+
63
+ UTIL = {
64
+ exec: function( controller ) {
65
+ var ns = COOLPROJECT;
66
+
67
+ if (controller !== "" && ns[controller] //breaklinemagic
68
+ && typeof ns[controller]['init'] == "function" ) {
69
+ ns[controller]['init']();
70
+ }
71
+ },
72
+
73
+ init: function() {
74
+ var body = document.body,
75
+ controller = body.getAttribute( "data-controller" );
76
+ UTIL.exec( controller );
77
+ }
78
+ };
79
+ $( document ).ready( UTIL.init );
80
+
81
+ <!-- Part 2 -->
82
+
83
+ !SLIDE small
84
+
85
+ ## product.js: ##
86
+ @@@ javascript
87
+
88
+ COOLPROJECT.products = {
89
+ init: function() {
90
+ alert('every product page');
91
+ },
92
+ index: function() {
93
+ alert('only at index');
94
+ },
95
+ edit: function() {
96
+ alert('only at edit');
97
+ }
98
+ }
99
+
100
+ ## application.html.erb: ##
101
+
102
+ @@@ HTML
103
+ <html>
104
+ <body data-controller="<%=controller_name%>"
105
+ data-action="<%=action_name%>">
106
+ </body>
107
+ </html>
108
+
109
+ !SLIDE smaller
110
+
111
+ ## So, how do we load that javascript per action? ##
112
+ ### Simple! Copy and paste this code! ###
113
+
114
+ @@@ javascript
115
+ COOLPROJECT = {
116
+ };
117
+ UTIL = {
118
+ exec: function( controller, action ) {
119
+ var ns = COOLPROJECT,
120
+ action = ( action === undefined ) ? "init" : action;
121
+
122
+ if ( controller !== "" && ns[controller] //breaklinemagic
123
+ && typeof ns[controller][action] == "function" ) {
124
+ ns[controller][action]();
125
+ }
126
+ },
127
+
128
+ init: function() {
129
+ var body = document.body,
130
+ controller = body.getAttribute( "data-controller" ),
131
+ action = body.getAttribute( "data-action" );
132
+
133
+ UTIL.exec( controller );
134
+ UTIL.exec( controller, action );
135
+ }
136
+ };
137
+
138
+ $( document ).ready( UTIL.init );
139
+
140
+ !SLIDE center transition=turnUp
141
+
142
+ I didn't create this:
143
+ http://viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution
144
+
145
+
146
+ !SLIDE center transition=turnUp
147
+
148
+ ## Well, while we are at it, ##
149
+ # what about the CSS per action/controller? #
150
+
151
+ !SLIDE small transition=turnUp
152
+
153
+ application.html.erb
154
+
155
+ @@@ HTML
156
+ <html>
157
+ <body data-controller="<%=controller_name%>"
158
+ data-action="<%=action_name%>"
159
+ class="<%=controller_name%>">
160
+ </body>
161
+ </html>
162
+
163
+ projects.scss
164
+
165
+ @@@ css
166
+ .projects {
167
+ input {
168
+ color: red;
169
+ }
170
+ }
171
+
172
+ ### Brought to you by Ben Hughes. ###
173
+
174
+ !SLIDE transition=turnUp
175
+
176
+ # Q & A #
177
+
178
+ ## Is that useful? Should I make it a gem? ##
179
+
180
+ @@@ ruby
181
+ source 'https://rubygems.org'
182
+
183
+ gem 'rails', '3.2.2'
184
+ gem 'init.js'
metadata ADDED
@@ -0,0 +1,55 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: init.js
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Rafael Cardoso
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2012-04-04 00:00:00.000000000 Z
13
+ dependencies: []
14
+ description: Javascript loading gem
15
+ email:
16
+ - rafa-github@rafa.ca
17
+ executables: []
18
+ extensions: []
19
+ extra_rdoc_files: []
20
+ files:
21
+ - .gitignore
22
+ - Gemfile
23
+ - Rakefile
24
+ - Readme.md
25
+ - chuck_testa.jpg
26
+ - init.js.gemspec
27
+ - lib/init.js.rb
28
+ - lib/init.js/version.rb
29
+ - page_specific.jpg
30
+ - presentation.md
31
+ homepage: ''
32
+ licenses: []
33
+ post_install_message:
34
+ rdoc_options: []
35
+ require_paths:
36
+ - lib
37
+ required_ruby_version: !ruby/object:Gem::Requirement
38
+ none: false
39
+ requirements:
40
+ - - ! '>='
41
+ - !ruby/object:Gem::Version
42
+ version: '0'
43
+ required_rubygems_version: !ruby/object:Gem::Requirement
44
+ none: false
45
+ requirements:
46
+ - - ! '>='
47
+ - !ruby/object:Gem::Version
48
+ version: '0'
49
+ requirements: []
50
+ rubyforge_project:
51
+ rubygems_version: 1.8.17
52
+ signing_key:
53
+ specification_version: 3
54
+ summary: Javascript loading gem
55
+ test_files: []