Completed example template. Now supports es6. Added readme.

Overview now hides player navigation if TimelineLite is not present. Added agency property in config.json.
miasmos · Jun 11, 2018 · 77d87df · 77d87df
1 parent 775587d
commit 77d87df
Show file tree

Hide file tree

Showing 41 changed files with 2,002 additions and 2,642 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+## Banner Template
+
+This project is a fully featured banner development suite focused on automation and ease-of-use.
+
+## Getting started
+
+`npm install`
+`gulp`
+
+## Commands
+
+`gulp` compiles banners into /build
+
+`gulp package` validates banners against DoubleClick specifications, zips them and put them into /build/package
+
+`gulp version` increases version number in config.json by 1
+
+`gulp version --reset` resets version number in config.json to 1
diff --git a/app/config.json b/app/config.json
@@ -1,19 +1,22 @@
 {
- "name": "ChickpeaSalad",
- "brand": "Nandos",
+ "agency": "Ad Agency",
+ "name": "ExampleCreative",
+ "brand": "Brand",
  "month": "June",
  "version": {
- "en": "1"
+ "en": "1",
+ "fr": "1"
  },
  "filesize": {
  "static": 40,
  "rich": 100
  },
  "revisions": [],
- "sizes": ["300x250"],
- "clicktags": ["doubleclick"],
+ "sizes": ["300x250", "728x90"],
+ "clicktags": ["doubleclick", "adgear"],
  "text": {
- "en": {}
+ "en": {},
+ "fr": {}
  },
  "exclude": []
 }
diff --git a/app/rich/assets/300x250/background.jpg b/app/rich/assets/300x250/background.jpg
diff --git a/app/rich/assets/300x250/background.png b/app/rich/assets/300x250/background.png
diff --git a/app/rich/assets/300x250/en/language.png b/app/rich/assets/300x250/en/language.png
diff --git a/app/rich/assets/300x250/en/preview.jpg b/app/rich/assets/300x250/en/preview.jpg
diff --git a/app/rich/assets/300x250/fr/language.png b/app/rich/assets/300x250/fr/language.png
diff --git a/app/rich/assets/300x250/muted.png b/app/rich/assets/300x250/muted.png
diff --git a/app/rich/assets/300x250/pause.png b/app/rich/assets/300x250/pause.png
diff --git a/app/rich/assets/300x250/play-icon.png b/app/rich/assets/300x250/play-icon.png
diff --git a/app/rich/assets/300x250/play.png b/app/rich/assets/300x250/play.png
diff --git a/app/rich/assets/300x250/unmuted.png b/app/rich/assets/300x250/unmuted.png
diff --git a/app/rich/assets/728x90/background.jpg b/app/rich/assets/728x90/background.jpg
diff --git a/app/rich/assets/728x90/en/language.png b/app/rich/assets/728x90/en/language.png
diff --git a/app/rich/assets/728x90/fr/language.png b/app/rich/assets/728x90/fr/language.png
diff --git a/app/rich/overview/index.html b/app/rich/overview/index.html
@@ -5,7 +5,6 @@
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
- <!-- copyright Red Lion Canada 2016 -->
 </head>
 
 <body>
@@ -149,21 +148,40 @@
 
  $('.iframe-container').html(frame)
  iframe = window.frames[0]
- iframe.onload = function () { insertPlayControls() }
- zoomIframe(zoom)
+
+ if (iframe && 'timeline' in iframe && labels.length) {
+ showPlayControls()
+ iframe.onload = function () { insertPlayControls() }
+ zoomIframe(zoom)
+ } else {
+ hidePlayControls()
+ }
  }
 
  function movePlayerIndicator(index, animate) {
  if (typeof animate === 'undefined') animate = true
  var label = $('.player .labels .label').eq(index)
+ if (!label || !label.length) return;
  var left = label.position().left + label.width() / 2
  if (animate) $('.player .indicator').stop(true).animate({ 'left': left }, 500)
  else $('.player .indicator').css('left', left)
  }
 
+ function hidePlayControls() {
+ $('.player.ui').css('display', 'none')
+ }
+
+ function showPlayControls() {
+ $('.player.ui').css('display', 'block')
+ }
+
  function insertPlayControls() {
- // console.log(iframe.timeline._labels)
- if (!('timeline' in iframe)) return;
+ if (!('timeline' in iframe)) {
+ hidePlayControls()
+ return;
+ } else {
+ showPlayControls()
+ }
  var keywords = ['start', 'label', 'end']
  var times = []
  for (var key in iframe.timeline._labels) {

diff --git a/app/rich/templates/css/300x250.scss b/app/rich/templates/css/300x250.scss
@@ -12,16 +12,5 @@ html, body {
  width: {width}-2px;
  height: {height}-2px;
  }
-
- .video:not(iframe) {
- width: 214px;
- height: 214px;
- }
-
- .button {
- width: 214px;
- height: 24px;
- bottom: 5px;
- }
  }
 }
diff --git a/app/rich/templates/css/728x90.scss b/app/rich/templates/css/728x90.scss
@@ -0,0 +1,16 @@
+html, body {
+ width: {width}px;
+ height: {height}px;
+}
+
+.{namespace} {
+ #ad {
+ width: {width}px;
+ height: {height}px;
+
+ #border {
+ width: {width}-2px;
+ height: {height}-2px;
+ }
+ }
+}
diff --git a/app/rich/templates/css/global.scss b/app/rich/templates/css/global.scss
@@ -60,144 +60,15 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
  padding: 0;
  overflow: hidden;
  }
-
- .background {
- width: 100%;
- z-index: 2;
- pointer-events: none;
- }
-
- .preview {
- position: absolute;
- width: 101%;
- z-index: 3;
- transition: 0.4s opacity; 
- cursor: pointer;
- }
-
- .play-icon {
- position: absolute;
- width: 70px;
- z-index: 5;
- transform: translate(-50%, -50%);
- top: 50%;
- left: 50%;
- transition: 0.4s opacity;
- cursor: pointer;
- }
-
- .video:not(iframe) {
- background: black;
- position: absolute;
- transform: translateX(-50%);
- left: 50%;
- top: 0;
- }
-
- .video-inner {
+
+ .language {
  position: absolute;
- width: calc(100% + 2px);
- height: calc(100% + 2px);
  top: 0;
  left: 0;
+ z-index: 2;
  }
- 
- iframe {
+
+ img {
  width: 100%;
- height: 100%;
- }
-
- .item {
- position: absolute;
- left: 0;
- top: 0;
- opacity: 0;
- }
-
- .duration {
- position: absolute;
- left: 0;
- bottom: 0;
- height: 3px;
- background-color: white;
- width: 0;
- z-index: 50;
- transition: width 0.1s; 
- }
-
- .mute, .play {
- position: absolute;
- width: 30px;
- height: 30px;
- bottom: 14px;
- z-index: 50;
- cursor: pointer;
- transition: opacity 0.3s; 
- }
-
- .mute img, .play img {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%; 
- }
-
- .mute {
- left: 6px; 
- bottom:6px
- }
-
- .mute.off .muted {
- opacity: 0;
- }
-
- .mute.on .unmuted {
- opacity: 0;
- }
-
- .button {
- background: #fff;
- border: 1px solid #000;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- font-weight: bold;
- letter-spacing: 2px;
- cursor: pointer;
- z-index: 49;
-
- span {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- margin-top: 1px;
- width: 100%;
- text-align: center;
- }
- }
-
- .play-icon.off, .preview.off {
- opacity: 0;
- }
-
- .play {
- left: 14px; 
- }
-
- .play.off .play {
- opacity: 0;
- }
-
- .play.on .pause {
- opacity: 0;
- }
-
- .show {
- opacity: 1;
- }
-
- .hide {
- opacity: 0;
  }
  }
diff --git a/app/rich/templates/html/clicktags/adgear.html b/app/rich/templates/html/clicktags/adgear.html
@@ -0,0 +1,6 @@
+<script type="text/javascript" src="https://h5.adgear.com/v2/js/html5.min.js"></script>
+<script>
+ $('document').ready(function () {
+ document.getElementById('clickThrough').addEventListener('click', ADGEAR.html5.clickThrough.bind("clickTAG"), false);
+ })
+</script>
diff --git a/app/rich/templates/html/clicktags/doubleclick.html b/app/rich/templates/html/clicktags/doubleclick.html
@@ -1,7 +1,10 @@
 <script type="text/javascript">
-var clickTag = "http:https://google.ca"; //needs to be here to validate, but we don't actually want it to be set to anything
-document.getElementById('clickThrough').addEventListener('click', enablerExit, false);
-function enablerExit() {
-window.open(window.clickTag);
-}
+ $('document').ready(function () {
+ document.getElementById('clickThrough').addEventListener('click', enablerExit, false);
+ })
+ var clickTag = "http:https://google.ca"; //needs to be here to validate, but we don't actually want it to be set to anything
+
+ function enablerExit() {
+ window.open(window.clickTag);
+ }
 </script>
diff --git a/app/rich/templates/index.html b/app/rich/templates/index.html
@@ -6,7 +6,7 @@
  <meta name="ad.size" content="width={width},height={height}">
  <meta name="ad.language" content="{language}">
  <meta name="ad.network" content="{clicktag}">
- <meta name="ad.agency" content="Richmond Day">
+ <meta name="ad.agency" content="{agency}">
  <title>{size}</title>
  <style type="text/css">
  /*=include css/global.css*/
@@ -26,33 +26,16 @@
  <div class="{namespace}">
  <div id="ad" class="{language} revision{revision}">
  <div id="border"></div>
- <img class="background item show" src="background.png" />
- <div class="video">
- <img class="play-icon" src="play-icon.png" />
- <img class="preview" src="preview.jpg" />
- <div class="video-inner" data-video="_e-LbKc1XZU"></div>
- </div>
- <div class="button">
- <span>WATCH NOW</span>
- </div>
- <div class="duration"></div>
- <div class="mute on">
- <img class="muted" src="muted.png" />
- <img class="unmuted" src="unmuted.png" />
- </div>
+ <img class="language" src="language.png" />
+ <img class="background" src="background.jpg" />
  <div id="clickThrough"></div>
  </div>
  </div>
- <script src="https://www.youtube.com/player_api"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script type="text/javascript">
- /*=include js/global/Observer.js*/
- /*=include js/global/Youtube.js*/
- /*=include js/global/Play.js*/
- /*=include js/global/Mute.js*/
- /*=include js/global/Duration.js*/
- /*=include js/global/Video.js*/
- /*=include js/global/App.js*/
+ /*=include js/global/global.js*/
+ /*=include js/{size}/{language}.js*/
+ /*=include js/{language}/{clicktag}.js*/
  </script>
  <!--=include html/clicktags/{clicktag}.html-->
 </body>

diff --git a/app/rich/templates/js/300x250/en.js b/app/rich/templates/js/300x250/en.js
@@ -0,0 +1 @@
+console.log('this js is in every 300x250 en creative');
diff --git a/app/rich/templates/js/300x250/fr.js b/app/rich/templates/js/300x250/fr.js
@@ -0,0 +1 @@
+console.log('this js is in every 300x250 fr creative');
diff --git a/app/rich/templates/js/728x90/en.js b/app/rich/templates/js/728x90/en.js
@@ -0,0 +1 @@
+console.log('this js is in every 728x90 en creative');
diff --git a/app/rich/templates/js/en/doubleclick.js b/app/rich/templates/js/en/doubleclick.js
@@ -0,0 +1 @@
+console.log('this js is in every doubleclick creative');