let afterTexts = function () {
// Draw content links
if (clinks !== '') {
- $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () {
- if ($(this).is('[data-rollover-hide]')) {
+ let clinks = $('.texture_clinks[data-page="' + page + '"] .contentLink').toArray().sort(function (a, b) {
+ return $(a).css('z-index') - $(b).css('z-index');
+ });
+ $.each(clinks, function (k, clink) {
+ if ($(clink).is('[data-rollover-hide]')) {
return;
}
- if ((enter && $(this).is('[data-animation-hide]')) || (!enter && $(this).is('[data-animation-hide-on-leave]'))) {
+ if ((enter && $(clink).is('[data-animation-hide]')) || (!enter && $(clink).is('[data-animation-hide-on-leave]'))) {
return;
}
- if (($(this).is('[data-visibility-os="mobile"]') && Modernizr.desktop) || ($(this).is('[data-visibility-os="desktop"]') && Modernizr.mobile)) {
+ if (($(clink).is('[data-visibility-os="mobile"]') && Modernizr.desktop) || ($(clink).is('[data-visibility-os="desktop"]') && Modernizr.mobile)) {
return;
}
+ if (page == 3) {
+ console.log($(clink).css('z-index'));
+ }
let texture;
let tw;
let th;
- if ($(this).is('[data-image]')) {
- let i = $(this).data('id');
+ if ($(clink).is('[data-image]')) {
+ let i = $(clink).data('id');
if (textures[i] === undefined || textures[i] === null) {
return;
}
}
- if (enter && $(this).is('[data-animation-zoomed-out]')) {
- scale = parseFloat($(this).data('animation-zoomed-out'));
- } else if (!enter && $(this).is('[data-animation-zoomed-in]')) {
- scale = parseFloat($(this).data('animation-zoomed-in'));
+ if (enter && $(clink).is('[data-animation-zoomed-out]')) {
+ scale = parseFloat($(clink).data('animation-zoomed-out'));
+ } else if (!enter && $(clink).is('[data-animation-zoomed-in]')) {
+ scale = parseFloat($(clink).data('animation-zoomed-in'));
}
- let w = parseFloat($(this).css('width'));
- let h = parseFloat($(this).css('height'));
+ let w = parseFloat($(clink).css('width'));
+ let h = parseFloat($(clink).css('height'));
if (scale !== 1) {
- let origin = $(this).data('animation-zoomed-origin');
+ let origin = $(clink).data('animation-zoomed-origin');
origin = parseTransformOrigin(origin);
sx = (1 - (1 / scale)) * tw * origin[0];
sh = th - (sy / (1 - origin[1]));
}
- let left = (parseFloat($(this).css('left'))) * wr;
- let top = (parseFloat($(this).css('top'))) * hr;
+ let left = (parseFloat($(clink).css('left'))) * wr;
+ let top = (parseFloat($(clink).css('top'))) * hr;
let width = w * wr;
let height = h * hr;
- if ($(this).is('[data-polygon]')) {
- let p = $(this).data('polygon');
+ if ($(clink).is('[data-polygon]')) {
+ let p = $(clink).data('polygon');
let clip = new Path2D();
clip.moveTo(left + (p[0].x * cwr), top + (p[0].y * chr));
for (let i = 1; i < p.length; i++) {
}
- let blendmode = $(this).data('blendmode');
+ let blendmode = $(clink).data('blendmode');
if (blendmode === 'normal') {
ctx.globalCompositeOperation = 'source-over';
}
}
- if ($(this).is('[data-layer="bothsvg"]')) {
+ if ($(clink).is('[data-layer="bothsvg"]')) {
ctx.fillStyle = '#ffffff';
ctx.fillRect(left, top, width, height);
}
- if ($(this).is('[data-color]')) {
- ctx.fillStyle = $(this).attr('data-color');
+ if ($(clink).is('[data-color]')) {
+ ctx.fillStyle = $(clink).attr('data-color');
ctx.fillRect(left, top, width, height);
- } else if ($(this).is('[data-image]')) {
+ } else if ($(clink).is('[data-image]')) {
try {
ctx.drawImage(texture, sx, sy, sw, sh, left, top, width, height);
} catch (e) {
console.warn(texture);
}
}
- if ($(this).is('[data-polygon]')) {
+ if ($(clink).is('[data-polygon]')) {
ctx.restore();
}
});