Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
add creative template
  • Loading branch information
Risyandi committed Nov 29, 2018
1 parent 6c00a5c commit 5044c1f
Show file tree
Hide file tree
Showing 4 changed files with 378 additions and 0 deletions.
111 changes: 111 additions & 0 deletions Creative Template/womantlak/overthepage_250x250_womantalk.js
@@ -0,0 +1,111 @@
document.addEventListener('readystatechange', function () {
if (document.readyState == 'complete') {

var overlayStyle = "\
.area-overlay-mob {\
position: fixed;\
display: none;\
width: 100%;\
height: 100%;\
top: 0;\
left: 0;\
right: 0;\
bottom: 0;\
background-color: rgba(0, 0, 0, 0.50); \
z-index: 9999999 !important;\
}\
.image-ads-mob {\
width: 250px;\
height: 250px;\
position: relative;\
top: 50%;\
left: 50%;\
transform: translate(-50%,-50%);\
-ms-transform: translate(-50%,-50%);\
}\
.image-ads-mob img {\
max-width: 100%;\
max-height: 100%;\
}\
.close-overlay-mob img{\
position: absolute;\
width: 8%;\
right: 0px;\
bottom: 240px;\
left: 240px;\
cursor: pointer;\
}\
.zoomIn {\
-webkit-animation-name: zoomIn;\
animation-name: zoomIn;\
}\
.animated {\
-webkit-animation-duration: 0.3s;\
animation-duration: 0.3s;\
-webkit-animation-fill-mode: both;\
animation-fill-mode: both;\
}\
@-webkit-keyframes zoomIn {\
from {\
opacity: 0;\
-webkit-transform: scale3d(0.3, 0.3, 0.3);\
transform: scale3d(0.3, 0.3, 0.3);\
}\
50% {\
opacity: 1;\
}\
}\
@keyframes zoomIn {\
from {\
opacity: 0;\
-webkit-transform: scale3d(0.3, 0.3, 0.3);\
transform: scale3d(0.3, 0.3, 0.3);\
}\
50% {\
opacity: 1;\
}\
}";

var overlayElementStyle = parent.document.createElement('style');
overlayElementStyle.type = 'text/css';
overlayElementStyle.appendChild(document.createTextNode(overlayStyle));
parent.document.getElementsByTagName('head')[0].appendChild(overlayElementStyle);

var overlayTemplate = '\
<div class="image-ads-mob" id="image-ads-mob">\
<div class="close-overlay-mob" id="close-overlay-mob" onclick="offOverlay()"><img src="[%ButtonClose%]" alt="close"></div>\
<a target="_blank" href="%%CLICK_URL_UNESC%%[%LandingPage%]">\
<img src="[%FileImage%]" alt="images ads">\
</a>\
<img src="%%VIEW_URL_UNESC%%" style="display:none">\
</div>';

var overlayElementTemplate = parent.document.createElement('div');
overlayElementTemplate.innerHTML = overlayTemplate;
overlayElementTemplate.setAttribute('class', 'area-overlay-mob zoomIn animated');
overlayElementTemplate.setAttribute('id', 'area-overlay-mob');
overlayElementTemplate.setAttribute('onClick', 'offOverlay()');
parent.document.querySelector('div.overlay-mobile').parentNode.insertBefore(overlayElementTemplate, parent.document.querySelector('div.overlay-mobile'));

var overlayScript = '\
onOverlay();\
function onOverlay() {\
document.getElementById("area-overlay-mob").style.display = "block";\
console.log("open overlay");\
setTimeout(function () {\
document.getElementById("area-overlay-mob").style.display = "none";\
console.log("auto close overlay");\
}, 15000);\
}\
function offOverlay() {\
document.getElementById("area-overlay-mob").style.display = "none";\
console.log("close overlay");\
}';

var overlayElementScript = parent.document.createElement('script');
overlayElementScript.text = overlayScript;
parent.document.getElementsByTagName('head')[0].appendChild(overlayElementScript);
console.log('draw overlay mobile');

}
})
116 changes: 116 additions & 0 deletions Creative Template/womantlak/overthepage_500x350_womantlak.js
@@ -0,0 +1,116 @@
document.addEventListener('readystatechange', function () {
if (document.readyState == 'complete') {

var overlayStyle = "\
.area-overlay {\
position: fixed;\
display: none;\
width: 100%;\
height: 100%;\
top: 0;\
left: 0;\
right: 0;\
bottom: 0;\
background-color: rgba(0, 0, 0, 0.50);\
z-index: 9999999 !important;\
}\
.image-ads {\
width: 500px;\
height: 350px;\
position: absolute;\
top: 50%;\
left: 50%;\
transform: translate(-50%,-50%);\
-ms-transform: translate(-50%,-50%);\
}\
.image-ads img {\
max-width: 100%;\
max-height: 100%;\
}\
.close-overlay img{\
position: absolute;\
right: -11px;\
bottom: 338px;\
cursor: pointer;\
}\
/* effect zoomin for banner */\
.zoomIn {\
-webkit-animation-name: zoomIn;\
animation-name: zoomIn;\
}\
\
.animated {\
-webkit-animation-duration: 0.3s;\
animation-duration: 0.3s;\
-webkit-animation-fill-mode: both;\
animation-fill-mode: both;\
}\
\
@-webkit-keyframes zoomIn {\
from {\
opacity: 0;\
-webkit-transform: scale3d(0.3, 0.3, 0.3);\
transform: scale3d(0.3, 0.3, 0.3);\
}\
\
50% {\
opacity: 1;\
}\
}\
\
@keyframes zoomIn {\
from {\
opacity: 0;\
-webkit-transform: scale3d(0.3, 0.3, 0.3);\
transform: scale3d(0.3, 0.3, 0.3);\
}\
\
50% {\
opacity: 1;\
}\
}";

var overlayElementStyle = parent.document.createElement('style');
overlayElementStyle.type = 'text/css';
overlayElementStyle.appendChild(document.createTextNode(overlayStyle));
parent.document.getElementsByTagName('head')[0].appendChild(overlayElementStyle);

var overlayTemplate = '\
<div class="image-ads" id="image-ads">\
<div class="close-overlay" id="close-overlay" onclick="offOverlay()"><img src="[%ButtonClose%]" alt="close"></div>\
<a target="_blank" href="%%CLICK_URL_UNESC%%[%LandingPage%]">\
<img src="[%FileImage%]" alt="images ads">\
</a>\
<img src="%%VIEW_URL_UNESC%%" style="display:none">\
</div>';

var overlayElementTemplate = parent.document.createElement('div');
overlayElementTemplate.innerHTML = overlayTemplate;
overlayElementTemplate.setAttribute('class', 'area-overlay zoomIn animated');
overlayElementTemplate.setAttribute('id', 'area-overlay');
overlayElementTemplate.setAttribute('onClick', 'offOverlay()');
parent.document.querySelector('div.overlay-desktop').parentNode.insertBefore(overlayElementTemplate, parent.document.querySelector('div.overlay-desktop'));


var overlayScript = '\
onOverlay();\
function onOverlay() {\
document.getElementById("area-overlay").style.display = "block";\
console.log("open overlay");\
setTimeout(function () {\
document.getElementById("area-overlay").style.display = "none";\
console.log("auto close overlay");\
}, 15000);\
}\
function offOverlay() {\
document.getElementById("area-overlay").style.display = "none";\
console.log("clicked close overlay");}\
';

var overlayElementScript = parent.document.createElement('script');
overlayElementScript.text = overlayScript;
parent.document.getElementsByTagName('head')[0].appendChild(overlayElementScript);
console.log('draw overlay');

}
})
76 changes: 76 additions & 0 deletions Creative Template/womantlak/parallax_720x1280_womantalk.js
@@ -0,0 +1,76 @@
var parallaxStyle = "\
.title-ads{\
color: #fff;\
text-transform: uppercase;\
font: normal 9px arial;\
left: 0px;\
margin: 0px;\
width: 100%;\
height: 18px;\
line-height: 20px;\
background: #696868;\
letter-spacing: 1.01px;\
text-align: center;\
position: relative;\
top: 97%;\
}\
.landing-page {\
cursor: pointer;\
}\
.main-parallax {\
background-image: url('[%FileImage%]');\
background-repeat: no-repeat;\
background-size: cover;\
background-attachment: fixed;\
padding: 0rem;\
}\
#main-parallax{\
position: fixed;\
display: block;\
top: 0;\
left: 0;\
width: 100%;\
height: 100% !important;\
transform: translateZ(0);\
will-change: transform;\
z-index: 1;\
background-attachment: scroll !important;\
}\
.parallax-section {\
position: relative;\
width: 100%;\
height: 500px;\
}\
.parallax-child-section {\
clip: rect(0,auto,auto,0);\
position: absolute;\
top: 0;\
left: 0;\
width: 100%;\
height: 500px;\
}\
";

var parallaxElementStyle = parent.document.createElement('style');
parallaxElementStyle.type = 'text/css';
parallaxElementStyle.appendChild(document.createTextNode(parallaxStyle));
parent.document.getElementsByTagName('head')[0].appendChild(parallaxElementStyle);

var parallaxTemplate = '\
<div class="title-ads">Advertisement</div>\
<div class="parallax-section">\
<div class="parallax-child-section">\
<a href="%%CLICK_URL_UNESC%%[%LandingPage%]" class="landing-page" target="_blank">\
<section class="main-parallax" id="main-parallax"></section>\
<img src="%%VIEW_URL_UNESC%%" style="display:none">\
</a>\
</div>\
</div>\
<div class="title-ads">Advertisement</div>\
';

var parallaxElementTemplate = parent.document.createElement('div');
parallaxElementTemplate.innerHTML = parallaxTemplate;
parallaxElementTemplate.setAttribute('class', 'parallaxAds');
parallaxElementTemplate.setAttribute('id', 'parallaxAds');
parent.document.querySelector('div.parallax-mobile').parentNode.insertBefore(parallaxElementTemplate, parent.document.querySelector('div.parallax-mobile'));
75 changes: 75 additions & 0 deletions Creative Template/womantlak/parallax_735x850_womantalk.js
@@ -0,0 +1,75 @@
var parallaxStyle = "\
.title-ads{\
color: #fff;\
text-transform: uppercase;\
font: normal 9px arial;\
left: 0px;\
margin: 0px;\
width: 100%;\
height: 18px;\
line-height: 20px;\
background: #696868;\
letter-spacing: 1.01px;\
text-align: center;\
position: relative;\
top: 97%;\
}\
.landing-page {\
cursor: pointer;\
}\
.main-parallax {\
background-image: url('[%FileImage%]');\
background-repeat: no-repeat;\
background-size: auto;\
background-attachment: fixed;\
padding: 0rem;\
}\
#main-parallax{\
position: fixed;\
display: block;\
top: 50px;\
width: 100%;\
height: 100% !important;\
transform: translateZ(0);\
will-change: transform;\
z-index: 1;\
background-attachment: scroll !important;\
}\
.parallax-section {\
position: relative;\
width: 100%;\
height: 300px;\
}\
.parallax-child-section {\
clip: rect(0,auto,auto,0);\
position: absolute;\
top: 0;\
left: 0;\
width: 100%;\
height: 300px;\
}\
";

var parallaxElementStyle = parent.document.createElement('style');
parallaxElementStyle.type = 'text/css';
parallaxElementStyle.appendChild(document.createTextNode(parallaxStyle));
parent.document.getElementsByTagName('head')[0].appendChild(parallaxElementStyle);

var parallaxTemplate = '\
<div class="title-ads">Advertisement</div>\
<div class="parallax-section">\
<div class="parallax-child-section">\
<a href="%%CLICK_URL_UNESC%%[%LandingPage%]" class="landing-page" target="_blank">\
<section class="main-parallax" id="main-parallax"></section>\
<img src="%%VIEW_URL_UNESC%%" style="display:none">\
</a>\
</div>\
</div>\
<div class="title-ads">Advertisement</div>\
';

var parallaxElementTemplate = parent.document.createElement('div');
parallaxElementTemplate.innerHTML = parallaxTemplate;
parallaxElementTemplate.setAttribute('class', 'parallaxAds');
parallaxElementTemplate.setAttribute('id', 'parallaxAds');
parent.document.querySelector('div.parallax-desktop').parentNode.insertBefore(parallaxElementTemplate, parent.document.querySelector('div.parallax-desktop'));

0 comments on commit 5044c1f

Please sign in to comment.