代码拉取完成，页面将自动刷新
<html><head><!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--><!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--><meta charset="UTF-8">
<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<script>window.gwdPreview = {"config":{"previewPath":"index.html","modes":["mobile","desktop"],"sizes":[],"breakpoints":null,"feeds":{},"feedNames":[],"reloadOnResize":false,"defaults":{"mode":"mobile","modeSettings":{"mobile":{"device":"pixel2xl","feed":null},"desktop":{"feed":null}}}},"strings":{"MSG_ALL_FEEDS_MODE":"\u6240\u6709\u793a\u4f8b\u6570\u636e","MSG_ALL_SIZES_MODE":"\u6240\u6709\u5c3a\u5bf8","MSG_CUSTOM":"\u81ea\u5b9a\u4e49","MSG_CUSTOM_SIZE":"\u81ea\u5b9a\u4e49\u5c3a\u5bf8","MSG_DESKTOP_MODE":"\u684c\u9762\u8bbe\u5907","MSG_DEVICE":"\u8bbe\u5907","MSG_MOBILE_MODE":"\u79fb\u52a8\u8bbe\u5907","MSG_NO_SAMPLE_DATA":"\u6ca1\u6709\u6837\u672c\u6570\u636e","MSG_NO_SAMPLE_DATA_TO_PREVIEW":"\u9700\u9009\u62e9\u6837\u672c\u6570\u636e\uff0c\u624d\u80fd\u67e5\u770b\u9884\u89c8\u3002","MSG_NO_SIZES_TO_PREVIEW":"\u9700\u9009\u62e9\u5c3a\u5bf8\uff0c\u624d\u80fd\u67e5\u770b\u9884\u89c8\u3002","MSG_NONE_SELECTED":"\u672a\u9009\u62e9","MSG_PARALLAX_MODE":"\u89c6\u5dee","MSG_PREVIEW_MODE":"\u9884\u89c8\u6a21\u5f0f","MSG_RELOAD":"\u91cd\u65b0\u52a0\u8f7d","MSG_RELOAD_ALL":"\u5168\u90e8\u91cd\u65b0\u52a0\u8f7d","MSG_ROTATE_DEVICE":"\u65cb\u8f6c\u8bbe\u5907\u65b9\u5411","MSG_SAMPLE_FEED":"\u793a\u4f8b\u6570\u636e","MSG_SAMPLE_FEEDS":"\u793a\u4f8b\u6570\u636e","MSG_SELECT_ALL":"\u5168\u9009","MSG_SELECT_NONE":"\u5168\u90e8\u4e0d\u9009","MSG_SELECTED":"\u5df2\u9009\u62e9 {num} \u9879","MSG_SHOW_SIZE":"\u663e\u793a\u4e00\u79cd\u5c3a\u5bf8","MSG_SHOW_SIZES":"\u663e\u793a\u591a\u79cd\u5c3a\u5bf8","MSG_SINGLE_MODE":"\u5355\u4e00\u5c3a\u5bf8","MSG_VIEWPORT_SIZE":"\u89c6\u53e3\u5927\u5c0f"}};</script></head>
<body><div hidden="" by-vulcanize="">
<dom-module id="tf-creative-preview-selector-shared-styles" assetpath="/preview/">
<template>
<style>
:host {
display: block;
}
paper-dropdown-menu {
/* The font size is customized via a mixin targeting the internal paper-input-container.
* This mixin must be set at the paper-dropdown-menu level rather than cascade down to it
* because the initial base font subhead styles we'd like to override are included and
* redefined directly in paper-dropdown-menu's local styles. */
--paper-input-container-input: {
font-size: inherit;
/* Prevents the line-height of the internal input from being too large in IE. */
line-height: 1em;
};
/* Turn off the paper-input-container underline for dropdowns. */
--paper-input-container-underline: {
display: none;
};
--paper-input-container-underline-focus: {
display: none;
};
/* Don't show the ripple over the menu button. */
--paper-dropdown-menu-ripple: {
display: none;
};
/* width must be explicitly set 100% because paper-dropdown-menu does not automatically take
* its width from its selected value. */
width: 100%;
/* Although we hide the underline, its container will still take up 2px of height. There are
* no APIs to remove it, so cancel out its height with a negative margin. */
margin-bottom: -2px;
}
[slot="dropdown-content"] {
display: block;
padding: var(--tf-creative-preview-padding) 0;
/* Ensure dropdowns are at least as wide as the .control containers' inner width. The
* iron-dropdown popup's width is calculated from the dropdown-content (e.g., this listbox)
* width at the time the dropdown is opened, and the width must be an absolute
* (not relative) value. */
min-width: var(--tf-creative-preview-control-width);
}
paper-item {
/* The background highlight for paper-items is implemented as a pseudo-element. Hide it;
* we implement our own hover effect that works for both focus and hover states (hover
* states are not handled by paper elements by default). See paper-item:hover below. */
--paper-item-focused-before: {
display: none;
};
/* By default, paper-items use the paper subhead font size. */
font-size: inherit;
min-height: var(--tf-creative-preview-item-height);
cursor: pointer;
/* A fix for min-height in IE. @see https://github.com/philipwalton/flexbugs/issues/231 */
height: 1px;
}
/* Highlight paper-items on focus (when navigating via keyboard) and on hover. */
paper-item:hover,
paper-item:focus {
background: var(--tf-creative-preview-item-highlight-color);
}
/* A horizontal rule which separates groups of menu items. */
.divider {
height: 1px;
background: var(--tf-creative-preview-border-color);
margin: var(--tf-creative-preview-padding) 0;
}
</style>
</template>
</dom-module>
<dom-module id="tf-creative-preview-multi-selector" assetpath="/preview/">
<template>
<style include="tf-creative-preview-selector-shared-styles">
paper-checkbox {
--paper-checkbox-size: 16px;
--paper-checkbox-unchecked-color: var(--tf-creative-preview-icon-color);
--paper-checkbox-checked-color: var(--tf-creative-preview-accent-color);
/* Don't show the ripple. Hide it by setting a zero size rather than a transparent color to
* prevent an artifact of the ripple from appearing on first render in Firefox. */
--paper-checkbox-ink-size: 0px;
/* Style paper-checkboxes to look like paper-items. It's not possible to use shared
* paper-item styles directly due to github.com/PolymerElements/paper-item/issues/85. */
display: block;
cursor: pointer;
padding: 0 calc(var(--tf-creative-preview-padding) * 2);
min-height: var(--tf-creative-preview-item-height);
@apply --layout-horizontal;
@apply --layout-center;
/* A fix for min-height in IE. @see https://github.com/philipwalton/flexbugs/issues/231 */
height: 1px;
}
/* Use the same focus/hover effect for checkboxes as for paper-items. */
paper-checkbox:hover,
paper-checkbox:focus {
background: var(--tf-creative-preview-item-highlight-color);
}
</style>
<paper-dropdown-menu id="dropdown" always-float-label="" label="[[label]]" value="[[displayedValue_]]" title$="[[label]]" on-opened-changed="onOpenedChanged_">
<paper-listbox id="menu" slot="dropdown-content" multi="" attr-for-selected="data-value" selected-attribute="checked" selectable="paper-checkbox" selected-values="{{values}}" on-iron-select="onIronEvent_" on-iron-deselect="onIronEvent_" on-iron-activate="onIronEvent_">
<template is="dom-repeat" items="[[items]]" as="item">
<paper-checkbox noink="" data-value="[[item.value]]">[[item.label]]</paper-checkbox>
</template>
<div class="divider"></div>
<paper-item on-click="onSelectAllClick_">[[getMsg_('SELECT_ALL')]]</paper-item>
<paper-item on-click="onSelectNoneClick_">[[getMsg_('SELECT_NONE')]]</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
<dom-module id="tf-creative-preview-selector" assetpath="/preview/">
<template>
<style include="tf-creative-preview-selector-shared-styles"></style>
<paper-dropdown-menu id="dropdown" always-float-label="" label="[[label]]" title$="[[label]]" on-opened-changed="onOpenedChanged_">
<paper-listbox id="menu" slot="dropdown-content" attr-for-selected="data-value" selected="{{value}}" selectable="paper-item">
<template is="dom-if" if="[[showCustomOption]]" restamp="">
<paper-item data-value="custom">[[getCustomLabel_()]]</paper-item>
<div class="divider"></div>
</template>
<template is="dom-repeat" items="[[items]]" as="item">
<paper-item data-value="[[item.value]]">[[item.label]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
<dom-module id="tf-text-slider" assetpath="/tf-text-slider/">
<template>
<style>
/* Hide spinner in Firefox. */
::slotted(input[type="number"]) {
-moz-appearance: textfield;
}
/* Hide spinner in Webkit. */
/* TODO(sklobovskaya): This does not appear to actually work. For now, the component
* implementing the text slider must style the input itself in its local styles. Investigate
* if there is a workaround or if this is a bug. */
::slotted(input[type="number"])::-webkit-outer-spin-button,
::slotted(input[type="number"])::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
<slot name="input"></slot>
</template>
</dom-module>
<dom-module id="tf-creative-preview-size-input" assetpath="/preview/">
<template>
<style>
:host {
/* Opacity for disabled labels and inputs. The default paper-input opacity is too faint. */
--tf-creative-preview-disabled-opacity: 0.5;
display: block;
}
paper-input-container {
--paper-input-container-focus-color: var(--tf-creative-preview-accent-color);
--paper-input-container-underline: {
border-color: var(--tf-creative-preview-border-color);
};
--paper-input-container-input: {
font-size: inherit;
};
--paper-input-container-disabled: {
opacity: var(--tf-creative-preview-disabled-opacity);
};
display: inline-block;
/* Reduce bottom padding by 2px because the underline container contributes 2px of height.
* This bottom-aligns the input with the selectors, which don't show an underline. */
padding-bottom: 6px;
/* Crop the whitespace reserved for the floating label. We won't use the
* paper-input-container's label. */
margin-top: -28px;
}
#label {
height: 20px;
line-height: 20px;
color: var(--secondary-text-color);
padding-top: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
:host([disabled]) {
/* Although there are no mouse handlers on the host element itself, turning off pointer
* events is necessary to prevent the tooltip from appearing when the input is disabled.
* This is for consistency with other paper-input-containers. */
pointer-events: none;
}
:host([disabled]) #label {
opacity: var(--tf-creative-preview-disabled-opacity);
}
#inputs {
@apply --layout-horizontal;
}
input {
@apply --paper-input-container-shared-input-style;
font-size: inherit;
width: 40px;
text-align: center;
/* Additionally set the line-height value using height, required for IE. */
height: 24px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* Hide spinner in Webkit. This CSS must be defined here due to an issue with ::slotted()
* that does not permit styling this pseudo-element in TfTextSlider's template. See
* comment in tf-text-slider-v2.html. */
-webkit-appearance: none;
margin: 0;
}
</style>
<div id="label">[[label]]</div>
<paper-input-container id="container" always-float-label="" disabled$="[[disabled]]">
<div id="inputs" class="paper-input-input" slot="input">
<tf-text-slider>
<input id="width" slot="input" type="number" min$="[[min]]" max$="[[max]]" on-changing="commitChange_" on-change="commitChange_" on-keypress="onKeypress_" on-blur="commitChange_" disabled$="[[disabled]]">
</tf-text-slider>
x
<tf-text-slider>
<input id="height" slot="input" type="number" min$="[[min]]" max$="[[max]]" on-changing="commitChange_" on-change="commitChange_" on-keypress="onKeypress_" on-blur="commitChange_" disabled$="[[disabled]]">
</tf-text-slider>
</div>
</paper-input-container>
</template>
</dom-module>
<dom-module id="tf-creative-preview-controls" assetpath="/preview/">
<template>
<style>
:host {
/* Apply general customizations to paper-input-container, which is used internally in all
* input components. */
/* By default, the label changes color on focus. Turn off the color change. */
--paper-input-container-label-focus: {
color: var(--secondary-text-color);
};
/* By default, the label is shown at a smaller size than the base font. Turn off the
* shrinking effect so the label font size is the same as the rest of the text. */
--paper-input-container-label-floating: {
-webkit-transform: translateY(-90%);
transform: translateY(-90%);
width: inherit;
};
--paper-input-container-label: {
font-size: inherit;
max-width: 100%;
};
display: block;
}
.flex-container {
@apply --layout-horizontal;
@apply --layout-center;
}
/* Only add the outermost padding when there are controls to show, so that when the control
* bar is empty, it appears completely collapsed. */
:host([has-controls]) .flex-container {
padding: var(--tf-creative-preview-padding);
}
/* A container with a vertical divider for displaying a single control. */
.control {
padding: 0 var(--tf-creative-preview-padding);
border-right: 1px solid var(--tf-creative-preview-border-color);
box-sizing: content-box;
}
/* A wrapper for an input component which ensures a minimum width so the dropdown widths can
* be matched with widths of their flyouts. */
.input-container {
width: var(--tf-creative-preview-control-width);
flex-shrink: 0;
}
/* Remove the top and bottom padding from all internal paper-input-containers common to all
* input components. This padding can also be removed via a paper-input-container mixin, but
* when removed this way, the positioning of the flyout is also affected. */
tf-creative-preview-selector,
tf-creative-preview-multi-selector,
tf-creative-preview-size-input {
margin: calc(var(--tf-creative-preview-padding) * -1) 0;
}
tf-creative-preview-selector,
tf-creative-preview-multi-selector {
padding-left: var(--tf-creative-preview-padding);
}
tf-creative-preview-size-input {
padding: 0 var(--tf-creative-preview-padding);
}
/* Modifier class for .control containers which have an input and a suffix button. */
.has-suffix {
@apply --layout-horizontal;
/* Bottom-align the suffix and the input so the suffix appears in line with the dropdown
* and not the full height of the selector, which includes the label. */
@apply --layout-end;
/* Prevent the suffix button container from collapsing in IE (b/113591503). */
flex-shrink: 0;
}
/* Container for a suffix element which should appear inline with an input. */
.has-suffix .suffix-container {
border-left: 1px solid var(--tf-creative-preview-border-color);
height: 24px;
margin-left: var(--tf-creative-preview-padding);
padding-left: var(--tf-creative-preview-padding);
@apply --layout-horizontal;
@apply --layout-center;
}
.has-suffix .suffix-container paper-icon-button {
width: 36px;
height: 36px;
margin: -8px; /* Cancel out the icon's padding. */
}
/* Device rotation buttons and the Reload button. */
paper-icon-button {
flex-shrink: 0;
--paper-icon-button: {
color: var(--tf-creative-preview-icon-color);
};
}
/* The Reload button. */
#reloadButton {
margin-left: auto;
}
/* Hide controls by default until they are enabled with the `control-enabled` class. A class
* is used instead of the native `hidden` attribute so that visibility can default to false
* before any properties which determine visibility are evaluated. Controls are hidden with
* :not() rather than the inverse because different controls have different display styles
* (block, flex). */
.control:not(.control-enabled),
#reloadButton:not(.control-enabled) {
display: none;
}
</style>
<div class="flex-container">
<div class$="control input-container [[getControlEnabledClass_(enabledControls_.mode)]]">
<tf-creative-preview-selector id="mode-control" label="[[getMsg_('PREVIEW_MODE')]]" value="{{mode}}" items="[[getModesItemsList_(modes)]]">
</tf-creative-preview-selector>
</div>
<template is="dom-if" if="[[modeIs_('single', mode)]]">
<div class$="control input-container [[getControlEnabledClass_(enabledControls_.size)]]">
<tf-creative-preview-selector id="single-size-control" show-custom-option="" label="[[getMsg_('SHOW_SIZE')]]" items="[[getSizesItemsList_(sortedSizes_)]]" value="[[getSizeSelectorValue_(
modeSettings.single.size, modeSettings.single.isCustomSize)]]" on-value-changed="onSizeSelectorChange_">
</tf-creative-preview-selector>
</div>
<div class$="control input-container
[[getControlEnabledClass_(modeSettings.single.isCustomSize)]]">
<tf-creative-preview-size-input id="single-custom-size-control" label="[[getMsg_('CUSTOM_SIZE')]]" value="{{modeSettings.single.size}}" min="[[minSize_]]" max="[[maxSize_]]">
</tf-creative-preview-size-input>
</div>
<div class$="control input-container [[getControlEnabledClass_(enabledControls_.feed)]]">
<tf-creative-preview-selector id="single-feed-control" label="[[getMsg_('SAMPLE_FEED')]]" value="{{modeSettings.single.feed}}" items="[[getFeedsItemsList_(feeds)]]">
</tf-creative-preview-selector>
</div>
</template>
<template is="dom-if" if="[[modeIs_('allsizes', mode)]]">
<div class="control input-container control-enabled">
<tf-creative-preview-multi-selector id="allsizes-sizes-control" label="[[getMsg_('SHOW_SIZES')]]" values="{{modeSettings.allsizes.sizes}}" items="[[getSizesItemsList_(sortedSizes_)]]">
</tf-creative-preview-multi-selector>
</div>
<div class$="control input-container [[getControlEnabledClass_(enabledControls_.feed)]]">
<tf-creative-preview-selector id="allsizes-feed-control" label="[[getMsg_('SAMPLE_FEED')]]" value="{{modeSettings.allsizes.feed}}" items="[[getFeedsItemsList_(feeds)]]">
</tf-creative-preview-selector>
</div>
</template>
<template is="dom-if" if="[[modeIs_('allfeeds', mode)]]">
<div class$="control input-container [[getControlEnabledClass_(enabledControls_.size)]]">
<tf-creative-preview-selector id="allfeeds-size-control" label="[[getMsg_('SHOW_SIZE')]]" value="{{modeSettings.allfeeds.size}}" items="[[getSizesItemsList_(sortedSizes_)]]">
</tf-creative-preview-selector>
</div>
<div class="control input-container control-enabled">
<tf-creative-preview-multi-selector id="allfeeds-feeds-control" label="[[getMsg_('SAMPLE_FEEDS')]]" values="{{modeSettings.allfeeds.feeds}}" items="[[getFeedsItemsList_(feeds)]]">
</tf-creative-preview-multi-selector>
</div>
</template>
<template is="dom-if" if="[[modeIs_('mobile', mode)]]">
<div class="control has-suffix control-enabled">
<div class="input-container">
<tf-creative-preview-selector id="mobile-device-control" show-custom-option="" label="[[getMsg_('DEVICE')]]" items="[[getDevicesItemsList_()]]" value="[[getSizeSelectorValue_(
modeSettings.mobile.device, modeSettings.mobile.isCustomSize)]]" on-value-changed="onMobileDeviceSelectorChange_">
</tf-creative-preview-selector>
</div>
<div class="suffix-container">
<paper-icon-button id="mobile-rotate-device-control" icon="device:screen-rotation" title$="[[getMsg_('ROTATE_DEVICE')]]" on-click="onMobileRotateButtonClick_">
</paper-icon-button>
</div>
</div>
<div class="control input-container control-enabled">
<tf-creative-preview-size-input id="mobile-custom-size-control" label="[[getMsg_('VIEWPORT_SIZE')]]" value="{{modeSettings.mobile.deviceSize}}" min="[[minSize_]]" max="[[maxSize_]]" disabled="[[!modeSettings.mobile.isCustomSize]]">
</tf-creative-preview-size-input>
</div>
<div class$="control input-container [[getControlEnabledClass_(enabledControls_.feed)]]">
<tf-creative-preview-selector id="mobile-feed-control" label="[[getMsg_('SAMPLE_FEED')]]" value="{{modeSettings.mobile.feed}}" items="[[getFeedsItemsList_(feeds)]]">
</tf-creative-preview-selector>
</div>
</template>
<template is="dom-if" if="[[modeIs_('desktop', mode)]]">
<div class$="control input-container [[getControlEnabledClass_(enabledControls_.feed)]]">
<tf-creative-preview-selector id="desktop-feed-control" label="[[getMsg_('SAMPLE_FEED')]]" value="{{modeSettings.desktop.feed}}" items="[[getFeedsItemsList_(feeds)]]">
</tf-creative-preview-selector>
</div>
</template>
<template is="dom-if" if="[[modeIs_('parallax', mode)]]">
<div class="control has-suffix control-enabled">
<div class="input-container">
<tf-creative-preview-selector id="parallax-device-control" show-custom-option="" label="[[getMsg_('DEVICE')]]" items="[[getDevicesItemsList_()]]" value="[[getSizeSelectorValue_(
modeSettings.parallax.device, modeSettings.parallax.isCustomSize)]]" on-value-changed="onParallaxDeviceSelectorChange_">
</tf-creative-preview-selector>
</div>
<div class="suffix-container">
<paper-icon-button id="parallax-rotate-device-control" icon="device:screen-rotation" on-click="onParallaxRotateButtonClick_">
</paper-icon-button>
</div>
</div>
<div class="control input-container control-enabled">
<tf-creative-preview-size-input id="parallax-custom-size-control" label="[[getMsg_('VIEWPORT_SIZE')]]" value="{{modeSettings.parallax.deviceSize}}" min="[[minSize_]]" max="[[maxSize_]]" disabled="[[!modeSettings.parallax.isCustomSize]]">
</tf-creative-preview-size-input>
</div>
<div class$="control input-container [[getControlEnabledClass_(enabledControls_.feed)]]">
<tf-creative-preview-selector id="parallax-feed-control" label="[[getMsg_('SAMPLE_FEED')]]" value="{{modeSettings.parallax.feed}}" items="[[getFeedsItemsList_(feeds)]]">
</tf-creative-preview-selector>
</div>
</template>
<paper-icon-button id="reloadButton" icon="icons:refresh" title$="[[getMsg_('RELOAD_ALL')]]" class$="[[getControlEnabledClass_(hasControls)]]" on-click="onReloadButtonClick_">
</paper-icon-button>
</div>
</template>
</dom-module>
<dom-module id="tf-creative-preview-desktop" assetpath="/preview/">
<template>
<style>
:host {
display: block;
padding: var(--tf-creative-preview-stage-padding);
box-sizing: border-box;
}
iframe {
border: none;
background: #fff;
width: 100%;
height: 100%;
@apply --shadow-elevation-2dp;
}
</style>
<iframe id="iframe" allowfullscreen="" src="[[getIframeSrc(previewPath, feed, active)]]"></iframe>
</template>
</dom-module>
<dom-module id="tf-creative-preview-gwd-logo" assetpath="/preview/">
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1387.01 180.33">
<defs>
<style>.cls-1{fill:#ccc;}.cls-2{fill:#4480f6;}.cls-3{fill:#f3b500;}.cls-4{fill:#db4534;}.cls-5{fill:#fff;}.cls-6{fill:#3569be;}.cls-7{fill:#b0362f;}.cls-8,.cls-9{fill:#b7b7b7;}.cls-9{opacity:0.5;isolation:isolate;}.cls-10{fill:#5f6368;}</style>
</defs>
<path class="cls-1" d="M221.43,340.21V340h0a24.28,24.28,0,0,1-17,22.86,21.71,21.71,0,0,1-6.91,1.11h0v21.35c23.81-.16,43.18-20.8,43.58-45.08Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-2" d="M156.82,344.26a36.7,36.7,0,0,1,.4-5.16A34.31,34.31,0,0,1,191,310.21h.56V263.61a81.37,81.37,0,0,0-81.12,81.12h46.43Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-3" d="M156.82,344.73H96.9c0,54.77,45.32,99.22,100.72,99.22V385.37C175.48,385.37,157.14,366.8,156.82,344.73Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-4" d="M191.59,277.5v32.78a34.75,34.75,0,0,1,4,.32A29.64,29.64,0,0,1,221.43,340v.4h31.75C253.18,305.84,225.88,277.82,191.59,277.5Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-5" d="M197.54,364h0a22.46,22.46,0,0,0,6.91-1.11,24.19,24.19,0,0,1-6.91,1.11Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-6" d="M110.39,344.73h46.43l-46-8.65A79,79,0,0,0,110.39,344.73Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-7" d="M200.32,278.22a63.84,63.84,0,0,0-8.81-.71v32.7Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-8" d="M197.54,363.94v0Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-9" d="M197.54,363.94v21.35l10.4-23.81a18.68,18.68,0,0,1-3.49,1.35A19.7,19.7,0,0,1,197.54,363.94Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-8" d="M241.2,340.29H221.51l18.81,8.25A57.07,57.07,0,0,0,241.2,340.29Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M838.36,395.52H826.77L807.8,337h-.4l-19,58.52H776.84l-24.57-88.68h12L783,376.55h.4l19.17-57.72h10.59l19.17,57.72h.4l17.78-69.71h12Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M859.93,365.16c0-17.18,12-32.36,29.76-32.36,18.18,0,29.76,12.78,29.76,32.36a20.8,20.8,0,0,1-.2,2.2H871.31c.6,12.78,10,19.77,19.37,19.77,6.59,0,13.38-2.8,16.58-10.39l10.19,4.19c-3.6,8.59-12.58,16.58-26.57,16.58C872.31,397.52,859.93,383.54,859.93,365.16Zm29.56-22c-8.39,0-15.18,5.79-17.38,14.58h35.15C906.87,352.58,902.47,343.19,889.49,343.19Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M940,387.13h-.4v8.39h-11V306.84H940v28l-.4,8.39h.4c3.4-5.59,11-10.39,20.77-10.39,15.38,0,28.76,13.78,28.76,32.36S976,397.52,960.8,397.52C951,397.52,943.42,392.73,940,387.13Zm38-22c0-13.58-9.19-22-19.37-22s-19.37,8-19.37,22c0,13.78,9.19,22,19.37,22C969,387.13,978,378.75,978,365.16Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M1019.12,306.84h27.16c27.56,0,44.94,18.38,44.94,44.34s-17.38,44.34-44.94,44.34h-27.16Zm27.16,77.7c20.37,0,33.36-12.18,33.36-33.36s-13-33.36-33.36-33.36H1030.5v66.91h15.78Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M1097.42,365.16c0-17.18,12-32.36,29.76-32.36,18.18,0,29.76,12.78,29.76,32.36a20.8,20.8,0,0,1-.2,2.2H1108.8c.6,12.78,10,19.77,19.37,19.77,6.59,0,13.38-2.8,16.58-10.39l10.19,4.19c-3.6,8.59-12.58,16.58-26.57,16.58C1109.8,397.52,1097.42,383.54,1097.42,365.16Zm29.36-22c-8.39,0-15.18,5.79-17.38,14.58h35.15C1144.35,352.58,1140,343.19,1126.78,343.19Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M1162.13,380.14l10.19-4.19c3.2,7.59,9.19,11.39,16.38,11.39,7,0,12.18-3.4,12.18-8.59,0-3-1.8-6.39-8.39-8l-12.18-3c-5.59-1.4-16.18-6.19-16.18-16.78,0-11,11.39-18.18,24-18.18,10.59,0,19.77,4.79,23.37,14.18l-10,4c-2.4-5.79-8-8-13.78-8-6.39,0-12,2.8-12,7.79,0,3.8,3.2,6,8,7l12,2.8c12,2.8,16.78,10.19,16.78,17.78,0,10.79-9.59,19-24,19C1173.92,397.52,1165.53,388.93,1162.13,380.14Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M1219.06,314a8,8,0,1,1,8,8A8,8,0,0,1,1219.06,314Zm2.4,81.49V334.8h11.39v60.72Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M1244.82,406.51l10.39-4.39a17.86,17.86,0,0,0,17,11.58c12.58,0,20.17-8.19,20.17-21v-5.79h-.4c-3.8,5.59-11,10.39-20.77,10.39-15.38,0-28.76-13.78-28.76-32.36s13.38-32.36,28.76-32.36A25,25,0,0,1,1292,343h.4V334.6h11v57.52c0,22-15.18,31.76-31.16,31.76S1248,413.9,1244.82,406.51Zm47.54-41.35c0-13.78-9.19-22-19.37-22s-19.37,8.39-19.37,22,9.19,22,19.37,22S1292.36,379.15,1292.36,365.16Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M1326.12,343.19h.4c3.2-5.59,11-10.39,19.17-10.39,15.38,0,23.17,10.59,23.17,25.57v37.15h-11.39V360.17c0-12.58-6.39-16.78-15-16.78-10,0-16,9.39-16,18.78v33.56h-11.39V335h11v8.19Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M1377.65,365.16c0-17.18,12-32.36,29.76-32.36,18.18,0,29.76,12.78,29.76,32.36a20.81,20.81,0,0,1-.2,2.2H1389c.6,12.78,10,19.77,19.37,19.77,6.59,0,13.38-2.8,16.58-10.39l10.19,4.19c-3.6,8.59-12.58,16.58-26.57,16.58C1390,397.52,1377.65,383.54,1377.65,365.16Zm29.56-22c-8.39,0-15.18,5.79-17.38,14.58H1425C1424.59,352.58,1420.19,343.19,1407.21,343.19Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M1446.36,395.52V334.8h11v10h.4c2.4-7,11.19-11.39,17.58-11.39a20.85,20.85,0,0,1,8.59,1.4l-4.39,10.59a17.41,17.41,0,0,0-6-.8c-7.79,0-15.78,6.59-15.78,17.78v33.16Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M311.37,346.79c0-28,23.57-50.73,51.53-50.73a48,48,0,0,1,34.75,14l-9.79,9.79a35.36,35.36,0,0,0-25-10c-20.37,0-36.35,16.38-36.35,37,0,20.37,16,37,36.35,37,13.18,0,20.77-5.39,25.57-10.19,4-4,6.59-9.59,7.59-17.38H362.9V342.39h46.74a52.43,52.43,0,0,1,.8,8.59c0,10.39-2.8,23.37-12,32.36-9,9.19-20.37,14.18-35.35,14.18C334.94,397.52,311.37,374.75,311.37,346.79Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M448,332.21c-18.18,0-32.76,13.78-32.76,32.76A32.4,32.4,0,0,0,448,397.72c18,0,32.76-13.78,32.76-32.76C480.94,345.79,466.16,332.21,448,332.21Zm0,52.33c-10,0-18.38-8.19-18.38-19.77C429.61,353,438.2,345,448,345c10,0,18.38,8,18.38,19.77C466.56,376.55,458,384.54,448,384.54Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M519.69,332.21c-18.18,0-32.76,13.78-32.76,32.76a32.4,32.4,0,0,0,32.76,32.76c18,0,32.76-13.78,32.76-32.76C552.45,345.79,537.67,332.21,519.69,332.21Zm0,52.33c-10,0-18.38-8.19-18.38-19.77,0-11.78,8.59-19.77,18.38-19.77,10,0,18.38,8,18.38,19.77S529.48,384.54,519.69,384.54Z" transform="translate(-96.9 -263.61)"></path>
<path class="cls-10" d="M607.58,334.2v5.39h-.4c-3.2-3.8-9.39-7.39-17.18-7.39-16.38,0-31.36,14.38-31.36,32.76s15,32.56,31.36,32.56c7.79,0,14-3.4,17.18-7.39h.4v4.79c0,12.58-6.59,19.17-17.38,19.17-8.79,0-14.18-6.39-16.38-11.58l-12.58,5.19c3.6,8.59,13.18,19.37,29,19.37,16.78,0,31.16-10,31.16-34V334.4H607.58ZM591,384.54c-10,0-18.18-8.39-18.18-19.77,0-11.58,8.39-20,18.18-20s17.38,8.39,17.38,20C608.58,376.35,600.79,384.54,591,384.54Z" transform="translate(-96.9 -263.61)"></path>
<rect class="cls-10" x="534.05" y="35.84" width="14.38" height="96.07"></rect>
<path class="cls-10" d="M684.68,384.54c-7.39,0-12.58-3.4-15.78-10l43.74-18.18-1.4-3.8c-2.8-7.39-11-20.77-28-20.77-16.78,0-30.76,13.18-30.76,32.76,0,18.38,13.78,32.76,32.36,32.76A32.25,32.25,0,0,0,712,382.74l-11.19-7.39C697.06,381.14,692.07,384.54,684.68,384.54Zm-1-39.75c5.79,0,10.59,2.8,12.18,7L666.7,364C666.1,351.18,676.29,344.79,683.68,344.79Z" transform="translate(-96.9 -263.61)"></path>
</svg>
</template>
</dom-module>
<dom-module id="tf-creative-preview-resizable-container" assetpath="/preview/">
<template>
<style>
:host {
--tf-creative-preview-handle-size: 16px;
--tf-creative-preview-handle-color: var(--paper-grey-500);
--tf-creative-preview-handle-bg-color: var(--tf-creative-preview-bg-color);
--tf-creative-preview-handle-active-bg-color: #d8d8d8;
--tf-creative-preview-drag-handle-scale: 1.25;
display: inline-block;
position: relative;
@apply --shadow-elevation-2dp;
}
:host([resizable]) {
padding: 0 var(--tf-creative-preview-handle-size) var(--tf-creative-preview-handle-size) 0;
}
/* Using ::slotted(*) (with the wildcard) does not work correctly with the polyfill. */
:host([resizable]) ::slotted([slot="content"]) {
position: relative;
/* Shadow cast by the resizable content on the handles. */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.075);
z-index: 2;
}
.handle {
display: none;
position: absolute;
justify-content: center;
align-items: center;
box-sizing: border-box;
background: var(--tf-creative-preview-handle-bg-color);
color: var(--tf-creative-preview-handle-color);
transition: background 200ms;
-webkit-transition: background 200ms;
-moz-transition: background 200ms;
cursor: pointer;
-webkit-user-select: none;
}
:host([resizable]) .handle {
display: flex;
}
/* On handle mouseover or while a handle is being dragged, highlight the handle's background.
* The southeast handle is special -- interacting with it activates all three handles. */
.handle:hover,
.handle:active,
.handle[data-direction="se"]:hover ~ .handle,
.handle[data-direction="se"]:active ~ .handle {
background: var(--tf-creative-preview-handle-active-bg-color);
}
.handle[data-direction="e"] {
right: 0;
top: 0;
width: var(--tf-creative-preview-handle-size);
height: 100%;
padding-bottom: var(--tf-creative-preview-handle-size);
cursor: e-resize;
/* For IE. The contents are not centered correctly if using flex-direction: row. */
flex-direction: column;
}
.handle[data-direction="s"] {
bottom: 0;
width: 100%;
height: var(--tf-creative-preview-handle-size);
padding-right: var(--tf-creative-preview-handle-size);
cursor: s-resize;
}
.handle[data-direction="se"] {
right: 0;
bottom: 0;
width: var(--tf-creative-preview-handle-size);
height: var(--tf-creative-preview-handle-size);
z-index: 1;
cursor: se-resize;
}
.handle iron-icon {
flex-shrink: 0;
}
.handle[data-direction="e"] iron-icon {
/* The drag handle icons in Polymer's icon set are shorter than we need. Lengthen them. */
transform: scaleY(var(--tf-creative-preview-drag-handle-scale)) rotateZ(90deg);
}
.handle[data-direction="s"] iron-icon {
transform: scaleX(var(--tf-creative-preview-drag-handle-scale));
}
/* No diagonal drag handle icon is available in the icon set. Create one from the orthogonal
* drag icon by rotating and cropping it (see next rule). */
iron-icon.diagonal-icon {
transform: rotateZ(-45deg) translate(0px, -4px);
transform-origin: 50% 50%;
}
.diagonal-icon-crop-container {
overflow: hidden;
margin: 0px 3px 3px 0;
height: calc(var(--tf-creative-preview-handle-size) - 3px);
}
</style>
<slot name="content"></slot>
<div class="handle" data-direction="se" on-track="onTrack_">
<div class="diagonal-icon-crop-container">
<iron-icon icon="editor:drag-handle" class="diagonal-icon"></iron-icon>
</div>
</div>
<div class="handle" data-direction="e" on-track="onTrack_">
<iron-icon icon="editor:drag-handle"></iron-icon>
</div>
<div class="handle" data-direction="s" on-track="onTrack_">
<iron-icon icon="editor:drag-handle"></iron-icon>
</div>
</template>
</dom-module>
<dom-module id="tf-creative-preview-mobile" assetpath="/preview/">
<template>
<style>
:host {
display: block;
padding: var(--tf-creative-preview-stage-padding);
}
:host([responsive]) {
/* For consistency with the Single size view, don't add padding on the sides with the
* resize handles. */
padding-right: 0;
padding-bottom: 0;
}
iframe {
border: none;
background: #fff;
}
</style>
<tf-creative-preview-resizable-container id="deviceFrame" size="{{parsedDeviceSize_}}" resizable="[[responsive]]" min="[[minSize_]]" max="[[maxSize_]]">
<iframe id="iframe" slot="content" allowfullscreen="" src$="[[getIframeSrc(previewPath, feed, active)]]" width$="[[parsedDeviceSize_.width]]" height$="[[parsedDeviceSize_.height]]">
</iframe>
</tf-creative-preview-resizable-container>
</template>
</dom-module>
<dom-module id="tf-creative-preview-iframe-card" assetpath="/preview/">
<template>
<style>
/* The card details container. */
.card-actions {
/* Use content-box so the container's width can be matched to the iframe's. */
box-sizing: content-box;
@apply --layout-horizontal;
@apply --layout-center;
}
.card-content {
/* Center the iframe in the card if the card is wider than the iframe. */
text-align: center;
}
/* The Reload button. */
paper-icon-button {
--paper-icon-button: {
color: var(--tf-creative-preview-icon-color, inherit);
};
flex-shrink: 0;
margin-left: auto;
/* Counteract the button's 8px padding so icon graphic is visually right-aligned. */
margin-right: -8px;
}
iframe {
border: none;
}
</style>
<paper-card>
<div class="card-content">
<iframe id="iframe" scrolling="no" allowfullscreen="" src$="[[iframeSrc]]" width$="[[size.width]]" height$="[[size.height]]">
</iframe>
</div>
<div id="details" class="card-actions">
<div id="label">[[label]]</div>
<paper-icon-button id="reloadButton" icon="icons:refresh" title$="[[getMsg_('RELOAD')]]" on-click="onReloadButtonClick_">
</paper-icon-button>
</div>
</paper-card>
</template>
</dom-module>
<dom-module id="tf-creative-preview-multiple-feeds" assetpath="/preview/">
<template>
<style>
/* TODO(sklobovskaya): The multi feeds and sizes views' CSS is identical (as is most of the
* the logic). Consider introducing some code sharing, e.g., shared CSS or base class. */
.iframe-cards-container {
padding: 12px;
@apply --layout-horizontal;
flex-wrap: wrap;
}
tf-creative-preview-iframe-card {
display: inline-block;
margin: 12px;
}
.no-previews-message {
/* The message will be an additional 24px from the top because of the padding of the
* .iframe-cards-container, which will be empty but not hidden. */
margin-top: 64px;
padding: var(--tf-creative-preview-padding);
width: 100%;
box-sizing: border-box;
text-align: center;
color: var(--paper-grey-500);
@apply --layout-vertical;
@apply --layout-center;
}
.no-previews-message iron-icon {
--iron-icon-width: 48px;
--iron-icon-height: 48px;
}
</style>
<div class="iframe-cards-container">
<tf-creative-preview-repeat items="[[cardItems_]]" observe="feed,size">
<template>
<tf-creative-preview-iframe-card label="[[getLabel_(item.feed)]]" src="[[getIframeSrc(previewPath, item.feed, active)]]" size="[[parseSize_(item.size)]]">
</tf-creative-preview-iframe-card>
</template>
</tf-creative-preview-repeat>
</div>
<template is="dom-if" if="[[!cardItems_.length]]">
<div class="no-previews-message">
<iron-icon icon="icons:view-quilt"></iron-icon>
[[getMsg_('NO_SAMPLE_DATA_TO_PREVIEW')]]
</div>
</template>
</template>
</dom-module>
<dom-module id="tf-creative-preview-multiple-sizes" assetpath="/preview/">
<template>
<style>
.iframe-cards-container {
padding: 12px;
@apply --layout-horizontal;
flex-wrap: wrap;
}
tf-creative-preview-iframe-card {
display: inline-block;
margin: 12px;
}
.no-previews-message {
/* The message will be an additional 24px from the top because of the padding of the
* .iframe-cards-container, which will be empty but not hidden. */
margin-top: 64px;
padding: var(--tf-creative-preview-padding);
width: 100%;
box-sizing: border-box;
text-align: center;
color: var(--paper-grey-500);
@apply --layout-vertical;
@apply --layout-center;
}
.no-previews-message iron-icon {
--iron-icon-width: 48px;
--iron-icon-height: 48px;
}
</style>
<div class="iframe-cards-container">
<tf-creative-preview-repeat items="[[parsedSizes_]]" as="size" observe="width,height">
<template>
<tf-creative-preview-iframe-card label="[[getLabel_(size)]]" src="[[getIframeSrc(previewPath, feed, active)]]" size="[[size]]">
</tf-creative-preview-iframe-card>
</template>
</tf-creative-preview-repeat>
</div>
<template is="dom-if" if="[[!parsedSizes_.length]]">
<div class="no-previews-message">
<iron-icon icon="icons:view-quilt"></iron-icon>
[[getMsg_('NO_SIZES_TO_PREVIEW')]]
</div>
</template>
</template>
</dom-module>
<dom-module id="tf-creative-preview-parallax" assetpath="/preview/">
<template>
<style>
:host {
display: block;
padding: var(--tf-creative-preview-stage-padding);
/* These values must be kept in sync with the corresponding constants in
* tf-creative-preview-parallax.js. */
--tf-creative-preview-dummy-text-size: 8px;
--tf-creative-preview-dummy-text-line-height: 20px;
--tf-creative-preview-dummy-body-padding: 32px;
}
:host([responsive]) {
/* For consistency with the Single size view, don't add padding on the sides with the
* resize handles. */
padding-right: 0;
padding-bottom: 0;
}
.dummy-window {
overflow: auto;
background: #fff;
}
.dummy-window::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.dummy-window::-webkit-scrollbar-track {
background-color: transparent;
}
.dummy-window::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: var(--paper-grey-300);
border: 4px solid transparent;
border-radius: 8px;
}
.dummy-body {
width: 100%;
padding: var(--tf-creative-preview-dummy-body-padding);
background: #fff;
box-sizing: border-box;
@apply --layout-vertical;
}
.dummy-text {
background-image: linear-gradient(
to bottom,
var(--paper-grey-100) var(--tf-creative-preview-dummy-text-size),
transparent var(--tf-creative-preview-dummy-text-size));
background-repeat: repeat-y;
background-size: 100% var(--tf-creative-preview-dummy-text-line-height);
}
iframe {
border: none;
background: #fff;
margin: 24px auto;
}
</style>
<tf-creative-preview-resizable-container id="deviceFrame" size="{{parsedDeviceSize_}}" resizable="[[responsive]]" min="[[minSize_]]" max="[[maxSize_]]">
<div id="dummyWindow" slot="content" class="dummy-window" style$="[[computeDeviceViewportStyle_(parsedDeviceSize_)]]" on-scroll="onScroll_">
<div class="dummy-body">
<div class="dummy-text" style$="[[computePlaceholderTextStyle_(parsedDeviceSize_.height)]]">
</div>
<iframe id="iframe" scrolling="no" allowfullscreen="" src$="[[getIframeSrc(previewPath, feed, active)]]" width$="[[parsedSize_.width]]" height$="[[parsedSize_.height]]" on-load="onIframeLoad_">
</iframe>
<div class="dummy-text" style$="[[computePlaceholderTextStyle_(parsedDeviceSize_.height)]]">
</div>
</div>
</div>
</tf-creative-preview-resizable-container>
</template>
</dom-module>
<dom-module id="tf-creative-preview-ruler" assetpath="/preview/">
<template>
<style>
:host {
--tf-creative-preview-ruler-bg-color: #e6e6e6;
--tf-creative-preview-ruler-hover-bg-color: #d1d1d1;
--tf-creative-preview-ruler-tickmark-size: 2px;
}
:host([vertical]) {
/* For IE. Block display makes the vertical ruler not fill the available height. */
display: inline;
}
/* A flex container for the interval elements. An explicit height must be set on flex
* containers for IE; otherwise, it would have been possible to use height: 100%. */
#container {
height: var(--tf-creative-preview-ruler-size, 16px);
width: 100%;
@apply --layout-horizontal;
}
:host([vertical]) #container {
width: var(--tf-creative-preview-ruler-size, 16px);
height: 100%;
@apply --layout-vertical;
}
/* A container for a single interval which provides the padding at the right/bottom end of
* the interval to create the appearance of a tickmark. */
.interval {
box-sizing: border-box;
cursor: pointer;
flex-shrink: 0;
padding: 0 var(--tf-creative-preview-ruler-tickmark-size) 0 0;
@apply --layout-horizontal;
}
:host([vertical]) .interval {
padding: 0 0 var(--tf-creative-preview-ruler-tickmark-size) 0;
@apply --layout-vertical;
/* For IE. */
align-items: center;
}
/* A child of the interval which fills in the interval with a background color. */
.interval-bg {
background: var(--tf-creative-preview-ruler-bg-color);
font-size: 0.9em;
align-items: center;
justify-content: center;
display: flex;
flex-grow: 1;
padding: 0 4px;
}
:host([vertical]) .interval-bg {
padding: 4px 0;
position: relative;
/* For IE. */
@apply --layout-vertical;
width: 100%;
}
/* The last interval simply fills in the remaining space in the ruler. This interval has a
* small fixed minimum width or height so it does not collapse to 0; this gives the label
* room to appear and allows the user to interact with this region of the ruler. */
.interval.last {
flex-grow: 1;
padding: 0;
margin: 0;
min-width: var(--tf-creative-preview-ruler-last-interval-size, 100px);
}
:host([vertical]) .interval.last {
/* 0px rather than 'initial' is required for IE. */
min-width: 0px;
min-height: var(--tf-creative-preview-ruler-last-interval-size, 100px);
}
:host([vertical]) .interval.last .interval-bg {
justify-content: center;
}
/* The interval label which displays the interval's range, shown only on hover. */
.label {
display: none;
white-space: nowrap;
-webkit-user-select: none;
}
:host([vertical]) .label {
transform: rotateZ(90deg);
}
/* On hover, highlight the interval and show the label. */
.interval:hover .interval-bg {
background: var(--tf-creative-preview-ruler-hover-bg-color);
}
.interval:hover .label {
display: block;
}
</style>
<div id="container">
<template is="dom-repeat" items="[[intervals_]]" as="interval">
<div class$="[[getIntervalClassnames_(interval)]]" style$="[[getIntervalStyle_(interval, vertical)]]">
<div class="interval-bg">
<div class="label">
[[getIntervalLabel_(interval, breakpoints)]]
</div>
</div>
</div>
</template>
</div>
</template>
</dom-module>
<dom-module id="tf-creative-preview-single" assetpath="/preview/">
<template>
<style>
:host {
--tf-creative-preview-ruler-padding: 8px;
/* Ruler size plus surrounding padding. */
--tf-creative-preview-ruler-total-size: 32px;
/* Margin around the viewport to offset the stage from the rulers. This is 2px less than the
* total size because the additional 2px are added on the stage to avoid cropping the
* viewport shadow. */
--tf-creative-preview-ruler-viewport-margin: 30px;
display: block;
position: relative;
}
tf-creative-preview-ruler {
--tf-creative-preview-ruler-size: 16px;
/* This value should be kept approximately in sync with LAST_INTERVAL_MIN_WIDTH. */
--tf-creative-preview-ruler-last-interval-size: 100px;
}
/* A container used to allow or hide scroll overflow in the rulers and stage. */
:host([responsive]) .scroll-overflow {
width: 100%;
height: 100%;
}
/* The container for a TfCreativePreviewRuler element, used to position the ruler. */
.ruler {
/* Label font size. */
font-size: 0.9em;
box-sizing: border-box;
position: absolute;
z-index: 1;
}
.ruler.horizontal {
top: var(--tf-creative-preview-ruler-padding);
width: 100%;
padding-left: var(--tf-creative-preview-ruler-total-size);
}
.ruler.vertical {
left: var(--tf-creative-preview-ruler-padding);
height: 100%;
padding-top: var(--tf-creative-preview-ruler-total-size);
}
/* Don't show scrollbars in the rulers; their scroll will be automatically updated as the
* stage is scrolled. */
.ruler .scroll-overflow {
overflow: hidden;
}
#stage {
padding: var(--tf-creative-preview-stage-padding);
z-index: 0;
overflow: auto;
@apply --layout;
}
:host([responsive]) #stage {
padding: var(--tf-creative-preview-ruler-viewport-margin)
0 0 var(--tf-creative-preview-ruler-viewport-margin);
height: 100%;
width: 100%;
display: block;
position: absolute;
box-sizing: border-box;
}
:host([responsive]) #stage .scroll-overflow {
overflow: auto;
/* Add a small padding so the scrollable container boundaries do not crop the viewport
* shadow entirely when scroll is at (0,0). */
padding: 2px 0 0 2px;
box-sizing: border-box;
}
iframe {
border: none;
background: #fff;
}
</style>
<template is="dom-if" if="[[responsive]]">
<div class="ruler horizontal">
<div class="scroll-overflow">
<tf-creative-preview-ruler breakpoints="[[getBreakpoints_(breakpoints, orientation_, 'width')]]" on-ruler-click="onHorizontalRulerClick_" style$="[[getRulerStyle_(scrollSize_, 'width')]]">
</tf-creative-preview-ruler>
</div>
</div>
<div class="ruler vertical">
<div class="scroll-overflow">
<tf-creative-preview-ruler vertical="" breakpoints="[[getBreakpoints_(breakpoints, orientation_, 'height')]]" on-ruler-click="onVerticalRulerClick_" style$="[[getRulerStyle_(scrollSize_, 'height')]]">
</tf-creative-preview-ruler>
</div>
</div>
</template>
<div id="stage">
<div class="scroll-overflow" on-scroll="onStageScroll_">
<div id="stage-scroll-content" style$="[[getStageScrollContentStyle_(responsive, scrollSize_)]]">
<tf-creative-preview-resizable-container id="resizable-container" size="{{parsedSize_}}" resizable="[[responsive]]" min="[[minSize_]]" max="[[maxSize_]]">
<iframe id="iframe" slot="content" scrolling="no" allowfullscreen="" src$="[[getIframeSrc(previewPath, feed, active)]]" width$="[[parsedSize_.width]]" height$="[[parsedSize_.height]]">
</iframe>
</tf-creative-preview-resizable-container>
</div>
</div>
</div>
</template>
</dom-module>
<dom-module id="tf-creative-preview" assetpath="/preview/">
<template>
<style>
:host {
--tf-creative-preview-accent-color: var(--google-blue-500);
--tf-creative-preview-border-color: var(--light-theme-divider-color);
--tf-creative-preview-icon-color: var(--paper-grey-600);
--tf-creative-preview-item-highlight-color: #f0f0f0;
--tf-creative-preview-control-width: 160px;
--tf-creative-preview-item-height: 32px;
--tf-creative-preview-padding: 8px;
/* Common padding used in the mode views to align the view's iframe(s) with the control
* bar contents and logo in the header. */
--tf-creative-preview-stage-padding: 24px;
font-family: Roboto, Helvetica, sans-serif;
font-size: 13px;
overflow-y: auto;
overflow-x: hidden;
@apply --layout-vertical;
/* Required for paper-dropdown-menus to correctly display on top of iframe contents in IE
* (b/115536159, b/115566574, b/113070296). The z-index can be any value >= 0. */
position: relative;
z-index: 0;
}
/* Container for the GWD logo and the control bar. */
#header {
z-index: 1;
/* The header has a soft shadow which is approximately --shadow-elevation-2dp at 75%
* opacity. */
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.105),
0 1px 5px 0 rgba(0, 0, 0, 0.09),
0 3px 1px -2px rgba(0, 0, 0, 0.15);
}
/* Container for the GWD logo. */
#masthead {
padding: 12px 24px;
}
/* The GWD logo element. */
#logo {
width: 270px;
/* Both a width and a height must be set for the SVG to scale correctly in IE. */
height: 35px;
display: block;
}
/* When there are no enabled controls, the control bar will be empty, indicated by the absence
* of the `has-controls` attribute. Only add the top border when the control bar is not
* empty. */
#controls[has-controls] {
border-top: 1px solid var(--tf-creative-preview-border-color);
}
/* Container for the preview views below the control bar. */
#stage {
background: var(--paper-grey-100);
position: relative;
overflow-y: auto;
z-index: 0;
@apply --layout-flex-auto;
}
/* Hide all mode views initially. */
.view {
display: none;
}
/* Show only the currently-active mode view. */
.view[active] {
display: block;
}
/* Because of its rulers, the single view must be forced to fill the full height and width
* of the stage area. */
tf-creative-preview-single {
position: absolute;
min-width: 100%;
min-height: 100%;
}
/* The Desktop mode view must fill the full height and width of the stage area so its iframe
* does the same (b/113590886). */
tf-creative-preview-desktop {
position: absolute;
height: 100%;
width: 100%;
}
</style>
<div id="header">
<div id="masthead">
<tf-creative-preview-gwd-logo id="logo"></tf-creative-preview-gwd-logo>
</div>
<tf-creative-preview-controls id="controls" modes="[[modes]]" sizes="[[sizes]]" feeds="[[feeds]]" mode="{{mode}}" mode-settings="{{modeSettings}}" on-reload-view="onReloadView_" on-track="onControlsTrack_" on-overlay-will-open="onDropdownWillOpen_" on-iron-overlay-closed="onDropdownClosed_">
</tf-creative-preview-controls>
</div>
<div id="stage">
<template is="dom-if" if="[[modeEnabled_('single', modes)]]">
<tf-creative-preview-single id="single-view" class="view" active="[[modeIs_('single', mode)]]" preview-path="[[previewPath]]" size="{{modeSettings.single.size}}" feed="[[modeSettings.single.feed]]" breakpoints="[[breakpoints]]" responsive="[[modeSettings.single.isCustomSize]]" reload-on-resize="[[reloadOnResize]]">
</tf-creative-preview-single>
</template>
<template is="dom-if" if="[[modeEnabled_('allsizes', modes)]]">
<tf-creative-preview-multiple-sizes id="allsizes-view" class="view" active="[[modeIs_('allsizes', mode)]]" preview-path="[[previewPath]]" sizes="[[modeSettings.allsizes.sizes]]" feed="[[modeSettings.allsizes.feed]]">
</tf-creative-preview-multiple-sizes>
</template>
<template is="dom-if" if="[[modeEnabled_('allfeeds', modes)]]">
<tf-creative-preview-multiple-feeds id="allfeeds-view" class="view" active="[[modeIs_('allfeeds', mode)]]" preview-path="[[previewPath]]" size="[[modeSettings.allfeeds.size]]" feeds="[[matchOrder_(
feeds, modeSettings.allfeeds.feeds, modeSettings.allfeeds.feeds.*)]]">
</tf-creative-preview-multiple-feeds>
</template>
<template is="dom-if" if="[[modeEnabled_('mobile', modes)]]">
<tf-creative-preview-mobile id="mobile-view" class="view" active="[[modeIs_('mobile', mode)]]" preview-path="[[previewPath]]" device-size="{{modeSettings.mobile.deviceSize}}" feed="[[modeSettings.mobile.feed]]" responsive="[[modeSettings.mobile.isCustomSize]]" reload-on-resize="[[reloadOnResize]]">
</tf-creative-preview-mobile>
</template>
<template is="dom-if" if="[[modeEnabled_('desktop', modes)]]">
<tf-creative-preview-desktop id="desktop-view" class="view" active="[[modeIs_('desktop', mode)]]" preview-path="[[previewPath]]" feed="[[modeSettings.desktop.feed]]">
</tf-creative-preview-desktop>
</template>
<template is="dom-if" if="[[modeEnabled_('parallax', modes)]]">
<tf-creative-preview-parallax id="parallax-view" class="view" active="[[modeIs_('parallax', mode)]]" preview-path="[[previewPath]]" device-size="{{modeSettings.parallax.deviceSize}}" size="[[modeSettings.parallax.size]]" feed="[[modeSettings.parallax.feed]]" responsive="[[modeSettings.parallax.isCustomSize]]">
</tf-creative-preview-parallax>
</template>
</div>
</template>
</dom-module>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Roboto:regular"><style>
body {
margin: 0;
}
tf-creative-preview {
width: 100%;
height: 100%;
}
</style></div>
<tf-creative-preview id="preview-app"></tf-creative-preview>
<script src="preview_polymer.js"></script></body></html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。