Skip to content

Commit d281d40

Browse files
rhanbrhanb
committedOct 27, 2018
Implementation of new custom direction
·
v2.0.0
1 parent 4061e21 commit d281d40

11 files changed

+140
-47
lines changed
 

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ node_modules/
77
coverage/
88
bower_components/
99
*.code-workspace
10+
.vscode

‎dist/granim.js

+43-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*! Granim v1.1.1 - https://sarcadass.github.io/granim.js */
2-
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2+
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
33
'use strict';
44

55
function Granim(options) {
@@ -10,6 +10,8 @@ function Granim(options) {
1010
this.name = options.name || false;
1111
this.elToSetClassOn = options.elToSetClassOn || 'body';
1212
this.direction = options.direction || 'diagonal';
13+
this.customDirection = options.customDirection || {};
14+
this.validateCustomDirection();
1315
this.isPausedWhenNotInView = options.isPausedWhenNotInView || false;
1416
this.opacity = options.opacity;
1517
this.states = options.states;
@@ -44,13 +46,13 @@ function Granim(options) {
4446
blendingMode: options.image.blendingMode || false
4547
};
4648
}
47-
doesGradientUseOpacity = this.opacity.map(function(el) {return el !== 1})
49+
doesGradientUseOpacity = this.opacity.map(function (el) { return el !== 1 })
4850
.indexOf(true) !== -1;
4951
this.shouldClearCanvasOnEachFrame = !!this.image || doesGradientUseOpacity;
5052
this.events = {
5153
start: new CustomEvent('granim:start'),
5254
end: new CustomEvent('granim:end'),
53-
gradientChange: function(details) {
55+
gradientChange: function (details) {
5456
return new CustomEvent('granim:gradientChange', {
5557
detail: {
5658
isLooping: details.isLooping,
@@ -105,6 +107,8 @@ Granim.prototype.onScroll = require('./onScroll.js');
105107

106108
Granim.prototype.validateInput = require('./validateInput.js');
107109

110+
Granim.prototype.validateCustomDirection = require('./validateCustomDirection.js');
111+
108112
Granim.prototype.triggerError = require('./triggerError.js');
109113

110114
Granim.prototype.prepareImage = require('./prepareImage.js');
@@ -153,7 +157,7 @@ Granim.prototype.changeState = require('./changeState.js');
153157

154158
module.exports = Granim;
155159

156-
},{"./animateColors.js":2,"./changeBlendingMode.js":3,"./changeDirection.js":4,"./changeState.js":5,"./clear.js":6,"./colorDiff.js":7,"./destroy.js":8,"./eventPolyfill.js":9,"./getCurrentColors.js":10,"./getDimensions.js":11,"./getElement.js":12,"./getLightness.js":13,"./hexToRgb.js":14,"./makeGradient.js":15,"./onResize.js":16,"./onScroll.js":17,"./pause.js":18,"./pauseWhenNotInView.js":19,"./play.js":20,"./prepareImage.js":21,"./refreshColors.js":22,"./setColors.js":23,"./setDirection.js":24,"./setSizeAttributes.js":25,"./triggerError.js":26,"./validateInput.js":27}],2:[function(require,module,exports){
160+
},{"./animateColors.js":2,"./changeBlendingMode.js":3,"./changeDirection.js":4,"./changeState.js":5,"./clear.js":6,"./colorDiff.js":7,"./destroy.js":8,"./eventPolyfill.js":9,"./getCurrentColors.js":10,"./getDimensions.js":11,"./getElement.js":12,"./getLightness.js":13,"./hexToRgb.js":14,"./makeGradient.js":15,"./onResize.js":16,"./onScroll.js":17,"./pause.js":18,"./pauseWhenNotInView.js":19,"./play.js":20,"./prepareImage.js":21,"./refreshColors.js":22,"./setColors.js":23,"./setDirection.js":24,"./setSizeAttributes.js":25,"./triggerError.js":26,"./validateCustomDirection.js":27,"./validateInput.js":28}],2:[function(require,module,exports){
157161
'use strict';
158162

159163
module.exports = function(timestamp) {
@@ -252,10 +256,11 @@ module.exports = function(newBlendingMode) {
252256
},{}],4:[function(require,module,exports){
253257
'use strict';
254258

255-
module.exports = function(newDirection) {
259+
module.exports = function (newDirection) {
256260
this.context.clearRect(0, 0, this.x1, this.y1);
257261
this.direction = newDirection;
258262
this.validateInput('direction');
263+
this.validateCustomDirection();
259264
if (this.isPaused) this.refreshColors();
260265
};
261266

@@ -764,14 +769,14 @@ module.exports = function() {
764769
},{}],24:[function(require,module,exports){
765770
'use strict';
766771

767-
module.exports = function() {
772+
module.exports = function () {
768773
var ctx = this.context;
769774

770-
switch(this.direction) {
775+
switch (this.direction) {
771776
default:
772777
this.triggerError('direction');
773778
break;
774-
779+
775780
case 'diagonal':
776781
return ctx.createLinearGradient(0, 0, this.x1, this.y1);
777782
break;
@@ -787,6 +792,10 @@ module.exports = function() {
787792
case 'radial':
788793
return ctx.createRadialGradient(this.x1 / 2, this.y1 / 2, this.x1 / 2, this.x1 / 2, this.y1 / 2, 0);
789794
break;
795+
case 'custom':
796+
return ctx.createLinearGradient(this.customDirection.x0, this.customDirection.y0, this.customDirection.x1, this.customDirection.y1);
797+
break;
798+
790799
}
791800
};
792801

@@ -810,6 +819,30 @@ module.exports = function(element) {
810819
};
811820

812821
},{}],27:[function(require,module,exports){
822+
module.exports = function () {
823+
if (this.direction === 'custom') {
824+
if (!areDefinedAndNumbers([
825+
this.customDirection.x0,
826+
this.customDirection.x1,
827+
this.customDirection.y0,
828+
this.customDirection.y1
829+
])) {
830+
throw new Error('When using a custom direction, the custom object is required with it\'s attributes: x0, x1, y0, y1 of type number');
831+
}
832+
}
833+
}
834+
835+
function areDefinedAndNumbers(array) {
836+
var definedAndNumber = true, i = 0;
837+
while (definedAndNumber && i < array.length) {
838+
if (typeof array[i] !== 'number') {
839+
definedAndNumber = false;
840+
}
841+
i++;
842+
}
843+
return definedAndNumber;
844+
}
845+
},{}],28:[function(require,module,exports){
813846
'use strict';
814847

815848
module.exports = function(inputType) {
@@ -843,7 +876,7 @@ module.exports = function(inputType) {
843876
}
844877
};
845878

846-
},{}],28:[function(require,module,exports){
879+
},{}],29:[function(require,module,exports){
847880
window.Granim = require('./lib/Granim.js');
848881

849-
},{"./lib/Granim.js":1}]},{},[28]);
882+
},{"./lib/Granim.js":1}]},{},[29]);

‎dist/granim.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/js/script.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/js/vendor/granim.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/Granim.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ function Granim(options) {
88
this.name = options.name || false;
99
this.elToSetClassOn = options.elToSetClassOn || 'body';
1010
this.direction = options.direction || 'diagonal';
11+
this.customDirection = options.customDirection || {};
12+
this.validateCustomDirection();
1113
this.isPausedWhenNotInView = options.isPausedWhenNotInView || false;
1214
this.opacity = options.opacity;
1315
this.states = options.states;
@@ -42,13 +44,13 @@ function Granim(options) {
4244
blendingMode: options.image.blendingMode || false
4345
};
4446
}
45-
doesGradientUseOpacity = this.opacity.map(function(el) {return el !== 1})
47+
doesGradientUseOpacity = this.opacity.map(function (el) { return el !== 1 })
4648
.indexOf(true) !== -1;
4749
this.shouldClearCanvasOnEachFrame = !!this.image || doesGradientUseOpacity;
4850
this.events = {
4951
start: new CustomEvent('granim:start'),
5052
end: new CustomEvent('granim:end'),
51-
gradientChange: function(details) {
53+
gradientChange: function (details) {
5254
return new CustomEvent('granim:gradientChange', {
5355
detail: {
5456
isLooping: details.isLooping,
@@ -103,6 +105,8 @@ Granim.prototype.onScroll = require('./onScroll.js');
103105

104106
Granim.prototype.validateInput = require('./validateInput.js');
105107

108+
Granim.prototype.validateCustomDirection = require('./validateCustomDirection.js');
109+
106110
Granim.prototype.triggerError = require('./triggerError.js');
107111

108112
Granim.prototype.prepareImage = require('./prepareImage.js');

‎lib/changeDirection.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
'use strict';
22

3-
module.exports = function(newDirection) {
3+
module.exports = function (newDirection) {
44
this.context.clearRect(0, 0, this.x1, this.y1);
55
this.direction = newDirection;
66
this.validateInput('direction');
7+
this.validateCustomDirection();
78
if (this.isPaused) this.refreshColors();
89
};

‎lib/setDirection.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
'use strict';
22

3-
module.exports = function() {
3+
module.exports = function () {
44
var ctx = this.context;
55

6-
switch(this.direction) {
6+
switch (this.direction) {
77
default:
88
this.triggerError('direction');
99
break;
10-
10+
1111
case 'diagonal':
1212
return ctx.createLinearGradient(0, 0, this.x1, this.y1);
1313
break;
@@ -23,5 +23,9 @@ module.exports = function() {
2323
case 'radial':
2424
return ctx.createRadialGradient(this.x1 / 2, this.y1 / 2, this.x1 / 2, this.x1 / 2, this.y1 / 2, 0);
2525
break;
26+
case 'custom':
27+
return ctx.createLinearGradient(this.customDirection.x0, this.customDirection.y0, this.customDirection.x1, this.customDirection.y1);
28+
break;
29+
2630
}
2731
};

‎lib/validateCustomDirection.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
module.exports = function () {
2+
if (this.direction === 'custom') {
3+
if (!areDefinedAndNumbers([
4+
this.customDirection.x0,
5+
this.customDirection.x1,
6+
this.customDirection.y0,
7+
this.customDirection.y1
8+
])) {
9+
throw new Error('When using a custom direction, the custom object is required with it\'s attributes: x0, x1, y0, y1 of type number');
10+
}
11+
}
12+
}
13+
14+
function areDefinedAndNumbers(array) {
15+
var definedAndNumber = true, i = 0;
16+
while (definedAndNumber && i < array.length) {
17+
if (typeof array[i] !== 'number') {
18+
definedAndNumber = false;
19+
}
20+
i++;
21+
}
22+
return definedAndNumber;
23+
}

‎test/coreSpec.js

+23-12
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
describe('Prelim Checks: ', function(){
2-
it('Granim is defined', function(){
1+
describe('Prelim Checks: ', function () {
2+
it('Granim is defined', function () {
33
expect(Granim).toBeDefined();
44
});
5-
it('Granim is a function', function(){
5+
it('Granim is a function', function () {
66
expect(Granim).toEqual(jasmine.any(Function));
77
});
88
});
@@ -11,7 +11,7 @@ var validOptions = {
1111
element: document.createElement('canvas'),
1212
name: 'granim',
1313
opacity: [1, 1],
14-
states : {
14+
states: {
1515
"default-state": {
1616
gradients: [
1717
['#834D9B', '#D04ED6'],
@@ -21,32 +21,43 @@ var validOptions = {
2121
}
2222
};
2323

24-
describe('Granim Core: ', function(){
25-
beforeEach(function(){
24+
describe('Granim Core: ', function () {
25+
beforeEach(function () {
2626
unsetCanvas();
2727
spyOn(console, 'error');
2828
});
2929

30-
describe('Invalid options: ', function(){
31-
var func = function(){ return new Granim({element: '#granim-canvas'})};
30+
describe('Invalid options: ', function () {
31+
var func = function () { return new Granim({ element: '#granim-canvas' }) };
3232

33-
it('throws error on invalid element id ', function(){
33+
it('throws error on invalid element id ', function () {
3434
expect(func).toThrowError("`#granim-canvas` could not be found in the DOM");
3535
});
3636

37-
it('throws an error when passed in anything other than a HTMLCanvasElement as an element', function(){
37+
it('throws an error when passed in anything other than a HTMLCanvasElement as an element', function () {
3838
var invalidOptions = {
3939
element: document.createElement('div'),
4040
name: validOptions.name,
4141
opactiy: validOptions.opactiy,
4242
states: validOptions.states
4343
};
44-
var func = function(){ return new Granim(invalidOptions)};
44+
var func = function () { return new Granim(invalidOptions) };
4545
expect(func).toThrowError("The element you used is neither a String, nor a HTMLCanvasElement");
4646
});
47+
it('throws an error when the option direction has the value "custom" but not the customDirection object when a new Granim instance is created', function () {
48+
var invalidOptions = {
49+
element: validOptions.element,
50+
name: validOptions.name,
51+
opactiy: validOptions.opactiy,
52+
states: validOptions.states,
53+
direction: 'custom'
54+
};
55+
var func = function () { return new Granim(invalidOptions) };
56+
expect(func).toThrowError('When using a custom direction, the custom object is required with it\'s attributes: x0, x1, y0, y1 of type number');
57+
});
4758
});
4859

49-
it('Can use a HTMLCanvasElement as an element', function(){
60+
it('Can use a HTMLCanvasElement as an element', function () {
5061
new Granim(validOptions);
5162
});
5263
});

‎test/methodsSpec.js

+32-16
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
describe('Methods: ', function() {
1+
describe('Methods: ', function () {
22
var value, granimInstance;
33

4-
beforeEach(function(done) {
5-
setTimeout(function() {
4+
beforeEach(function (done) {
5+
setTimeout(function () {
66
value = 0;
77
done();
88
}, 1);
99
});
1010

11-
it("should support async execution of test preparation and expectations", function(done) {
11+
it("should support async execution of test preparation and expectations", function (done) {
1212
setCanvas();
1313
granimInstance = new Granim({
1414
element: '#granim-canvas',
1515
direction: 'left-right',
1616
//isPausedWhenNotInView: true,
1717
opacity: [1, 1],
18-
states : {
18+
states: {
1919
"default-state": {
2020
gradients: [
2121
['#BA8B02', '#181818'],
@@ -37,47 +37,63 @@ describe('Methods: ', function() {
3737
done();
3838
});
3939

40-
describe("Asynchronous specs:", function() {
40+
describe("Asynchronous specs:", function () {
4141
var originalTimeout;
42-
beforeEach(function() {
42+
beforeEach(function () {
4343
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
4444
jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
4545
});
4646

47-
it("Pause method is working", function(done) {
48-
setTimeout(function() {
47+
it("Pause method is working", function (done) {
48+
setTimeout(function () {
4949
granimInstance.pause();
5050
expect(granimInstance.isPaused).toBe(true);
5151
done();
5252
}, 105);
5353
});
5454

55-
it("Play method is working", function(done) {
56-
setTimeout(function() {
55+
it("Play method is working", function (done) {
56+
setTimeout(function () {
5757
granimInstance.play();
5858
expect(granimInstance.isPaused).toBe(false);
5959
done();
6060
}, 10);
6161
});
6262

63-
it("ChangeState method is working", function(done) {
64-
setTimeout(function() {
63+
it("ChangeState method is working", function (done) {
64+
setTimeout(function () {
6565
granimInstance.changeState('default-state');
6666
granimInstance.changeState('second-state');
6767
expect(granimInstance.activeState).toEqual('second-state');
6868
done();
6969
}, 200);
7070
});
7171

72-
it("Clear method is working", function(done) {
73-
setTimeout(function() {
72+
it("ChangeDirection method is working", function (done) {
73+
setTimeout(function () {
74+
granimInstance.changeDirection('left-right');
75+
expect(granimInstance.direction).toEqual('left-right');
76+
done();
77+
}, 200);
78+
});
79+
80+
it("Clear method is working", function (done) {
81+
setTimeout(function () {
7482
granimInstance.clear();
7583
expect(granimInstance.context.getImageData(1, 1, 1, 1).data[0]).toEqual(0);
7684
done();
7785
}, 10);
7886
});
7987

80-
afterEach(function() {
88+
it("ChangeDirection should throw an error when passed 'custom' value without a customDirection object", function (done) {
89+
setTimeout(function () {
90+
var func = function () { return granimInstance.changeDirection('custom'); };
91+
expect(func).toThrowError('When using a custom direction, the custom object is required with it\'s attributes: x0, x1, y0, y1 of type number');
92+
done();
93+
}, 200);
94+
});
95+
96+
afterEach(function () {
8197
jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
8298
});
8399
});

0 commit comments

Comments
 (0)
Please sign in to comment.