Removed snowfall feature
This commit is contained in:
n1474335
parent
1800bad61d
commit
fce13130cd
@ -1,409 +0,0 @@
|
||||
/** @license
|
||||
========================================================================
|
||||
Snowfall jquery plugin version 1.51 Dec 2nd 2012
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
Developed by Jason Brown for any bugs or questions email me at loktar69@hotmail
|
||||
info on the plugin is located on Somethinghitme.com
|
||||
*/
|
||||
|
||||
/*
|
||||
Version 1.51 Dec 2nd 2012
|
||||
// fixed bug where snow collection didn't happen if a valid doctype was declared.
|
||||
|
||||
Version 1.5 Oct 5th 2011
|
||||
Added collecting snow! Uses the canvas element to collect snow. In order to initialize snow collection use the following
|
||||
|
||||
$(document).snowfall({collection : 'element'});
|
||||
|
||||
element = any valid jquery selector.
|
||||
|
||||
The plugin then creates a canvas above every element that matches the selector, and collects the snow. If there are a varrying amount of elements the
|
||||
flakes get assigned a random one on start they will collide.
|
||||
|
||||
Version 1.4 Dec 8th 2010
|
||||
Fixed issues (I hope) with scroll bars flickering due to snow going over the edge of the screen.
|
||||
Added round snowflakes via css, will not work for any version of IE. - Thanks to Luke Barker of http://www.infinite-eye.com/
|
||||
Added shadows as an option via css again will not work with IE. The idea behind shadows, is to show flakes on lighter colored web sites - Thanks Yutt
|
||||
|
||||
Version 1.3.1 Nov 25th 2010
|
||||
Updated script that caused flakes not to show at all if plugin was initialized with no options, also added the fixes that Han Bongers suggested
|
||||
|
||||
Developed by Jason Brown for any bugs or questions email me at loktar69@hotmail
|
||||
info on the plugin is located on Somethinghitme.com
|
||||
|
||||
values for snow options are
|
||||
|
||||
flakeCount,
|
||||
flakeColor,
|
||||
flakeIndex,
|
||||
minSize,
|
||||
maxSize,
|
||||
minSpeed,
|
||||
maxSpeed,
|
||||
round, true or false, makes the snowflakes rounded if the browser supports it.
|
||||
shadow true or false, gives the snowflakes a shadow if the browser supports it.
|
||||
|
||||
Example Usage :
|
||||
$(document).snowfall({flakeCount : 100, maxSpeed : 10});
|
||||
|
||||
-or-
|
||||
|
||||
$('#element').snowfall({flakeCount : 800, maxSpeed : 5, maxSize : 5});
|
||||
|
||||
-or with defaults-
|
||||
|
||||
$(document).snowfall();
|
||||
|
||||
- To clear -
|
||||
$('#element').snowfall('clear');
|
||||
*/
|
||||
|
||||
// requestAnimationFrame polyfill from https://github.com/darius/requestAnimationFrame
|
||||
if (!Date.now)
|
||||
Date.now = function() { return new Date().getTime(); };
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var vendors = ['webkit', 'moz'];
|
||||
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
|
||||
var vp = vendors[i];
|
||||
window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
|
||||
|| window[vp+'CancelRequestAnimationFrame']);
|
||||
}
|
||||
if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
|
||||
|| !window.requestAnimationFrame || !window.cancelAnimationFrame) {
|
||||
var lastTime = 0;
|
||||
window.requestAnimationFrame = function(callback) {
|
||||
var now = Date.now();
|
||||
var nextTime = Math.max(lastTime + 16, now);
|
||||
return setTimeout(function() { callback(lastTime = nextTime); },
|
||||
nextTime - now);
|
||||
};
|
||||
window.cancelAnimationFrame = clearTimeout;
|
||||
}
|
||||
}());
|
||||
|
||||
(function($){
|
||||
$.snowfall = function(element, options){
|
||||
var flakes = [],
|
||||
defaults = {
|
||||
flakeCount : 35,
|
||||
flakeColor : '#ffffff',
|
||||
flakePosition: 'absolute',
|
||||
flakeIndex: 999999,
|
||||
minSize : 1,
|
||||
maxSize : 2,
|
||||
minSpeed : 1,
|
||||
maxSpeed : 5,
|
||||
round : false,
|
||||
shadow : false,
|
||||
collection : false,
|
||||
collectionHeight : 40,
|
||||
deviceorientation : false
|
||||
},
|
||||
options = $.extend(defaults, options),
|
||||
random = function random(min, max){
|
||||
return Math.round(min + Math.random()*(max-min));
|
||||
};
|
||||
|
||||
$(element).data("snowfall", this);
|
||||
|
||||
// Snow flake object
|
||||
function Flake(_x, _y, _size, _speed){
|
||||
// Flake properties
|
||||
this.x = _x;
|
||||
this.y = _y;
|
||||
this.size = _size;
|
||||
this.speed = _speed;
|
||||
this.step = 0;
|
||||
this.stepSize = random(1,10) / 100;
|
||||
|
||||
if(options.collection){
|
||||
this.target = canvasCollection[random(0,canvasCollection.length-1)];
|
||||
}
|
||||
|
||||
var flakeMarkup = null;
|
||||
|
||||
if(options.image){
|
||||
flakeMarkup = document.createElement("img");
|
||||
flakeMarkup.src = options.image;
|
||||
}else{
|
||||
flakeMarkup = document.createElement("div");
|
||||
$(flakeMarkup).css({'background' : options.flakeColor});
|
||||
}
|
||||
|
||||
$(flakeMarkup).attr({
|
||||
'class': 'snowfall-flakes',
|
||||
}).css({
|
||||
'width' : this.size,
|
||||
'height' : this.size,
|
||||
'position' : options.flakePosition,
|
||||
'top' : this.y,
|
||||
'left' : this.x,
|
||||
'fontSize' : 0,
|
||||
'zIndex' : options.flakeIndex
|
||||
});
|
||||
|
||||
if($(element).get(0).tagName === $(document).get(0).tagName){
|
||||
$('body').append($(flakeMarkup));
|
||||
element = $('body');
|
||||
}else{
|
||||
$(element).append($(flakeMarkup));
|
||||
}
|
||||
|
||||
this.element = flakeMarkup;
|
||||
|
||||
// Update function, used to update the snow flakes, and checks current snowflake against bounds
|
||||
this.update = function(){
|
||||
this.y += this.speed;
|
||||
|
||||
if(this.y > (elHeight) - (this.size + 6)){
|
||||
this.reset();
|
||||
}
|
||||
|
||||
this.element.style.top = this.y + 'px';
|
||||
this.element.style.left = this.x + 'px';
|
||||
|
||||
this.step += this.stepSize;
|
||||
|
||||
if (doRatio === false) {
|
||||
this.x += Math.cos(this.step);
|
||||
} else {
|
||||
this.x += (doRatio + Math.cos(this.step));
|
||||
}
|
||||
|
||||
// Pileup check
|
||||
if(options.collection){
|
||||
if(this.x > this.target.x && this.x < this.target.width + this.target.x && this.y > this.target.y && this.y < this.target.height + this.target.y){
|
||||
var ctx = this.target.element.getContext("2d"),
|
||||
curX = this.x - this.target.x,
|
||||
curY = this.y - this.target.y,
|
||||
colData = this.target.colData;
|
||||
|
||||
if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] !== undefined || curY+this.speed+this.size > this.target.height){
|
||||
if(curY+this.speed+this.size > this.target.height){
|
||||
while(curY+this.speed+this.size > this.target.height && this.speed > 0){
|
||||
this.speed *= .5;
|
||||
}
|
||||
|
||||
ctx.fillStyle = "#fff";
|
||||
ctx.shadowOffsetX = 1;
|
||||
ctx.shadowOffsetY = 1;
|
||||
ctx.shadowColor = "#000";
|
||||
ctx.shadowBlur = 1;
|
||||
|
||||
if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] == undefined){
|
||||
// console.log("1");
|
||||
colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] = 1;
|
||||
//ctx.fillRect(curX, (curY)+this.speed+this.size, this.size, this.size);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(curX, curY+this.speed+this.size, this.size / 2, 0, Math.PI * 2, true);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
}else{
|
||||
// console.log("2");
|
||||
colData[parseInt(curX)][parseInt(curY+this.speed)] = 1;
|
||||
//ctx.fillRect(curX, curY+this.speed, this.size, this.size);
|
||||
|
||||
// ctx.fillStyle = "#f00";
|
||||
ctx.beginPath();
|
||||
ctx.arc(curX, curY+this.speed+this.size, this.size, 0, Math.PI * 2, true);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
this.reset();
|
||||
}else{
|
||||
// flow to the sides
|
||||
this.speed = 1;
|
||||
this.stepSize = 0;
|
||||
|
||||
// console.log("3");
|
||||
|
||||
if(parseInt(curX)+1 < this.target.width && colData[parseInt(curX)+1][parseInt(curY)+1] == undefined ){
|
||||
// go left
|
||||
this.x++;
|
||||
}else if(parseInt(curX)-1 > 0 && colData[parseInt(curX)-1][parseInt(curY)+1] == undefined ){
|
||||
// go right
|
||||
this.x--;
|
||||
}else{
|
||||
//stop
|
||||
ctx.fillStyle = "#fff";
|
||||
ctx.shadowOffsetX = -4;
|
||||
ctx.shadowOffsetY = -4;
|
||||
ctx.shadowColor = "#000";
|
||||
ctx.shadowBlur = 4;
|
||||
//ctx.fillRect(curX, curY, this.size, this.size);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(curX, curY+this.speed+this.size, this.size, 0, Math.PI * 2, true);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
colData[parseInt(curX)][parseInt(curY)] = 1;
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(this.x + this.size > (elWidth) - widthOffset || this.x < widthOffset){
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
|
||||
// Resets the snowflake once it reaches one of the bounds set
|
||||
this.reset = function(){
|
||||
this.y = 0;
|
||||
this.x = random(widthOffset, elWidth - widthOffset);
|
||||
this.stepSize = random(1,10) / 100;
|
||||
this.size = random((options.minSize * 100), (options.maxSize * 100)) / 100;
|
||||
this.element.style.width = this.size + 'px';
|
||||
this.element.style.height = this.size + 'px';
|
||||
this.speed = random(options.minSpeed, options.maxSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
// local vars
|
||||
var i = 0,
|
||||
elHeight = $(element).height(),
|
||||
elWidth = $(element).width(),
|
||||
widthOffset = 0,
|
||||
snowTimeout = 0;
|
||||
|
||||
// Collection Piece ******************************
|
||||
if(options.collection !== false){
|
||||
var testElem = document.createElement('canvas');
|
||||
if(!!(testElem.getContext && testElem.getContext('2d'))){
|
||||
var canvasCollection = [],
|
||||
elements = $(options.collection),
|
||||
collectionHeight = options.collectionHeight;
|
||||
|
||||
for(var i =0; i < elements.length; i++){
|
||||
var bounds = elements[i].getBoundingClientRect(),
|
||||
$canvas = $('<canvas/>',
|
||||
{
|
||||
'class' : 'snowfall-canvas'
|
||||
}),
|
||||
collisionData = [];
|
||||
|
||||
if(bounds.top-collectionHeight > 0){
|
||||
$('body').append($canvas);
|
||||
|
||||
$canvas.css({
|
||||
'position' : options.flakePosition,
|
||||
'left' : bounds.left + 'px',
|
||||
'top' : bounds.top-collectionHeight + 'px'
|
||||
})
|
||||
.prop({
|
||||
width: bounds.width,
|
||||
height: collectionHeight
|
||||
});
|
||||
|
||||
for(var w = 0; w < bounds.width; w++){
|
||||
collisionData[w] = [];
|
||||
}
|
||||
|
||||
canvasCollection.push({
|
||||
element : $canvas.get(0),
|
||||
x : bounds.left,
|
||||
y : bounds.top-collectionHeight,
|
||||
width : bounds.width,
|
||||
height: collectionHeight,
|
||||
colData : collisionData
|
||||
});
|
||||
}
|
||||
}
|
||||
}else{
|
||||
// Canvas element isnt supported
|
||||
options.collection = false;
|
||||
}
|
||||
}
|
||||
// ************************************************
|
||||
|
||||
// This will reduce the horizontal scroll bar from displaying, when the effect is applied to the whole page
|
||||
if($(element).get(0).tagName === $(document).get(0).tagName){
|
||||
widthOffset = 25;
|
||||
}
|
||||
|
||||
// Bind the window resize event so we can get the innerHeight again
|
||||
$(window).bind("resize", function(){
|
||||
elHeight = $(element)[0].clientHeight;
|
||||
elWidth = $(element)[0].offsetWidth;
|
||||
});
|
||||
|
||||
|
||||
// initialize the flakes
|
||||
for(i = 0; i < options.flakeCount; i+=1){
|
||||
flakes.push(new Flake(random(widthOffset,elWidth - widthOffset), random(0, elHeight), random((options.minSize * 100), (options.maxSize * 100)) / 100, random(options.minSpeed, options.maxSpeed)));
|
||||
}
|
||||
|
||||
// This adds the style to make the snowflakes round via border radius property
|
||||
if(options.round){
|
||||
$('.snowfall-flakes').css({'-moz-border-radius' : options.maxSize, '-webkit-border-radius' : options.maxSize, 'border-radius' : options.maxSize});
|
||||
}
|
||||
|
||||
// This adds shadows just below the snowflake so they pop a bit on lighter colored web pages
|
||||
if(options.shadow){
|
||||
$('.snowfall-flakes').css({'-moz-box-shadow' : '1px 1px 1px #555', '-webkit-box-shadow' : '1px 1px 1px #555', 'box-shadow' : '1px 1px 1px #555'});
|
||||
}
|
||||
|
||||
// On newer Macbooks Snowflakes will fall based on deviceorientation
|
||||
var doRatio = false;
|
||||
if (options.deviceorientation) {
|
||||
$(window).bind('deviceorientation', function(event) {
|
||||
doRatio = event.originalEvent.gamma * 0.1;
|
||||
});
|
||||
}
|
||||
|
||||
// this controls flow of the updating snow
|
||||
function snow(){
|
||||
for( i = 0; i < flakes.length; i += 1){
|
||||
flakes[i].update();
|
||||
}
|
||||
|
||||
snowTimeout = requestAnimationFrame(function(){snow()});
|
||||
}
|
||||
|
||||
snow();
|
||||
|
||||
// clears the snowflakes
|
||||
this.clear = function(){
|
||||
$('.snowfall-canvas').remove();
|
||||
$(element).children('.snowfall-flakes').remove();
|
||||
cancelAnimationFrame(snowTimeout);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize the options and the plugin
|
||||
$.fn.snowfall = function(options){
|
||||
if(typeof(options) == "object" || options == undefined){
|
||||
return this.each(function(i){
|
||||
(new $.snowfall(this, options));
|
||||
});
|
||||
}else if (typeof(options) == "string") {
|
||||
return this.each(function(i){
|
||||
var snow = $(this).data('snowfall');
|
||||
if(snow){
|
||||
snow.clear();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
@ -19,17 +19,7 @@ var SeasonalWaiter = module.exports = function(app, manager) {
|
||||
* Loads all relevant items depending on the current date.
|
||||
*/
|
||||
SeasonalWaiter.prototype.load = function() {
|
||||
var now = new Date();
|
||||
|
||||
// Snowfall
|
||||
if (now.getMonth() === 11 && now.getDate() > 12) { // Dec 13 -> Dec 31
|
||||
this.app.options.snow = false;
|
||||
this.createSnowOption();
|
||||
$(document).on("switchChange.bootstrapSwitch", ".option-item input:checkbox[option='snow']", this.letItSnow.bind(this));
|
||||
window.addEventListener("resize", this.letItSnow.bind(this));
|
||||
this.manager.addListeners(".btn", "click", this.shakeOffSnow, this);
|
||||
if (now.getDate() === 25) this.letItSnow();
|
||||
}
|
||||
//var now = new Date();
|
||||
|
||||
// SpiderChef
|
||||
// if (now.getMonth() === 3 && now.getDate() === 1) { // Apr 1
|
||||
@ -92,99 +82,6 @@ SeasonalWaiter.prototype.insertSpiderText = function() {
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Adds an option to make it snow.
|
||||
* #letitsnow
|
||||
*/
|
||||
SeasonalWaiter.prototype.createSnowOption = function() {
|
||||
var optionsBody = document.getElementById("options-body"),
|
||||
optionItem = document.createElement("div");
|
||||
|
||||
optionItem.className = "option-item";
|
||||
optionItem.innerHTML =
|
||||
"<input type='checkbox' option='snow' checked />\
|
||||
Let it snow";
|
||||
optionsBody.appendChild(optionItem);
|
||||
|
||||
this.manager.options.load();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Initialises a snowstorm.
|
||||
* #letitsnow
|
||||
*/
|
||||
SeasonalWaiter.prototype.letItSnow = function() {
|
||||
$(document).snowfall("clear");
|
||||
if (!this.app.options.snow) return;
|
||||
|
||||
var options = {},
|
||||
firefoxVersion = navigator.userAgent.match(/Firefox\/(\d\d?)/);
|
||||
|
||||
if (firefoxVersion && parseInt(firefoxVersion[1], 10) < 30) {
|
||||
// Firefox < 30
|
||||
options = {
|
||||
flakeCount: 10,
|
||||
flakeColor: "#fff",
|
||||
flakePosition: "absolute",
|
||||
minSize: 1,
|
||||
maxSize: 2,
|
||||
minSpeed: 1,
|
||||
maxSpeed: 5,
|
||||
round: false,
|
||||
shadow: false,
|
||||
collection: false,
|
||||
collectionHeight: 20,
|
||||
deviceorientation: true
|
||||
};
|
||||
} else {
|
||||
// All other browsers
|
||||
options = {
|
||||
flakeCount: 35,
|
||||
flakeColor: "#fff",
|
||||
flakePosition: "absolute",
|
||||
minSize: 5,
|
||||
maxSize: 8,
|
||||
minSpeed: 1,
|
||||
maxSpeed: 5,
|
||||
round: true,
|
||||
shadow: true,
|
||||
collection: ".btn",
|
||||
collectionHeight: 20,
|
||||
deviceorientation: true
|
||||
};
|
||||
}
|
||||
|
||||
$(document).snowfall(options);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* When a button is clicked, shake the snow off that button.
|
||||
* #letitsnow
|
||||
*/
|
||||
SeasonalWaiter.prototype.shakeOffSnow = function(e) {
|
||||
var el = e.target,
|
||||
rect = el.getBoundingClientRect(),
|
||||
canvases = document.querySelectorAll("canvas.snowfall-canvas"),
|
||||
canvas = null,
|
||||
removeFunc = function() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
$(this).fadeIn();
|
||||
};
|
||||
|
||||
for (var i = 0; i < canvases.length; i++) {
|
||||
canvas = canvases[i];
|
||||
if (canvas.style.left === rect.left + "px" && canvas.style.top === (rect.top - 20) + "px") {
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
$(canvas).fadeOut("slow", removeFunc);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Listen for the Konami code sequence of keys. Turn the page upside down if they are all heard in
|
||||
* sequence.
|
||||
|
||||
@ -39,7 +39,6 @@ var main = function() {
|
||||
errorTimeout : 4000,
|
||||
autoBakeThreshold : 200,
|
||||
attemptHighlight : true,
|
||||
snow : false,
|
||||
};
|
||||
|
||||
document.removeEventListener("DOMContentLoaded", main, false);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user