edge fixes
diff --git a/player/index.html b/player/index.html
index d431bd9..2c8851b 100644
--- a/player/index.html
+++ b/player/index.html
@@ -47,6 +47,8 @@
<script src="js/utils/shapes/MouseModifier.js"></script>
<script src="js/utils/shapes/RoundCornersModifier.js"></script>
<script src="js/utils/imagePreloader.js"></script>
+ <script src="js/utils/featureSupport.js"></script>
+ <script src="js/utils/filters.js"></script>
<script src="js/renderers/BaseRenderer.js"></script>
<script src="js/renderers/SVGRenderer.js"></script>
<script src="js/renderers/CanvasRenderer.js" data-light-skip="true"></script>
@@ -104,12 +106,12 @@
var animData = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
- loop: false,
+ loop: true,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
- path: 'exports/render/data.json'
+ path: 'exports/mobilo/P_1.json'
};
anim = bodymovin.loadAnimation(animData);
diff --git a/player/js/elements/svgElements/SVGBaseElement.js b/player/js/elements/svgElements/SVGBaseElement.js
index 72573c1..bc33236 100644
--- a/player/js/elements/svgElements/SVGBaseElement.js
+++ b/player/js/elements/svgElements/SVGBaseElement.js
@@ -20,6 +20,18 @@
masker.setAttribute('mask-type',this.data.td == 3 ? 'luminance':'alpha');
masker.appendChild(this.layerElement);
this.globalData.defs.appendChild(masker);
+ ////// This is only for IE and Edge when mask if of type alpha
+ if(!featureSupport.maskType && this.data.td == 1){
+ masker.setAttribute('mask-type','luminance');
+ var filId = randomString(10);
+ var fil = filtersFactory.createFilter(filId);
+ this.globalData.defs.appendChild(fil);
+ fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
+ var gg = document.createElementNS(svgNS,'g');
+ gg.appendChild(this.layerElement);
+ masker.appendChild(gg);
+ gg.setAttribute('filter','url(#'+filId+')');
+ }
}else if(this.data.td == 2){
var maskGroup = document.createElementNS(svgNS,'mask');
maskGroup.setAttribute('id',this.layerId);
@@ -27,14 +39,8 @@
var maskGrouper = document.createElementNS(svgNS,'g');
maskGroup.appendChild(maskGrouper);
this.layerElement = document.createElementNS(svgNS,'g');
- var fil = document.createElementNS(svgNS,'filter');
var filId = randomString(10);
- fil.setAttribute('id',filId);
- fil.setAttribute('filterUnits','objectBoundingBox');
- fil.setAttribute('x','0%');
- fil.setAttribute('y','0%');
- fil.setAttribute('width','100%');
- fil.setAttribute('height','100%');
+ var fil = filtersFactory.createFilter(filId);
var feCTr = document.createElementNS(svgNS,'feComponentTransfer');
feCTr.setAttribute('in','SourceGraphic');
fil.appendChild(feCTr);
@@ -53,6 +59,14 @@
maskGrouper.setAttribute('filter','url(#'+filId+')');
maskGrouper.appendChild(alphaRect);
maskGrouper.appendChild(this.layerElement);
+ if(!featureSupport.maskType){
+ maskGroup.setAttribute('mask-type','luminance');
+ fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
+ var gg = document.createElementNS(svgNS,'g');
+ maskGrouper.appendChild(alphaRect);
+ gg.appendChild(this.layerElement);
+ maskGrouper.appendChild(gg);
+ }
this.globalData.defs.appendChild(maskGroup);
}else{
this.layerElement = document.createElementNS(svgNS,'g');
diff --git a/player/js/elements/svgElements/SVGEffects.js b/player/js/elements/svgElements/SVGEffects.js
index 98dc110..a23a72a 100644
--- a/player/js/elements/svgElements/SVGEffects.js
+++ b/player/js/elements/svgElements/SVGEffects.js
@@ -1,6 +1,7 @@
function SVGEffects(elem){
var i, len = elem.data.ef.length;
- var fil = document.createElementNS(svgNS,'filter');
+ var filId = randomString(10);
+ var fil = filtersFactory.createFilter(filId);
var count = 0;
this.filters = [];
var filterManager;
@@ -19,13 +20,6 @@
}
}
if(count){
- var filId = randomString(10);
- fil.setAttribute('id',filId);
- fil.setAttribute('filterUnits','objectBoundingBox');
- fil.setAttribute('x','0%');
- fil.setAttribute('y','0%');
- fil.setAttribute('width','100%');
- fil.setAttribute('height','100%');
elem.globalData.defs.appendChild(fil);
elem.layerElement.setAttribute('filter','url(#'+filId+')');
}
@@ -136,12 +130,13 @@
groupPath.setAttribute('stroke','#fff');
} else if(this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2){
if(this.filterManager.effectElements[10].p.v === 2){
- while(this.elem.layerElement.children.length){
- this.elem.layerElement.removeChild(this.elem.layerElement.children[0]);
+ var elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
+ while(elemChildren.length){
+ this.elem.layerElement.removeChild(elemChildren[0]);
}
}
this.elem.layerElement.appendChild(groupPath);
- this.elem.layerElement.setAttribute('mask','');
+ this.elem.layerElement.removeAttribute('mask');
groupPath.setAttribute('stroke','#fff');
}
this.initialized = true;
diff --git a/player/js/utils/featureSupport.js b/player/js/utils/featureSupport.js
new file mode 100644
index 0000000..8a32ebe
--- /dev/null
+++ b/player/js/utils/featureSupport.js
@@ -0,0 +1,9 @@
+var featureSupport = (function(){
+ var ob = {
+ maskType: true
+ }
+ if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge\/\d./i.test(navigator.userAgent)) {
+ ob.maskType = false;
+ }
+ return ob;
+}());
\ No newline at end of file
diff --git a/player/js/utils/filters.js b/player/js/utils/filters.js
new file mode 100644
index 0000000..f2375b6
--- /dev/null
+++ b/player/js/utils/filters.js
@@ -0,0 +1,26 @@
+var filtersFactory = (function(){
+ var ob = {};
+ ob.createFilter = createFilter;
+ ob.createAlphaToLuminanceFilter = createAlphaToLuminanceFilter;
+
+ function createFilter(filId){
+ var fil = document.createElementNS(svgNS,'filter');
+ fil.setAttribute('id',filId);
+ fil.setAttribute('filterUnits','objectBoundingBox');
+ fil.setAttribute('x','0%');
+ fil.setAttribute('y','0%');
+ fil.setAttribute('width','100%');
+ fil.setAttribute('height','100%');
+ return fil;
+ }
+
+ function createAlphaToLuminanceFilter(){
+ var feColorMatrix = document.createElementNS(svgNS,'feColorMatrix');
+ feColorMatrix.setAttribute('type','matrix');
+ feColorMatrix.setAttribute('color-interpolation-filters','sRGB');
+ feColorMatrix.setAttribute('values','0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1');
+ return feColorMatrix;
+ }
+
+ return ob;
+}())
\ No newline at end of file
