Skip to content

Commit f65b0d6

Browse files
SteveWilkesSteveWilkes
committed
Removing JQuery from custom.js
1 parent 667ec4c commit f65b0d6

File tree

3 files changed

+78
-126
lines changed

3 files changed

+78
-126
lines changed

‎assets/js/ao.js

+53-22
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@
2020
}
2121

2222
var empty = {
23-
classList: { add: function () { }, remove: function () { } }
23+
classList: { add: doNothing, remove: doNothing },
24+
style: {},
25+
addEventListener: doNothing,
26+
dispatchEvent: doNothing
2427
};
2528

2629
function single(aoObj, elem) {
@@ -41,7 +44,10 @@
4144
} else if (typeof elemOrId === 'string') {
4245
single(this, ao.get(elemOrId));
4346
} else {
44-
if (isArrayLike(elemOrId)) {
47+
if (elemOrId === window || elemOrId === document || elemOrId === document.body) {
48+
single(this, elemOrId);
49+
}
50+
else if (isArrayLike(elemOrId)) {
4551
if (elemOrId.length === 1) {
4652
single(this, elemOrId[0]);
4753
} else {
@@ -54,6 +60,14 @@
5460
}
5561
};
5662

63+
function registerOrDispatch(eventName, callback) {
64+
if (typeof callback === 'function') {
65+
return this.on(eventName, callback);
66+
}
67+
this.e.dispatchEvent(new Event(eventName));
68+
return this;
69+
}
70+
5771
AoObj.prototype = {
5872
getByCss: function (selector) {
5973
return this.e.querySelector(selector);
@@ -71,7 +85,20 @@
7185
e.classList.remove(name);
7286
});
7387
},
88+
toggleClass: function (name) {
89+
return this._do(function (e) {
90+
e.classList.contains(name)
91+
? e.classList.remove(name)
92+
: e.classList.add(name);
93+
});
94+
},
7495
css: function () {
96+
if (arguments.length === 1) {
97+
var name = arguments[0];
98+
if (typeof name === 'string') {
99+
return getComputedStyle(this.e).getPropertyValue(name);
100+
}
101+
}
75102
var namesAndValues = arguments;
76103
var l = namesAndValues.length;
77104
return this._do(function (e) {
@@ -122,27 +149,37 @@
122149
e.parentNode.insertBefore(elem, e.nextSibling);
123150
});
124151
},
125-
on: function (eventTypes, callback) {
152+
on: function (eventTypes, callback, ctx) {
126153
var events = eventTypes.split(' ');
127154
var l = events.length;
128-
var that = this;
129-
var cxtCallback = function () {
130-
callback.call(that);
155+
var that = ctx || this;
156+
var cxtCallback = function (evt) {
157+
callback.call(that, evt);
131158
};
132159
return this._do(function (e) {
133160
for (var i = 0; i < l; ++i) {
134161
e.addEventListener(events[i], cxtCallback);
135162
}
136163
});
164+
},
165+
click: function (callback) {
166+
return registerOrDispatch.call(this, 'click', callback);
167+
},
168+
blur: function (callback) {
169+
return registerOrDispatch.call(this, 'blur', callback);
137170
}
138171
};
139172

140-
// AoSubmit
141-
var AoSubmit = function (formAoObj) {
142-
AoObj.call(this, formAoObj.getByCss('input[type="submit"]'));
173+
ao.derive = function (ctor) {
174+
ctor.prototype = Object.create(AoObj.prototype);
175+
ctor.prototype._base = AoObj;
176+
return ctor;
143177
};
144178

145-
AoSubmit.prototype = Object.create(AoObj.prototype);
179+
// AoSubmit
180+
var AoSubmit = ao.derive(function (formAoObj) {
181+
AoObj.call(this, formAoObj.getByCss('input[type="submit"]'));
182+
});
146183

147184
AoSubmit.prototype.confirm = function () {
148185
if (this.e.value === 'Confirm') { return true; }
@@ -155,11 +192,9 @@
155192
};
156193

157194
// AoPopup
158-
var AoPopup = function () {
195+
var AoPopup = ao.derive(function () {
159196
AoObj.call(this, 'popup');
160-
};
161-
162-
AoPopup.prototype = Object.create(AoObj.prototype);
197+
});
163198

164199
AoPopup.prototype.show = function (contentId) {
165200
var content = ao(contentId);
@@ -187,7 +222,7 @@
187222
var validatorNames = Object.keys(validators);
188223
var validatorsCount = validatorNames.length;
189224

190-
var AoValidator = function (input) {
225+
var AoValidator = ao.derive(function (input) {
191226
AoObj.call(this, input);
192227
this.on('blur keyup', this.validate);
193228
this._msg = ao(document.createElement('span')).addClass('error-message');
@@ -200,9 +235,7 @@
200235
this._validators.push({ test: validators[validatorName], msg: msg });
201236
}
202237
}
203-
};
204-
205-
AoValidator.prototype = Object.create(AoObj.prototype);
238+
});
206239

207240
AoValidator.prototype.validate = function () {
208241
for (var i = 0, l = this._validators.length; i < l; ++i) {
@@ -218,7 +251,7 @@
218251
};
219252

220253
// AoForm
221-
var AoForm = function (form) {
254+
var AoForm = ao.derive(function (form) {
222255
AoObj.call(this, form);
223256
this._cover = ao('progress-cover');
224257
this._popup = new AoPopup();
@@ -230,9 +263,7 @@
230263
if (!Boolean(input.getAttribute('data-val'))) { continue; }
231264
this._validators.push(new AoValidator(input));
232265
}
233-
};
234-
235-
AoForm.prototype = Object.create(AoObj.prototype);
266+
});
236267

237268
AoForm.prototype.validate = function () {
238269
var result = true;

‎assets/js/custom.js

+24-103
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,30 @@
11
/**
22
* Main JS file for theme behaviours
33
*/
4-
(function ($) {
5-
"use strict";
6-
7-
var $window = $(window),
8-
$body = $('body'),
9-
$menuToggle = $('#menu-toggle'),
10-
$toTop = $('#back-to-top'),
11-
mobile = false;
12-
13-
$(document).ready(function () {
14-
15-
detectMobile();
16-
17-
// Menu on small screens
18-
$menuToggle.click(function (e) {
19-
$body.toggleClass('menu--opened');
20-
$menuToggle.blur();
21-
e.preventDefault();
22-
});
23-
$window.on('resize orientationchange', function () {
24-
detectMobile();
25-
if (mobile === false) {
26-
$body.removeClass('menu--opened');
27-
}
4+
(function (ao) {
5+
(function (web) {
6+
var MenuToggle = ao.derive(function () {
7+
this._base.call(this, 'menu-toggle');
8+
9+
this.click(function (evt) {
10+
ao(document.body).toggleClass('menu--opened');
11+
this.blur();
12+
evt.preventDefault();
13+
});
14+
15+
ao(window).on('resize orientationchange', function () {
16+
if (this.isMobile()) {
17+
ao(document.body).removeClass('menu--opened');
18+
}
19+
}, this);
2820
});
2921

30-
// Back to top button
31-
if (mobile === true) {
32-
//$toTop.initCanvas();
33-
}
34-
//$toTop.click(function (e) {
35-
// $('html, body').animate({ 'scrollTop': 0 });
36-
// e.preventDefault();
37-
//});
38-
$window.on('resize scroll', function () {
39-
//if (mobile === true) {
40-
// $toTop.initCanvas();
41-
//} else {
42-
// $toTop.hide();
43-
// $toTop.find('canvas').remove();
44-
//}
45-
});
46-
});
22+
MenuToggle.prototype.isMobile = function () {
23+
return this.css('display') !== 'none';
24+
};
4725

48-
function detectMobile() {
49-
if ($menuToggle.is(':hidden')) {
50-
mobile = false;
51-
} else {
52-
mobile = true;
53-
}
54-
}
55-
56-
function calcScrollPct() {
57-
var top = $window.scrollTop(),
58-
docH = $(document).height(),
59-
winH = $window.height(),
60-
pct = Math.ceil((top / (docH - winH)) * 10000) / 10000;
61-
return pct;
62-
}
63-
64-
$.fn.initCanvas = function () {
65-
var _this = $(this),
66-
canvas = document.createElement('canvas');
67-
68-
if (canvas.getContext) {
69-
var ctx = canvas.getContext('2d'),
70-
options = {
71-
lineWidth: 2,
72-
rotate: 0,
73-
size: _this.height(),
74-
colorProgress: '#d4a259',
75-
colorBackground: '#eee'
76-
},
77-
perc = calcScrollPct();
78-
_this.find('canvas').remove();
79-
if (perc < 0.1 && _this.css('opacity') !== 0) {
80-
_this.stop().fadeOut(300);
81-
} else if (perc >= 0.1) {
82-
_this.stop().fadeIn(600);
83-
_this.append(canvas);
84-
canvas.width = canvas.height = options.size;
85-
ctx.translate(options.size / 2, options.size / 2);
86-
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
87-
drawCircle(options.colorProgress, options.colorBackground, options.lineWidth);
88-
}
89-
}
90-
91-
function drawCircle(colorProgress, colorBackground, lineWidth) {
92-
ctx.clearRect(-(options.size) / 2, -(options.size) / 2, options.size, options.size);
93-
ctx.lineWidth = lineWidth;
94-
ctx.lineCap = 'round';
95-
// Background circle
96-
ctx.beginPath();
97-
ctx.arc(0, 0, (options.size - lineWidth) / 2, 0, Math.PI * 2, false);
98-
ctx.strokeStyle = colorBackground;
99-
ctx.stroke();
100-
ctx.closePath();
101-
// Progress circle
102-
ctx.beginPath();
103-
ctx.arc(0, 0, (options.size - lineWidth) / 2, 0, (Math.PI * 2) * perc, false);
104-
ctx.strokeStyle = colorProgress;
105-
ctx.stroke();
106-
ctx.closePath();
107-
}
108-
};
109-
}(jQuery));
26+
ao.ready(function () {
27+
web.MenuToggle = new MenuToggle();
28+
});
29+
})(Ao.Web || (Ao.Web = {}));
30+
}(Ao));

‎assets/js/custom.min.js

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

0 commit comments

Comments
 (0)