|
| 1 | +import './style.scss'; |
| 2 | + |
| 3 | +// TODO: Refactor to remove jquery dependency. |
| 4 | +/* eslint-disable func-names, no-undef, no-array-constructor, no-param-reassign, consistent-return, prefer-destructuring, max-len */ |
| 5 | +(function ($) { |
| 6 | + /* |
| 7 | + The AdLayersDFPAPI class implements functionality specific to DFP For the AdLayersAPI. |
| 8 | + */ |
| 9 | + AdLayersDFPAPI = function () {}; |
| 10 | + |
| 11 | + // Refreshes a specific ad unit |
| 12 | + AdLayersDFPAPI.prototype.refresh = function (adUnit) { |
| 13 | + if (typeof dfpAdUnits[adUnit] !== 'undefined') { |
| 14 | + googletag.pubads().refresh([dfpAdUnits[adUnit]]); |
| 15 | + } |
| 16 | + }; |
| 17 | + |
| 18 | + // Refreshes all ad units |
| 19 | + AdLayersDFPAPI.prototype.refreshAll = function () { |
| 20 | + if ($.isEmptyObject(dfpAdUnits) === false) { |
| 21 | + // DFP needs a numerical indexed array |
| 22 | + const unitsToRefresh = new Array(); |
| 23 | + for (const adUnit in dfpAdUnits) { |
| 24 | + if (dfpAdUnits[adUnit]) { |
| 25 | + unitsToRefresh.push(dfpAdUnits[adUnit]); |
| 26 | + } |
| 27 | + } |
| 28 | + googletag.pubads().refresh(unitsToRefresh); |
| 29 | + } |
| 30 | + }; |
| 31 | + |
| 32 | + AdLayersDFPAPI.prototype.buildAd = function (slotName, path, sizes, targets, sizeMapping) { |
| 33 | + if (AdLayersAPI.isDebug()) { |
| 34 | + let adSizes = []; |
| 35 | + |
| 36 | + if (sizeMapping) { |
| 37 | + // Get the appropriate sizes for this breakpoint |
| 38 | + let maxWidth = -1; |
| 39 | + let maxHeight = -1; |
| 40 | + $.each(sizeMapping, (index, value) => { |
| 41 | + if ($(window).width() >= value[0][0] |
| 42 | + && $(window).height() >= value[0][1] |
| 43 | + && value[0][0] >= maxWidth |
| 44 | + && value[0][1] >= maxHeight |
| 45 | + ) { |
| 46 | + maxWidth = value[0][0]; |
| 47 | + maxHeight = value[0][1]; |
| 48 | + adSizes = value[1]; |
| 49 | + } |
| 50 | + }); |
| 51 | + } else if (sizes && sizes[0]) { |
| 52 | + // Ensure sizes is a two-dimensional array |
| 53 | + if (!sizes[0][0]) { |
| 54 | + sizes = [sizes]; |
| 55 | + } |
| 56 | + adSizes = sizes; |
| 57 | + } |
| 58 | + |
| 59 | + AdLayersDFPAPI.addDebugPlaceholder($(`#${adLayersDFP.adUnitPrefix}${slotName}`), adSizes); |
| 60 | + } else { |
| 61 | + return googletag.cmd.push(() => { |
| 62 | + let key; |
| 63 | + let value; |
| 64 | + const divId = adLayersDFP.adUnitPrefix + slotName; |
| 65 | + dfpAdUnits = dfpAdUnits || {}; |
| 66 | + dfpAdUnits[slotName] = googletag.defineSlot(path, sizes, divId); |
| 67 | + if (targets) { |
| 68 | + for (key in targets) { |
| 69 | + if (targets[key]) { |
| 70 | + value = targets[key]; |
| 71 | + dfpAdUnits[slotName].setTargeting(key, value); |
| 72 | + } |
| 73 | + } |
| 74 | + } |
| 75 | + if (sizeMapping) { |
| 76 | + dfpAdUnits[slotName].defineSizeMapping(sizeMapping); |
| 77 | + } |
| 78 | + dfpAdUnits[slotName].addService(googletag.pubads()); |
| 79 | + googletag.display(divId); |
| 80 | + }); |
| 81 | + } |
| 82 | + }; |
| 83 | + |
| 84 | + AdLayersDFPAPI.prototype.lazyLoadAd = function (args) { |
| 85 | + if (!args.slotName) { |
| 86 | + return; |
| 87 | + } |
| 88 | + |
| 89 | + if (args.format) { |
| 90 | + if (!(dfpAdDetails && dfpAdDetails[args.format])) { |
| 91 | + return; |
| 92 | + } |
| 93 | + if (!args.path) { |
| 94 | + args.path = dfpAdDetails[args.format].path; |
| 95 | + } |
| 96 | + if (!args.sizes) { |
| 97 | + args.sizes = dfpAdDetails[args.format].sizes; |
| 98 | + } |
| 99 | + if (!args.targeting) { |
| 100 | + args.targeting = dfpAdDetails[args.format].targeting; |
| 101 | + } |
| 102 | + if (!args.sizeMapping) { |
| 103 | + if (dfpBuiltMappings && dfpBuiltMappings[args.format]) { |
| 104 | + args.sizeMapping = dfpBuiltMappings[args.format]; |
| 105 | + } else { |
| 106 | + args.sizeMapping = null; |
| 107 | + } |
| 108 | + } |
| 109 | + } |
| 110 | + return this.buildAd(args.slotName, args.path, args.sizes, args.targeting, args.sizeMapping); |
| 111 | + }; |
| 112 | + |
| 113 | + // Switches sizes in debug mode |
| 114 | + AdLayersDFPAPI.swapSizes = function ($size) { |
| 115 | + // Unselect all other sizes and set this one |
| 116 | + $size.siblings().removeClass('selected'); |
| 117 | + $size.addClass('selected'); |
| 118 | + |
| 119 | + // Set the width and height |
| 120 | + $size.parents('.dfp-ad').width($size.data('width')); |
| 121 | + $size.parents('.dfp-ad').height($size.data('height')); |
| 122 | + |
| 123 | + // Center the debug container vertically |
| 124 | + $size.parents('.dfp-debug-container').css({ |
| 125 | + top: ($size.data('height') - $size.parents('.dfp-debug-container').outerHeight()) / 2, |
| 126 | + }); |
| 127 | + }; |
| 128 | + |
| 129 | + AdLayersDFPAPI.addDebugPlaceholder = function ($adDiv, adSizes) { |
| 130 | + // Get the ad slot sizes for the current breakpoint |
| 131 | + const adSlot = $adDiv.data('adUnit'); |
| 132 | + |
| 133 | + // Set the background |
| 134 | + $adDiv.addClass('dfp-debug'); |
| 135 | + |
| 136 | + // Create a container for the ad data |
| 137 | + $container = $('<div>') |
| 138 | + .addClass('dfp-debug-container'); |
| 139 | + |
| 140 | + // Add a label |
| 141 | + $label = $('<div>') |
| 142 | + .addClass('dfp-debug-unit') |
| 143 | + .text(adSlot); |
| 144 | + $container.append($label); |
| 145 | + |
| 146 | + // Add additional sizes for selection |
| 147 | + $.each(adSizes, (index, value) => { |
| 148 | + $link = $('<a>') |
| 149 | + .attr('href', '#') |
| 150 | + .data('width', value[0]) |
| 151 | + .data('height', value[1]) |
| 152 | + .text(`${value[0]}x${value[1]}`) |
| 153 | + .addClass('dfp-debug-size'); |
| 154 | + |
| 155 | + $container.append($link); |
| 156 | + }); |
| 157 | + |
| 158 | + // Add to the ad div |
| 159 | + $adDiv.append($container); |
| 160 | + |
| 161 | + // Set to the first size |
| 162 | + AdLayersDFPAPI.swapSizes($adDiv.find('a').first()); |
| 163 | + }; |
| 164 | + |
| 165 | + // Enables debug mode |
| 166 | + AdLayersDFPAPI.prototype.debug = function () { |
| 167 | + // Iterate through all of the ad units and display them in debug mode |
| 168 | + $('.dfp-ad').each(function () { |
| 169 | + const $adDiv = $(this); |
| 170 | + const adSlot = $adDiv.data('adUnit'); |
| 171 | + |
| 172 | + if (adSlot && dfpSizeMapping[adSlot] !== 'undefined') { |
| 173 | + // Get the appropriate sizes for this breakpoint |
| 174 | + let adSizes = []; |
| 175 | + let maxWidth = -1; |
| 176 | + let maxHeight = -1; |
| 177 | + $.each(dfpSizeMapping[adSlot], (index, value) => { |
| 178 | + if ($(window).width() >= value[0][0] |
| 179 | + && $(window).height() >= value[0][1] |
| 180 | + && value[0][0] >= maxWidth |
| 181 | + && value[0][1] >= maxHeight |
| 182 | + ) { |
| 183 | + maxWidth = value[0][0]; |
| 184 | + maxHeight = value[0][1]; |
| 185 | + adSizes = value[1]; |
| 186 | + } |
| 187 | + }); |
| 188 | + |
| 189 | + AdLayersDFPAPI.addDebugPlaceholder($(this), adSizes); |
| 190 | + } |
| 191 | + }); |
| 192 | + |
| 193 | + // Add a debug bar with general layer information and a DFP console toggle |
| 194 | + $layerTitle = $('<div>') |
| 195 | + .addClass('dfp-ad-layer') |
| 196 | + .text(`${adLayersDFP.layerDebugLabel}: ${dfpAdLayer.title}`); |
| 197 | + |
| 198 | + $googleConsole = $('<a>') |
| 199 | + .addClass('dfp-console') |
| 200 | + .attr('href', window.location.href.replace('adlayers_debug', 'googfc')) |
| 201 | + .text(adLayersDFP.consoleDebugLabel); |
| 202 | + |
| 203 | + $debugBar = $('<div>') |
| 204 | + .attr('id', 'dfp-debug-bar') |
| 205 | + .addClass('dfp-debug') |
| 206 | + .append($layerTitle) |
| 207 | + .append($googleConsole); |
| 208 | + |
| 209 | + $('body').append($debugBar); |
| 210 | + |
| 211 | + // If the WordPress admin bar exists, push it down |
| 212 | + if ($('#wpadminbar').length) { |
| 213 | + $('#dfp-debug-bar').css('top', '32px'); |
| 214 | + } |
| 215 | + }; |
| 216 | + |
| 217 | + // Handle click actions for swapping ad unit sizes |
| 218 | + $(document).ready(() => { |
| 219 | + $('body').on('click', 'a.dfp-debug-size', function (e) { |
| 220 | + e.preventDefault(); |
| 221 | + AdLayersDFPAPI.swapSizes($(this)); |
| 222 | + }); |
| 223 | + }); |
| 224 | +}(jQuery)); |
0 commit comments