Skip to content

Commit 6908c94

Browse files
PixelsCommanderPixelsCommander
committed
Merge pull request #39 from PixelsCommander/jquery
#25 Added jQuery snippet
2 parents fcff37b + 2e0c8be commit 6908c94

File tree

10 files changed

+214
-61
lines changed

10 files changed

+214
-61
lines changed

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"dependencies": {
1616
"pixi": "~2.2.5",
1717
"webcomponents.js": "~0.5.5",
18-
"promise-polyfill": "~2.0.0"
18+
"promise-polyfill": "~2.0.0",
19+
"jquery": "~2.1.3"
1920
}
2021
}

‎demo/assets/css/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ body {
5858
html-gl {
5959
display: block;
6060
}
61+
6162
h1 {
6263
font-family: verdana, sans-serif;
6364
font-size: 16px;

‎demo/basic-webgl-jquery.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>HTML GL demo</title>
6+
<script src="../bower_components/promise-polyfill/Promise.min.js"></script>
7+
<script src="../bower_components/webcomponents.js/CustomElements.min.js"></script>
8+
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
9+
<script src="./js/vendor/velocity.js"></script>
10+
<script src="./js/vendor/html2canvas.js"></script>
11+
<script src="../bower_components/pixi/bin/pixi.dev.js"></script>
12+
<script src="../src/util.js"></script>
13+
<script src="../src/gl-element-resolver.js"></script>
14+
<script src="../src/gl-context.js"></script>
15+
<script src="../src/images-loaded.js"></script>
16+
<script src="../src/gl-element.js"></script>
17+
</head>
18+
<!-- Adding style since demo is designed for inline-block, otherwise will have full screen width -->
19+
<style>
20+
#htmlgl-content {
21+
display: inline-block;
22+
}
23+
</style>
24+
<body>
25+
<h1>HTML GL demo</h1>
26+
27+
<div id="htmlgl-content">
28+
This layer is rendered in <h1>WebGL</h1> <span style="color: red;">because</span> it have tag name <b>html-gl</b>
29+
</div>
30+
<button onclick="window.animate()">Animate WebGL layer</button>
31+
<button onclick="window.changeNodeContent()">Change layer content</button>
32+
<button onclick="window.changeNodeTransform()">Simply change layer`s style.transform</button>
33+
<h2>
34+
TODO
35+
</h2>
36+
<ul>
37+
<li>Add retina support in order to avoid blurry content</li>
38+
</ul>
39+
<script>
40+
$('#htmlgl-content').htmlgl();
41+
42+
window.changeNodeContent = function () {
43+
document.getElementsByTagName('div')[0].textContent = 'Animation was smooth, was not it? This is a new content. It is still visible in dev tools, affects HTML layout and is rendered via WebGL.';
44+
}
45+
46+
window.changeNodeTransform = function () {
47+
var element = document.getElementsByTagName('div')[0];
48+
element.style.webkitTransform = 'translateX(400px) translateY(100px)';
49+
element.style.transform = 'translateX(400px) translateY(100px)';
50+
}
51+
52+
window.animate = function () {
53+
$('#htmlgl-content').velocity({
54+
translateX: 100,
55+
translateY: 100,
56+
scaleX: 4,
57+
scaleY: 4,
58+
rotateZ: "360deg"
59+
}, { duration: 1000 }).velocity({
60+
translateX: 0,
61+
translateY: 0,
62+
scaleX: 1,
63+
scaleY: 1,
64+
rotateZ: "0"
65+
}, { duration: 1000 });
66+
}
67+
</script>
68+
</body>
69+
</html>

‎demo/filters.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,9 @@ <h1>MENU RENDERED IN DOM</h1>
1212
<ul class="menu expanded">
1313
<li><a target="_blank" href="http://pixelscommander.com/en/web-applications-performance/render-html-css-in-webgl-to-get-highest-performance-possibl/">ABOUT HTML-GL</a></li>
1414
<li><a target="_blank" href="https://github.com/PixelsCommander/HTML-GL">GITHUB REPO</a></li>
15-
<li><a target="_blank" href="https://github.com/PixelsCommander/HTML-GL/archive/master.zip">DOWNLOAD</a></li>
1615
</ul>
1716
<ul class="submenu">
18-
<li>MOVIES</li>
19-
<li>TV</li>
20-
<li>KIDS</li>
17+
<li><a target="_blank" href="https://github.com/PixelsCommander/HTML-GL/archive/master.zip">DOWNLOAD</a></li>
2118
<li>
2219
<!-- AddThis Button BEGIN -->
2320
<div class="addthis_toolbox addthis_default_style">
@@ -200,6 +197,7 @@ <h1>SLIDER BELOW IS RENDERED IN WEBGL, DRAG IT</h1>
200197
displacementFolder.add(filtersSwitchs, '0').name("apply");
201198
displacementFolder.add(displacementFilter.scale, 'x', 1, 200).name("scaleX");
202199
displacementFolder.add(displacementFilter.scale, 'y', 1, 200).name("scaleY");
200+
displacementFolder.open();
203201

204202
var blurFilter = new PIXI.BlurFilter();
205203

‎demo/js/vendor/html2canvas.js‎

100755100644
Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2010,7 +2010,7 @@
20102010
document.querySelector(selector).removeAttribute(attributeName);
20112011
var clonedWindow = container.contentWindow;
20122012
var node = clonedWindow.document.querySelector(selector);
2013-
node.style.opacity === "0" && node.tagName === "HTML-GL" ? node.style.opacity = 1 : null;
2013+
node.style.opacity === "0" && node.getAttribute('renderer') === "webgl" ? node.style.opacity = 1 : null;
20142014
var oncloneHandler = (typeof(options.onclone) === "function") ? Promise.resolve(options.onclone(clonedWindow.document)) : Promise.resolve(true);
20152015
return oncloneHandler.then(function() {
20162016
return renderWindow(node, container, options, windowWidth, windowHeight);
@@ -3429,6 +3429,17 @@
34293429
blh = borderRadius[3][0],
34303430
blv = borderRadius[3][1];
34313431

3432+
var halfHeight = Math.floor(height / 2);
3433+
3434+
tlh = tlh > halfHeight ? halfHeight : tlh;
3435+
tlv = tlv > halfHeight ? halfHeight : tlv;
3436+
trh = trh > halfHeight ? halfHeight : trh;
3437+
trv = trv > halfHeight ? halfHeight : trv;
3438+
brh = brh > halfHeight ? halfHeight : brh;
3439+
brv = brv > halfHeight ? halfHeight : brv;
3440+
blh = blh > halfHeight ? halfHeight : blh;
3441+
blv = blv > halfHeight ? halfHeight : blv;
3442+
34323443
var topWidth = width - trh,
34333444
rightHeight = height - brv,
34343445
bottomWidth = width - brh,
@@ -3861,10 +3872,10 @@
38613872
imageContainer,
38623873
0,
38633874
0,
3864-
imageContainer.image.width || width,
3865-
imageContainer.image.height || height,
3866-
bounds.left + paddingLeft + borders[3].width,
3867-
bounds.top + paddingTop + borders[0].width,
3875+
Math.round(imageContainer.image.width || width),
3876+
Math.round(imageContainer.image.height || height),
3877+
Math.round(bounds.left + paddingLeft + borders[3].width),
3878+
Math.round(bounds.top + paddingTop + borders[0].width),
38683879
width,
38693880
height
38703881
);

‎dist/htmlgl.js‎

Lines changed: 63 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2041,7 +2041,7 @@ b.AnimCache[o.url]=g,o.spine=g,o.spineAtlas=d,o.spineAtlasLoader=n,a.loadingCoun
20412041
document.querySelector(selector).removeAttribute(attributeName);
20422042
var clonedWindow = container.contentWindow;
20432043
var node = clonedWindow.document.querySelector(selector);
2044-
node.style.opacity === "0" && node.tagName === "HTML-GL" ? node.style.opacity = 1 : null;
2044+
node.style.opacity === "0" && node.getAttribute('renderer') === "webgl" ? node.style.opacity = 1 : null;
20452045
var oncloneHandler = (typeof(options.onclone) === "function") ? Promise.resolve(options.onclone(clonedWindow.document)) : Promise.resolve(true);
20462046
return oncloneHandler.then(function() {
20472047
return renderWindow(node, container, options, windowWidth, windowHeight);
@@ -3460,6 +3460,17 @@ b.AnimCache[o.url]=g,o.spine=g,o.spineAtlas=d,o.spineAtlasLoader=n,a.loadingCoun
34603460
blh = borderRadius[3][0],
34613461
blv = borderRadius[3][1];
34623462

3463+
var halfHeight = Math.floor(height / 2);
3464+
3465+
tlh = tlh > halfHeight ? halfHeight : tlh;
3466+
tlv = tlv > halfHeight ? halfHeight : tlv;
3467+
trh = trh > halfHeight ? halfHeight : trh;
3468+
trv = trv > halfHeight ? halfHeight : trv;
3469+
brh = brh > halfHeight ? halfHeight : brh;
3470+
brv = brv > halfHeight ? halfHeight : brv;
3471+
blh = blh > halfHeight ? halfHeight : blh;
3472+
blv = blv > halfHeight ? halfHeight : blv;
3473+
34633474
var topWidth = width - trh,
34643475
rightHeight = height - brv,
34653476
bottomWidth = width - brh,
@@ -3892,10 +3903,10 @@ b.AnimCache[o.url]=g,o.spine=g,o.spineAtlas=d,o.spineAtlasLoader=n,a.loadingCoun
38923903
imageContainer,
38933904
0,
38943905
0,
3895-
imageContainer.image.width || width,
3896-
imageContainer.image.height || height,
3897-
bounds.left + paddingLeft + borders[3].width,
3898-
bounds.top + paddingTop + borders[0].width,
3906+
Math.round(imageContainer.image.width || width),
3907+
Math.round(imageContainer.image.height || height),
3908+
Math.round(bounds.left + paddingLeft + borders[3].width),
3909+
Math.round(bounds.top + paddingTop + borders[0].width),
38993910
width,
39003911
height
39013912
);
@@ -8513,11 +8524,12 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
85138524
* */
85148525

85158526
(function (w) {
8516-
85178527
//Defining global namespace with respect if exists
85188528
HTMLGL = w.HTMLGL = w.HTMLGL || {};
85198529

85208530
//Defining it`s properties
8531+
HTMLGL.JQ_PLUGIN_NAME = 'htmlgl';
8532+
HTMLGL.CUSTOM_ELEMENT_TAG_NAME = 'html-gl';
85218533
HTMLGL.context = undefined;
85228534
HTMLGL.stage = undefined;
85238535
HTMLGL.renderer = undefined;
@@ -8721,20 +8733,21 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
87218733
* */
87228734

87238735
(function (w) {
8724-
var style = document.createElement('style');
8725-
style.innerHTML = 'html-gl { display: inline-block; transform: translateZ(0);}';
8726-
document.getElementsByTagName('head')[0].appendChild(style);
8736+
var p = Object.create(HTMLElement.prototype),
8737+
style = document.createElement('style');
87278738

8728-
var CUSTOM_ELEMENT_TAG_NAME = 'html-gl',
8729-
p = Object.create(HTMLElement.prototype);
8739+
//Default styling for html-gl elements
8740+
style.innerHTML = HTMLGL.CUSTOM_ELEMENT_TAG_NAME + ' { display: inline-block; transform: translateZ(0);}';
8741+
document.head.appendChild(style);
87308742

87318743
p.createdCallback = function () {
87328744
//Checking is node created inside of html2canvas virtual window or not. We do not need WebGL there
87338745
var isInsideHtml2Canvas = this.baseURI.length === 0;
87348746

87358747
if (!isInsideHtml2Canvas) {
8736-
w.HTMLGL.elements.push(this);
8737-
//Needed to determine is element WebGL rendered or not
8748+
HTMLGL.elements.push(this);
8749+
//Needed to determine is element WebGL rendered or not relying on tag name
8750+
this.setAttribute('renderer', 'webgl');
87388751
this.renderer = 'webgl';
87398752
this.transformObject = {};
87408753
this.boundingRect = {};
@@ -8787,7 +8800,7 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
87878800
this.updatePivot();
87888801
this.updateSpriteTransform();
87898802

8790-
w.HTMLGL.context.markStageAsChanged();
8803+
HTMLGL.context.markStageAsChanged();
87918804
}
87928805

87938806
//Just updates WebGL representation coordinates and transformation
@@ -8808,7 +8821,7 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
88088821
this.sprite.rotation = rotate;
88098822
}
88108823

8811-
w.HTMLGL.context.markStageAsChanged();
8824+
HTMLGL.context.markStageAsChanged();
88128825
}
88138826

88148827
//Getting bounding rect with respect to current scroll position
@@ -8821,8 +8834,9 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
88218834
width: this.getBoundingClientRect().width,
88228835
height: this.getBoundingClientRect().height,
88238836
};
8824-
this.boundingRect.left = w.HTMLGL.scrollX + parseFloat(this.boundingRect.left);
8825-
this.boundingRect.top = w.HTMLGL.scrollY + parseFloat(this.boundingRect.top);
8837+
8838+
this.boundingRect.left = HTMLGL.scrollX + parseFloat(this.boundingRect.left);
8839+
this.boundingRect.top = HTMLGL.scrollY + parseFloat(this.boundingRect.top);
88268840
}
88278841

88288842
//Correct pivot needed to rotate element around it`s center
@@ -8837,7 +8851,7 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
88378851
var self = this;
88388852
//this.sprite = new PIXI.Sprite(texture);
88398853
this.sprite.setTexture(texture);
8840-
w.HTMLGL.document.addChild(this.sprite);
8854+
HTMLGL.document.addChild(this.sprite);
88418855
setTimeout(function () {
88428856
self.hideDOM();
88438857
}, 0);
@@ -8870,7 +8884,7 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
88708884
var self = this;
88718885
self.styleGL = {};
88728886

8873-
w.HTMLGL.util.getterSetter(this.styleGL, this.transformProperty, function () {
8887+
HTMLGL.util.getterSetter(this.styleGL, this.transformProperty, function () {
88748888
var result = '';
88758889

88768890
for (var transformPropertyName in self.transformObject) {
@@ -8909,7 +8923,35 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
89098923
return this.sprite.stage;
89108924
}
89118925

8912-
w.HTMLGL.GLElement = document.registerElement(CUSTOM_ELEMENT_TAG_NAME, {
8926+
HTMLGL.GLElement = document.registerElement(HTMLGL.CUSTOM_ELEMENT_TAG_NAME, {
89138927
prototype: p
8914-
});
8928+
})
8929+
8930+
HTMLGL.GLElement.createFromNode = function (node) {
8931+
//Extending node with GLElement methods
8932+
for (var i in p) {
8933+
if (p.hasOwnProperty(i)) {
8934+
node[i] = p[i];
8935+
}
8936+
}
8937+
8938+
p.createdCallback.apply(node);
8939+
return node;
8940+
}
8941+
8942+
//Wrap to jQuery plugin
8943+
if (w.$ !== undefined) {
8944+
$[HTMLGL.JQ_PLUGIN_NAME] = {};
8945+
$[HTMLGL.JQ_PLUGIN_NAME].elements = [];
8946+
8947+
$.fn[HTMLGL.JQ_PLUGIN_NAME] = function () {
8948+
return this.each(function () {
8949+
if (!$.data(this, 'plugin_' + HTMLGL.JQ_PLUGIN_NAME)) {
8950+
var propellerObj = HTMLGL.GLElement.createFromNode(this);
8951+
$.data(this, 'plugin_' + HTMLGL.JQ_PLUGIN_NAME, propellerObj);
8952+
$[HTMLGL.JQ_PLUGIN_NAME].elements.push(propellerObj);
8953+
}
8954+
});
8955+
};
8956+
}
89158957
})(window);

‎dist/htmlgl.min.js‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎page/js/htmlgl.min.js‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/gl-context.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
* */
77

88
(function (w) {
9-
109
//Defining global namespace with respect if exists
1110
HTMLGL = w.HTMLGL = w.HTMLGL || {};
1211

1312
//Defining it`s properties
13+
HTMLGL.JQ_PLUGIN_NAME = 'htmlgl';
14+
HTMLGL.CUSTOM_ELEMENT_TAG_NAME = 'html-gl';
1415
HTMLGL.context = undefined;
1516
HTMLGL.stage = undefined;
1617
HTMLGL.renderer = undefined;

0 commit comments

Comments
 (0)