(function($) {
//public functions
var methods = {
init : function(options) {
var defaults = {};
$.extend(this, defaults, options);
...
return this
},
//function to check if plugin responds to function
hasFunction : function(functionName){
return (methods[functionName] !== undefined);
}
};
$.fn.objectA = function(method) {
if (methods[method]) {
return methods[method].apply(this,
Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.');
}
};
})(jQuery);
(function($) {
//public functions
var methods = {
init : function(options) {
var defaults = {};
$.extend(this, defaults, options);
this.objectBInstance = "Intance B";
return this;
},
//function to check if plugin responds to function
hasFunction : function(functionName){
//does this or the super class respond to this?
return (methods[functionName] !== undefined || this.$super(functionName));
}
};
/*
Initialization
*/
$.fn.objectB = function(method) {
if (methods[method]) { //check this class for the method
return methods[method].apply(this,
Array.prototype.slice.call(arguments, 1));
} else if(this.objectA("hasFunction", method)){ //next check the parent
//use apply without changing to maintain args
return this.objectA.apply(this, arguments);
}else if (typeof method === 'object' || !method) {//try to init
//inherit first inheritance method
this.objectA.apply(this, arguments); //inherit from objectA
this.$super = this.objectA; //objectA is $super
return methods.init.apply(this, arguments); //initialize this
} else {//if missing from parent/self and not init err out
$.error('Method ' + method + ' does not exist on jQuery.');
}
};
})(jQuery);
(function($) {
var methods = {
init : function(options) {
var settings = {
...
};
$.extend(this, settings, options);
$t = $(this);
$t.each(function(){
...
});
return this;
},
func1 : function(){}
},
$.fn.object = function(method) {
if (methods[method]) {
return methods[method].apply(this,
Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.');
}
};
})(jQuery);
The functions contained in the methods object also return values as expected. Since these functions are accessible outside of the plugin, and other functions defined inside the plugin are not; it is then possible to create public and private functions.(function($) {
//public functions
var methods = {
....
foo : function(){
...
},
bar : function (){
//call private function
privy.apply(this);
}
},
//private functions
function privy(){
...
}
...
})(jQuery);
The apply function is used to maintain consistent scoping for the this pointer. apply() should be used whenever the called function needs to reference the this object. To call the public version of a method inside of the plugin you have to call it from the methods object, (ie. methods.bar.apply(this)). Once instance variables are implemented, private methods can be used as getters and setters.(function($){
//public functions
var methods = {
init : function(options) {
$.extend(this, settings, options);
//apply functionality to every member of the set sent in
$(this).each(function(){});
return this;
}
...
})(jQuery);
Now these instance variables are accessible throughout the plugin. (function($){
//public functions
var methods = {
init : function(options) {
//default instance vars
var settings = {
name : ""
};
$.extend(this, settings, options);
//apply functionality to every member of the set sent
$(this).each(function(){});
return this;
},
foo : function(){
console.log(this.name);
},
bar : function (){
bar.apply(this);
}
},
...
function bar(){
console.log(this.name);
}
...
})(jQuery);
Class variables are even simpler to implement, for example the methods object is a class variable. Any variable instantiated in the same scope will be a class variable.(function($){
var methods = {
...
},
//class variables
class1 = 0;
//private functions
function bar(){
class1++;
console.log(class1);
}
....
})(jQuery);
Summaryvar methods = {
init : function(options){
...
//listen for mouse move
$(document).mousemove(methods.onMouseMove);
...
},
onMouseMove : function(event){
mouseX = event.clientX;
mouseY = event.clientY;
}
}
...
var mouseX, mouseY;
As is tracking the mouse position.var methods = {
init : function(options){
...
//get and keep window size
$window.resize(methods.onWindowResize).resize();
...
},
onWindowResize : function(event){onWindowResize : function(event){
wHeight = $window.height();
wWidth = $window.width();
}
}
...
var wHeight, wWidth;
}
var methods = {
var settings = {
magnitudeX: 100, //control baseline of x movement
magnitudeY: 50, //control baseline of y movement
paralaxFactor : 10 //sets baseline zindex for paralax movement
}, $frames, originalPosition; //list of frames and original position
var methods = {
init : function(options) {
if(options){
$.extend(settings, options);
}
settings = $.extend(settings, options);
...
$t = $(this);
$frames = $t.children(".frame");
$frames.each(function(){
//store paralax index as float
$.data(this, "paralaxLayer", parseFloat($(this).attr('rel')));
});
originalPosition = $frames.position();
...
//reposition on interval rather than mouse move
setInterval(methods.calculatePosition, 100);
...
},
calculatePosition : function(){
//calculate baseline offset for this mouse position
var offsetX = (settings.magnitudeX)*(mouseX/wWidth);
- (settings.magnitudeX/2),
offsetY = (settings.magnitudeY)*(mouseY/wHeight);
- (settings.magnitudeY/2),
frame, paralaxLayer, paralaxFactorX, paralaxFactorY;
//go through and reposition each frame
for(i=0; i<$frames.length; i++){
$frame = $($frames[i]);
paralaxLayer = $.data($frames[i], "paralaxLayer")/
settings.paralaxFactor;
paralaxFactorX = -paralaxLayer*offsetX,
paralaxFactorY = -paralaxLayer*offsetY;
//use animate for smooth transition
$frame.clearQueue().animate({
top: originalPosition.top+paralaxFactorY,
left: originalPosition.left+paralaxFactorX,
}, 300);
}
}
}
There were a couple of steps I took to increase the performance of the position calculation. In the init function the $.each() function is used to loop through frames for ease of implementation, but the calculatePosition function needs to run a bit faster so I used a for loop. Secondly, I decided to calculate the new position of the frames on an interval, rather than on mouse move. Mouse move occurs too often to perform any significant calculation and translation, so a interval and the jQuery animate plugin was utilized. set jqueryFile to ("/Path/to/jQuery/file/jquery.js")
open for access jqueryFile
set jqueryContents to (read jqueryFile)
close access jqueryFile
tell application "Safari"
activate
--make new document and wait for new page to load
delay 1
tell front document to set URL to "http://sickawesome.com"
delay 15
set doc to front document
tell doc
do JavaScript jqueryContents
-- the do JavaScript command returns javascript arrays as a list
set image_hrefs to (do JavaScript "var hrefs = []; $('#list of links').each(function(){hrefs.push($(this).attr('href'))}); hrefs;")
end tell
end tell
tell application "Google Chrome"
activate
tell (make new window) to tell tab 1
-- repeat loop essentially like python for in loop
repeat with href in image_hrefs
execute JavaScript "window.location ='https://baseURL" & href & "'"
my waitForReady()
execute JavaScript jqueryContents
--get something
execute JavaScript "document.title = $('#block').html()"
delay 0.2
set value to get title
end repeat
end tell
on waitForReady()
delay 1
tell application "Google Chrome"
tell window 1 to tell tab 1
repeat
execute JavaScript "document.title = document.readyState"
set status to get title
if status is "complete" and loading is not true then
return true
else
delay 0.1
end if
end repeat
end tell
end tell
end waitForReady
$(window).resize(function(){
hcells = Math.ceil($grid.width()/50); //collumns
vcells = Math.ceil($grid.height()/50); //rows
}).resize();
for(i = 0; i < hcells; i++){
grid.push([]);
for(j = 0; j < vcells; j++){
grid[i].push(false);
}
}
Likewise, each of the block shapes has a shape array where the positions occupied by the shape are represented by a true value.//default shape, single square block
oneSquare = {
shape: [ [true] ],
className: "oneSquare"
};
//three wide by one tall
threeXOne = {
className: "threeXone",
shape: [ [true], [true], [true] ]
};
function placeBlock(i, j, shape){
//loop over space checking for occupation
for(x = 0; x < shape.length; x++){
for(y = 0; y < shape[x].length; y++){
if (grid[x + i][y + j] || x+i >= grid.length || y+j >= grid[x+i].length) {
return false;
}
}
}
//go back and mark spots as taken up
for (x = 0; x < shape.length; x++) {
for (y = 0; y < shape[x].length; y++) {
grid[x + i][y + j] = true;
}
}
return true;
}
If the function returns true then the block is placed absolutely in the grid using the cell size and i,j coordinates. The process of emptying the grid and filling it with random block is set to repeat 10 times a second. This makes the grid a pretty interesting browser benchmark.var colors = ["#0099FF", "#800080", "#0FF000", "#FF0000"];
function logoDance(){
$logo.children("span").each(function(){
randy = Math.random();
$(this).css({
fontSize: Math.round(randy*150)+75,
color: colors[Math.floor(4 * randy)]
});
});
}