Skip to content

Instantly share code, notes, and snippets.

@benjaminfisher

benjaminfisher/creative.js

Last active August 29, 2015 14:05
Show Gist options
  • Save benjaminfisher/b6a993224a995c6199bd to your computer and use it in GitHub Desktop.
Save benjaminfisher/b6a993224a995c6199bd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
creative.js
// If true, start function. If false, listen for INIT.
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
};
function enablerInitHandler() {
// Start ad, initialize animation,
// load in your image assets, call Enabler methods,
isi.init(document.getElementById("isi"));
// and/or include other Studio modules.
};
// If true, start function. If false, listen for PAGE_LOADED.
if (Enabler.isPageLoaded()) {
pageLoadedHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, pageLoadedHandler);
};
function pageLoadedHandler() {
// Load in additional assets or add animation/video
};
//If true, start function. If false, listen for VISIBLE.
if (Enabler.isVisible()) {
adVisibilityHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.VISIBLE, adVisibilityHandler);
}
function adVisibilityHandler() {
// Load in additional assets or start the animation/video
var mPanel = document.getElementById('main-panel');
mPanel.classList.add('small');
}
function expandAd(e) {
Enabler.requestExpand();
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START, function() {
// Add desired expansion animation
var ePanel = document.getElementById("expanded-panel"),
cPanel = document.getElementById("collapsed-panel"),
mPanel = document.getElementById("main-panel");
if(mPanel.classList.contains("small")) mPanel.classList.remove('small');
isi.expand();
cPanel.style.visibility = "hidden";
ePanel.style.visibility = "visible";
Enabler.finishExpand();
});
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_FINISH, function() {
// Show expanded panel
// Add any additional functionalities
// or animation on the expanded panel
});
};
function collapseAd(e) {
Enabler.requestCollapse();
Enabler.addEventListener(studio.events.StudioEvent.COLLAPSE_START, function() {
// Add desired collapsing animation
var ePanel = document.getElementById("expanded-panel"),
cPanel = document.getElementById("collapsed-panel"),
mPanel = document.getElementById("main-panel");
isi.shrink();
mPanel.classList.add('small');
ePanel.style.visibility = "hidden";
cPanel.style.visibility = "visible";
Enabler.finishCollapse();
});
Enabler.addEventListener(studio.events.StudioEvent.COLLAPSE_FINISH, function() {
// Show collapsed panel
// Add any additional functionalities
// or animation on the collapsed panel
});
}
document.getElementById('expand-button').addEventListener('click', expandAd, false);
document.getElementById('collapse-button').addEventListener('click', collapseAd, false);
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Banner Ad</title>
<link rel="stylesheet" href="style.css" media="all" />
<script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="main-panel" class="small">
<div id="expanded-panel">
<!-- Add expanded content here. -->
<div id="collapse-button">&times;</div>
</div>
<div id="collapsed-panel">
<div id="expand-button"></div>
<!-- Add collapsed content here. -->
</div>
<!-- ISI -->
<div id="isi" class="hidden">
<a class="content">
<h3>Important Safety Infomation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sem sit amet metus ornare, in varius quam dignissim. Duis sagittis sapien vitae tortor convallis porta. Nunc elit ligula, auctor vitae sapien ac, mattis viverra velit. Ut mollis dui ac nulla cursus consectetur. Vivamus suscipit ornare scelerisque. Morbi et accumsan tortor, vitae semper ante. Nulla sit amet mauris tortor. Fusce sed tincidunt diam. Mauris sapien mi, suscipit non mauris a, adipiscing sagittis metus.</p>
<p>Maecenas feugiat adipiscing consectetur. Aliquam mollis urna sed quam hendrerit ornare. Maecenas luctus erat non tellus posuere lacinia. In vehicula iaculis velit, eget aliquam elit volutpat a. Nam dictum, turpis tristique tincidunt venenatis, est arcu volutpat nibh, sit amet aliquet risus orci nec ante. Pellentesque at pharetra mi, sed fringilla purus. Sed vulputate fermentum nunc eget malesuada.</p>
<p>Nam semper ac mi vel facilisis. In nec mollis mauris. Nullam lobortis leo vel consectetur auctor. Proin fermentum mi vitae dignissim vehicula. Vestibulum iaculis faucibus lectus, eget aliquam felis volutpat vitae. Duis at lobortis magna. Duis vel elit porta, gravida purus eget, blandit urna. Nulla libero quam, tristique in erat ut, pellentesque pellentesque magna. Sed leo dui, tincidunt id justo at, hendrerit luctus odio. Maecenas sit amet accumsan nulla, nec viverra enim. Nunc congue eros id fringilla viverra.</p>
<p>Fusce sit amet porta nisl. Nulla facilisi. Vestibulum aliquet porttitor nulla sit amet cursus. Suspendisse viverra tempus est, ac fermentum sem bibendum mattis. Curabitur a lectus nisl. Donec ac convallis neque. Integer ut elementum sapien. Phasellus risus eros, fermentum ac nisl vel, tempus scelerisque turpis.</p>
<p>Vivamus ullamcorper augue a enim consectetur, non consectetur ligula bibendum. Aenean ut fermentum nulla, a luctus dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec elementum lacinia mi, mollis porta quam tincidunt nec. Sed ultrices feugiat rhoncus. Nunc facilisis lectus vel nunc mattis commodo. Aenean vestibulum, mi sit amet ultrices lobortis, ipsum leo facilisis risus, gravida rutrum tellus neque vitae sapien. Pellentesque id enim consequat, porta odio eget, rhoncus dolor. Aliquam et fringilla metus. Morbi gravida est vitae convallis vehicula. Aenean rutrum ornare felis, vitae dictum enim aliquam in. Nunc vel tincidunt enim, non auctor tellus. Nullam dolor quam, pellentesque cursus diam vel, tincidunt varius massa. Proin eu luctus mi. Duis et justo adipiscing, aliquet nisi nec, posuere odio. Nullam elementum eu dolor eu vehicula.</p>
</a>
</div>
</div>
<script src="isi.js"></script>
<script src="creative.js"></script>
</body>
</html>
Raw
isi.js
var ISI = function(){
var self = this;
}
ISI.prototype = {
init: function(el){
this.el = el;
el.classList.remove('hidden');
el.classList.add('scroll');
},
expand: function(){
if(!this.el.classList.contains("large")) this.el.classList.add('large');
},
shrink: function(){
if(this.el.classList.contains("large")) this.el.classList.remove('large');
}
};
(function(){
isi = new ISI;
})()
Raw
style.css
/** Project styles **/
body{
background: lightblue;
}
/** ISI styles **/
#isi{
height:50%;
overflow: hidden;
position:absolute;
top:50%;
}
#isi{
border:1px solid lightgrey;
font-family:Arial, Helvetica, sans-serif;
overflow-y:scroll;
width:300px;
}
#isi .content{
display:block;
position: relative;
}
#isi.large{
width:500px;
}
#isi h3{
margin-top:0px;
padding-top:0px;
}
#isi p{
font-size:0.75em;
}
#isi.scroll .content{
animation: isi-scroll 20s 1s ease-in infinite;
-webkit-animation: isi-scroll 20s 1s ease-in infinite;
}
#isi.scroll .content:hover{
color: red;
animation: isi-pause 3s linear;
-webkit-animation: isi-pause 3s linear;
}
/** Default styles **/
#main-panel {
font-size:14px;
height: 300px;
position: absolute;
right: 0px;
top: 0px;
width: 500px;
}
#main-panel.small{
height:250px;
}
#collapsed-panel {
background: white;
border: 1px dashed grey;
position: absolute;
left: 0px;
overflow:hidden;
top: 0px;
width: 300px;
height: 250px;
}
#expanded-panel {
background: white;
border: 1px dashed green;
height: 300px;
left: 0px;
overflow:hidden;
position: absolute;
top: 0px;
visibility: hidden;
width: 500px;
}
#expand-button {
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
cursor: pointer;
}
#collapse-button {
background: GhostWhite;
border: 1px solid lightgrey;
border-radius: 10px;
box-shadow: 1px 1px 1px grey;
line-height: 10px;
margin: 0;
padding: 0;
position: absolute;
text-indent: 1px;
width: 10px;
height: 10px;
right: 10px;
top: 10px;
cursor: pointer;
}
.hidden{
visibility:hidden;
}
@keyframes isi-scroll{
from{
transform:translateY(0%);
}
to{
transform:translateY(-100%);
}
}
@-webkit-keyframes isi-scroll{
from{
transform:translateY(0%);
}
to{
transform:translateY(-100%);
}
}
@keyframes isi-pause{
from{
}
to{
}
}
@-webkit-keyframes isi-pause{
from{
}
to{
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment