page_specific_js 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +4 -0
- data/.rvmrc +1 -0
- data/Gemfile +4 -0
- data/README.md +85 -0
- data/Rakefile +10 -0
- data/lib/page_specific_js.rb +8 -0
- data/lib/page_specific_js/helper.rb +5 -0
- data/lib/page_specific_js/version.rb +3 -0
- data/page_specific_js.gemspec +31 -0
- data/spec/javascripts/fixtures/.gitkeep +0 -0
- data/spec/javascripts/helpers/jasmine-jquery-1.3.1.js +288 -0
- data/spec/javascripts/helpers/jquery.js +9266 -0
- data/spec/javascripts/page_specific_spec.js +160 -0
- data/spec/javascripts/support/jasmine.yml +76 -0
- data/spec/javascripts/support/jasmine_config.rb +23 -0
- data/spec/javascripts/support/jasmine_runner.rb +32 -0
- data/vendor/assets/javascripts/page_specific.js +72 -0
- metadata +94 -0
data/.gitignore
ADDED
data/.rvmrc
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
rvm use --create 1.9.2@page_specific_js
|
data/Gemfile
ADDED
data/README.md
ADDED
@@ -0,0 +1,85 @@
|
|
1
|
+
Page Specific JavaScript Framework
|
2
|
+
==================================
|
3
|
+
|
4
|
+
This is a page-specific JavaScript framework (primarily for Rails).
|
5
|
+
|
6
|
+
It allows you to target JS to run on all pages, for a specific action on all pages (e.g. index),
|
7
|
+
for all actions for a specific controller, or for one page (specific controller/action).
|
8
|
+
|
9
|
+
Dependencies
|
10
|
+
------------
|
11
|
+
* Rails 3.1+
|
12
|
+
* JQuery
|
13
|
+
|
14
|
+
Installation
|
15
|
+
------------
|
16
|
+
|
17
|
+
1. Require the gem. Add the following to your Gemfile, then run 'bundle install':
|
18
|
+
|
19
|
+
gem 'page_specific_js'
|
20
|
+
|
21
|
+
2. Cause the page-specific JS framework to be loaded. For Rails 3.1: in your
|
22
|
+
app/assets/javascripts/application.css.scss:
|
23
|
+
|
24
|
+
//= require page_specific
|
25
|
+
|
26
|
+
3. Create a JS namespace for your page-specific code, and call PageSpecific.init() on page load.
|
27
|
+
This system assumes you follow the best-practise of namespacing all of your application JavaScript.
|
28
|
+
For example let's assume you are namespacing all your JS under class "MyApplication".
|
29
|
+
Put this in an appropriate spot in your JavaScript:
|
30
|
+
|
31
|
+
MyApplication.PageSpecific = {};
|
32
|
+
|
33
|
+
$(document).ready(function() {
|
34
|
+
PageSpecific.init(MyApplication);
|
35
|
+
});
|
36
|
+
|
37
|
+
4. Set data-controller_name and data-action_name attributes on your document body, e.g. if you are using ERB,
|
38
|
+
in application.html.erb:
|
39
|
+
|
40
|
+
<body data-controller_name="<%= underscored_controller_name %>",
|
41
|
+
data-action_name="<%= action_name %>">
|
42
|
+
|
43
|
+
or if you are using HAML, in application.html.haml:
|
44
|
+
|
45
|
+
%body{ :'data-controller_name' => underscored_controller_name, :'data-action_name' => action_name }
|
46
|
+
|
47
|
+
Usage
|
48
|
+
-----
|
49
|
+
|
50
|
+
Write controller or page specific JavaScript as follows:
|
51
|
+
|
52
|
+
MyApplication.PageSpecific['AllControllers'] = {
|
53
|
+
|
54
|
+
allActions: function() {
|
55
|
+
// JS to be executed on every page
|
56
|
+
},
|
57
|
+
|
58
|
+
indexAction: function() {
|
59
|
+
// code to be executed on all index pages
|
60
|
+
}
|
61
|
+
};
|
62
|
+
|
63
|
+
MyApplication.PageSpecific['FooController'] = {
|
64
|
+
|
65
|
+
allActions: function() {
|
66
|
+
// code to be executed on all pages of FooController
|
67
|
+
},
|
68
|
+
|
69
|
+
barAction: function() {
|
70
|
+
// code to be executed on FooController#bar page
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
Notes
|
75
|
+
-----
|
76
|
+
|
77
|
+
* This is not an original teqhnique. I learned it from others while developing at Pivotal Labs and have
|
78
|
+
implemented it several times over the years. This just my cleaned up and organized version.
|
79
|
+
|
80
|
+
* All you JavaScript is still going to get loaded on every page; this only impacts what is executed.
|
81
|
+
In practice this is not an issue as your javascript should be aggregated, minified, compressed and cached.
|
82
|
+
|
83
|
+
License
|
84
|
+
-------
|
85
|
+
MIT. See LICENSE.txt
|
data/Rakefile
ADDED
@@ -0,0 +1,31 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require "page_specific_js/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = "page_specific_js"
|
7
|
+
s.version = PageSpecificJs::VERSION
|
8
|
+
s.authors = ["Sam Pierson"]
|
9
|
+
s.email = ["sam@sampierson.com"]
|
10
|
+
s.homepage = ""
|
11
|
+
s.summary = %q{ Page-specific JavaScript framework for Rails }
|
12
|
+
s.description = %q{ It allows you to target JS to run on all pages,
|
13
|
+
for a particular action on all pages (e.g. index),
|
14
|
+
for all actions for a specific controller,
|
15
|
+
or for one specific controller/action (i.e. a single page).
|
16
|
+
}
|
17
|
+
|
18
|
+
s.rubyforge_project = "page_specific_js"
|
19
|
+
|
20
|
+
s.files = `git ls-files`.split("\n")
|
21
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
22
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
23
|
+
s.require_paths = ["lib"]
|
24
|
+
|
25
|
+
# specify any dependencies here; for example:
|
26
|
+
s.add_development_dependency "rake"
|
27
|
+
s.add_development_dependency "jasmine"
|
28
|
+
|
29
|
+
# jQuery is a dependency, but I'm leaving this commented for those folks not using jquery-rails.
|
30
|
+
# s.add_runtime_dependency "jquery-rails"
|
31
|
+
end
|
File without changes
|
@@ -0,0 +1,288 @@
|
|
1
|
+
var readFixtures = function() {
|
2
|
+
return jasmine.getFixtures().proxyCallTo_('read', arguments);
|
3
|
+
};
|
4
|
+
|
5
|
+
var preloadFixtures = function() {
|
6
|
+
jasmine.getFixtures().proxyCallTo_('preload', arguments);
|
7
|
+
};
|
8
|
+
|
9
|
+
var loadFixtures = function() {
|
10
|
+
jasmine.getFixtures().proxyCallTo_('load', arguments);
|
11
|
+
};
|
12
|
+
|
13
|
+
var setFixtures = function(html) {
|
14
|
+
jasmine.getFixtures().set(html);
|
15
|
+
};
|
16
|
+
|
17
|
+
var sandbox = function(attributes) {
|
18
|
+
return jasmine.getFixtures().sandbox(attributes);
|
19
|
+
};
|
20
|
+
|
21
|
+
var spyOnEvent = function(selector, eventName) {
|
22
|
+
jasmine.JQuery.events.spyOn(selector, eventName);
|
23
|
+
}
|
24
|
+
|
25
|
+
jasmine.getFixtures = function() {
|
26
|
+
return jasmine.currentFixtures_ = jasmine.currentFixtures_ || new jasmine.Fixtures();
|
27
|
+
};
|
28
|
+
|
29
|
+
jasmine.Fixtures = function() {
|
30
|
+
this.containerId = 'jasmine-fixtures';
|
31
|
+
this.fixturesCache_ = {};
|
32
|
+
this.fixturesPath = 'spec/javascripts/fixtures';
|
33
|
+
};
|
34
|
+
|
35
|
+
jasmine.Fixtures.prototype.set = function(html) {
|
36
|
+
this.cleanUp();
|
37
|
+
this.createContainer_(html);
|
38
|
+
};
|
39
|
+
|
40
|
+
jasmine.Fixtures.prototype.preload = function() {
|
41
|
+
this.read.apply(this, arguments);
|
42
|
+
};
|
43
|
+
|
44
|
+
jasmine.Fixtures.prototype.load = function() {
|
45
|
+
this.cleanUp();
|
46
|
+
this.createContainer_(this.read.apply(this, arguments));
|
47
|
+
};
|
48
|
+
|
49
|
+
jasmine.Fixtures.prototype.read = function() {
|
50
|
+
var htmlChunks = [];
|
51
|
+
|
52
|
+
var fixtureUrls = arguments;
|
53
|
+
for(var urlCount = fixtureUrls.length, urlIndex = 0; urlIndex < urlCount; urlIndex++) {
|
54
|
+
htmlChunks.push(this.getFixtureHtml_(fixtureUrls[urlIndex]));
|
55
|
+
}
|
56
|
+
|
57
|
+
return htmlChunks.join('');
|
58
|
+
};
|
59
|
+
|
60
|
+
jasmine.Fixtures.prototype.clearCache = function() {
|
61
|
+
this.fixturesCache_ = {};
|
62
|
+
};
|
63
|
+
|
64
|
+
jasmine.Fixtures.prototype.cleanUp = function() {
|
65
|
+
jQuery('#' + this.containerId).remove();
|
66
|
+
};
|
67
|
+
|
68
|
+
jasmine.Fixtures.prototype.sandbox = function(attributes) {
|
69
|
+
var attributesToSet = attributes || {};
|
70
|
+
return jQuery('<div id="sandbox" />').attr(attributesToSet);
|
71
|
+
};
|
72
|
+
|
73
|
+
jasmine.Fixtures.prototype.createContainer_ = function(html) {
|
74
|
+
var container;
|
75
|
+
if(html instanceof jQuery) {
|
76
|
+
container = jQuery('<div id="' + this.containerId + '" />');
|
77
|
+
container.html(html);
|
78
|
+
} else {
|
79
|
+
container = '<div id="' + this.containerId + '">' + html + '</div>'
|
80
|
+
}
|
81
|
+
jQuery('body').append(container);
|
82
|
+
};
|
83
|
+
|
84
|
+
jasmine.Fixtures.prototype.getFixtureHtml_ = function(url) {
|
85
|
+
if (typeof this.fixturesCache_[url] == 'undefined') {
|
86
|
+
this.loadFixtureIntoCache_(url);
|
87
|
+
}
|
88
|
+
return this.fixturesCache_[url];
|
89
|
+
};
|
90
|
+
|
91
|
+
jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function(relativeUrl) {
|
92
|
+
var self = this;
|
93
|
+
var url = this.fixturesPath.match('/$') ? this.fixturesPath + relativeUrl : this.fixturesPath + '/' + relativeUrl;
|
94
|
+
jQuery.ajax({
|
95
|
+
async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
|
96
|
+
cache: false,
|
97
|
+
dataType: 'html',
|
98
|
+
url: url,
|
99
|
+
success: function(data) {
|
100
|
+
self.fixturesCache_[relativeUrl] = data;
|
101
|
+
},
|
102
|
+
error: function(jqXHR, status, errorThrown) {
|
103
|
+
throw Error('Fixture could not be loaded: ' + url + ' (status: ' + status + ', message: ' + errorThrown.message + ')');
|
104
|
+
}
|
105
|
+
});
|
106
|
+
};
|
107
|
+
|
108
|
+
jasmine.Fixtures.prototype.proxyCallTo_ = function(methodName, passedArguments) {
|
109
|
+
return this[methodName].apply(this, passedArguments);
|
110
|
+
};
|
111
|
+
|
112
|
+
|
113
|
+
jasmine.JQuery = function() {};
|
114
|
+
|
115
|
+
jasmine.JQuery.browserTagCaseIndependentHtml = function(html) {
|
116
|
+
return jQuery('<div/>').append(html).html();
|
117
|
+
};
|
118
|
+
|
119
|
+
jasmine.JQuery.elementToString = function(element) {
|
120
|
+
return jQuery('<div />').append(element.clone()).html();
|
121
|
+
};
|
122
|
+
|
123
|
+
jasmine.JQuery.matchersClass = {};
|
124
|
+
|
125
|
+
(function(namespace) {
|
126
|
+
var data = {
|
127
|
+
spiedEvents: {},
|
128
|
+
handlers: []
|
129
|
+
};
|
130
|
+
|
131
|
+
namespace.events = {
|
132
|
+
spyOn: function(selector, eventName) {
|
133
|
+
var handler = function(e) {
|
134
|
+
data.spiedEvents[[selector, eventName]] = e;
|
135
|
+
};
|
136
|
+
jQuery(selector).bind(eventName, handler);
|
137
|
+
data.handlers.push(handler);
|
138
|
+
},
|
139
|
+
|
140
|
+
wasTriggered: function(selector, eventName) {
|
141
|
+
return !!(data.spiedEvents[[selector, eventName]]);
|
142
|
+
},
|
143
|
+
|
144
|
+
cleanUp: function() {
|
145
|
+
data.spiedEvents = {};
|
146
|
+
data.handlers = [];
|
147
|
+
}
|
148
|
+
}
|
149
|
+
})(jasmine.JQuery);
|
150
|
+
|
151
|
+
(function(){
|
152
|
+
var jQueryMatchers = {
|
153
|
+
toHaveClass: function(className) {
|
154
|
+
return this.actual.hasClass(className);
|
155
|
+
},
|
156
|
+
|
157
|
+
toBeVisible: function() {
|
158
|
+
return this.actual.is(':visible');
|
159
|
+
},
|
160
|
+
|
161
|
+
toBeHidden: function() {
|
162
|
+
return this.actual.is(':hidden');
|
163
|
+
},
|
164
|
+
|
165
|
+
toBeSelected: function() {
|
166
|
+
return this.actual.is(':selected');
|
167
|
+
},
|
168
|
+
|
169
|
+
toBeChecked: function() {
|
170
|
+
return this.actual.is(':checked');
|
171
|
+
},
|
172
|
+
|
173
|
+
toBeEmpty: function() {
|
174
|
+
return this.actual.is(':empty');
|
175
|
+
},
|
176
|
+
|
177
|
+
toExist: function() {
|
178
|
+
return this.actual.size() > 0;
|
179
|
+
},
|
180
|
+
|
181
|
+
toHaveAttr: function(attributeName, expectedAttributeValue) {
|
182
|
+
return hasProperty(this.actual.attr(attributeName), expectedAttributeValue);
|
183
|
+
},
|
184
|
+
|
185
|
+
toHaveId: function(id) {
|
186
|
+
return this.actual.attr('id') == id;
|
187
|
+
},
|
188
|
+
|
189
|
+
toHaveHtml: function(html) {
|
190
|
+
return this.actual.html() == jasmine.JQuery.browserTagCaseIndependentHtml(html);
|
191
|
+
},
|
192
|
+
|
193
|
+
toHaveText: function(text) {
|
194
|
+
if (text && jQuery.isFunction(text.test)) {
|
195
|
+
return text.test(this.actual.text());
|
196
|
+
} else {
|
197
|
+
return this.actual.text() == text;
|
198
|
+
}
|
199
|
+
},
|
200
|
+
|
201
|
+
toHaveValue: function(value) {
|
202
|
+
return this.actual.val() == value;
|
203
|
+
},
|
204
|
+
|
205
|
+
toHaveData: function(key, expectedValue) {
|
206
|
+
return hasProperty(this.actual.data(key), expectedValue);
|
207
|
+
},
|
208
|
+
|
209
|
+
toBe: function(selector) {
|
210
|
+
return this.actual.is(selector);
|
211
|
+
},
|
212
|
+
|
213
|
+
toContain: function(selector) {
|
214
|
+
return this.actual.find(selector).size() > 0;
|
215
|
+
},
|
216
|
+
|
217
|
+
toBeDisabled: function(selector){
|
218
|
+
return this.actual.is(':disabled');
|
219
|
+
},
|
220
|
+
|
221
|
+
// tests the existence of a specific event binding
|
222
|
+
toHandle: function(eventName) {
|
223
|
+
var events = this.actual.data("events");
|
224
|
+
return events && events[eventName].length > 0;
|
225
|
+
},
|
226
|
+
|
227
|
+
// tests the existence of a specific event binding + handler
|
228
|
+
toHandleWith: function(eventName, eventHandler) {
|
229
|
+
var stack = this.actual.data("events")[eventName];
|
230
|
+
var i;
|
231
|
+
for (i = 0; i < stack.length; i++) {
|
232
|
+
if (stack[i].handler == eventHandler) {
|
233
|
+
return true;
|
234
|
+
}
|
235
|
+
}
|
236
|
+
return false;
|
237
|
+
}
|
238
|
+
};
|
239
|
+
|
240
|
+
var hasProperty = function(actualValue, expectedValue) {
|
241
|
+
if (expectedValue === undefined) {
|
242
|
+
return actualValue !== undefined;
|
243
|
+
}
|
244
|
+
return actualValue == expectedValue;
|
245
|
+
};
|
246
|
+
|
247
|
+
var bindMatcher = function(methodName) {
|
248
|
+
var builtInMatcher = jasmine.Matchers.prototype[methodName];
|
249
|
+
|
250
|
+
jasmine.JQuery.matchersClass[methodName] = function() {
|
251
|
+
if (this.actual instanceof jQuery) {
|
252
|
+
var result = jQueryMatchers[methodName].apply(this, arguments);
|
253
|
+
this.actual = jasmine.JQuery.elementToString(this.actual);
|
254
|
+
return result;
|
255
|
+
}
|
256
|
+
|
257
|
+
if (builtInMatcher) {
|
258
|
+
return builtInMatcher.apply(this, arguments);
|
259
|
+
}
|
260
|
+
|
261
|
+
return false;
|
262
|
+
};
|
263
|
+
};
|
264
|
+
|
265
|
+
for(var methodName in jQueryMatchers) {
|
266
|
+
bindMatcher(methodName);
|
267
|
+
}
|
268
|
+
})();
|
269
|
+
|
270
|
+
beforeEach(function() {
|
271
|
+
this.addMatchers(jasmine.JQuery.matchersClass);
|
272
|
+
this.addMatchers({
|
273
|
+
toHaveBeenTriggeredOn: function(selector) {
|
274
|
+
this.message = function() {
|
275
|
+
return [
|
276
|
+
"Expected event " + this.actual + " to have been triggered on" + selector,
|
277
|
+
"Expected event " + this.actual + " not to have been triggered on" + selector
|
278
|
+
];
|
279
|
+
};
|
280
|
+
return jasmine.JQuery.events.wasTriggered(selector, this.actual);
|
281
|
+
}
|
282
|
+
})
|
283
|
+
});
|
284
|
+
|
285
|
+
afterEach(function() {
|
286
|
+
jasmine.getFixtures().cleanUp();
|
287
|
+
jasmine.JQuery.events.cleanUp();
|
288
|
+
});
|