00b-bindery-controls.html

<script>
    console.log('controls');
  var BinderyControls=function(){'use strict';const a=a=>`${'\uD83D\uDCD6-'}${a}`,b=b=>`.${a(b)}`,d=c=>'.'===c[0]?b(c.substr(1)):a(c);(function(a){if(a&&'undefined'!=typeof window){var b=document.createElement('style');return b.setAttribute('type','text/css'),b.innerHTML=a,document.head.appendChild(b),a}})('@media screen{.\uD83D\uDCD6-viewing .\uD83D\uDCD6-controls{display:flex!important}}.\uD83D\uDCD6-controls{font:16px/1.4 -apple-system,BlinkMacSystemFont,Roboto,sans-serif;display:none;flex-direction:row;align-items:start;position:fixed;top:0;left:0;right:0;z-index:1;margin:auto;color:var(--bindery-ui-text);padding:10px;overflow:hidden;transition:height .3s;-webkit-font-smoothing:antialiased}.\uD83D\uDCD6-controls *{font:inherit;color:inherit;margin:0;padding:0;box-sizing:border-box}.\uD83D\uDCD6-controls a{color:var(--bindery-ui-accent);text-decoration:none}.\uD83D\uDCD6-row{position:relative;display:flex;flex-wrap:wrap;align-items:start;cursor:default;user-select:none}.\uD83D\uDCD6-print-options{display:flex;opacity:0;max-width:0;overflow:hidden;transition:all .3s;flex-wrap:nowrap;transition-delay:.1s}.\uD83D\uDCD6-view-print .\uD83D\uDCD6-print-options{max-width:720px;margin-right:12px;opacity:1}.\uD83D\uDCD6-in-progress .\uD83D\uDCD6-print-options{opacity:0;display:none}.\uD83D\uDCD6-controls .\uD83D\uDCD6-print-options .\uD83D\uDCD6-control{background-color:transparent}.\uD83D\uDCD6-controls .\uD83D\uDCD6-btn{-webkit-appearance:none;cursor:pointer;display:inline-block;margin-right:8px;text-decoration:none}.\uD83D\uDCD6-controls .\uD83D\uDCD6-btn:hover{background:rgba(0,0,0,.04)}.\uD83D\uDCD6-controls .\uD83D\uDCD6-btn:active{background:rgba(0,0,0,.08)}.\uD83D\uDCD6-controls .\uD83D\uDCD6-btn:last-child{margin-right:0}.\uD83D\uDCD6-control{border-radius:32px;color:var(--bindery-ui-text);padding:8px 20px}.\uD83D\uDCD6-controls .\uD83D\uDCD6-btn-light{background:none;border:none}.\uD83D\uDCD6-controls .\uD83D\uDCD6-btn-main{background:var(--bindery-ui-accent);border-color:var(--bindery-ui-accent);color:#fff}.\uD83D\uDCD6-controls .\uD83D\uDCD6-btn-main:hover{background:var(--bindery-ui-accent);opacity:.7}.\uD83D\uDCD6-controls .\uD83D\uDCD6-btn-main:active{background:#000;opacity:1}.\uD83D\uDCD6-view-row{margin-left:auto;margin-right:12px;transition:all .3s}.\uD83D\uDCD6-in-progress .\uD83D\uDCD6-view-row{opacity:0;pointer-events:none}.\uD83D\uDCD6-debug .\uD83D\uDCD6-view-row{display:none}.\uD83D\uDCD6-btn-print{transition:all .3s}.\uD83D\uDCD6-in-progress .\uD83D\uDCD6-btn-print{opacity:0;pointer-events:none}.\uD83D\uDCD6-controls .\uD83D\uDCD6-select-wrap{padding-right:36px;transition:all .2s;white-space:nowrap;width:100%}.\uD83D\uDCD6-controls .\uD83D\uDCD6-select-wrap:after{content:"";position:absolute;right:18px;top:14px;border-bottom:1px solid currentColor;border-right:1px solid currentColor;padding:3px;transform:rotate(45deg)}.\uD83D\uDCD6-controls .\uD83D\uDCD6-select-wrap:active,.\uD83D\uDCD6-controls .\uD83D\uDCD6-select-wrap:hover{background-color:rgba(0,0,0,.04)}.\uD83D\uDCD6-controls .\uD83D\uDCD6-select-wrap.\uD83D\uDCD6-hidden-select{max-width:0;padding-left:0;padding-right:0;border-left-width:0;border-right-width:0;color:transparent}.\uD83D\uDCD6-select{position:absolute;top:0;left:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;padding:8px 20px;color:#000;border:transparent;width:100%}@media screen and (max-width:720px){.\uD83D\uDCD6-print-options{max-width:unset;max-height:0}.\uD83D\uDCD6-view-print .\uD83D\uDCD6-print-options{max-width:unset;max-height:240px;margin:0}.\uD83D\uDCD6-root{transition:all .2s}.\uD83D\uDCD6-view-print.\uD83D\uDCD6-root{padding-top:120px}.\uD83D\uDCD6-controls{height:60px}.\uD83D\uDCD6-view-row{margin-left:auto}.\uD83D\uDCD6-view-print .\uD83D\uDCD6-controls{height:104px}.\uD83D\uDCD6-print-options{top:54px;right:10px;position:fixed;margin:0}.\uD83D\uDCD6-print-options .\uD83D\uDCD6-row{margin:0}}.\uD83D\uDCD6-view-print .\uD83D\uDCD6-controls{background:var(--bindery-ui-bg);box-shadow:0 .5px 1px rgba(0,0,0,.14)}.\uD83D\uDCD6-view-flip .\uD83D\uDCD6-controls{background:transparent;box-shadow:none}@media screen and (max-width:960px){.\uD83D\uDCD6-in-progress .\uD83D\uDCD6-controls{background:transparent;box-shadow:none}.\uD83D\uDCD6-in-progress .\uD83D\uDCD6-root{padding-top:40px}.\uD83D\uDCD6-controls{background:var(--bindery-ui-bg);box-shadow:0 .5px 1px rgba(0,0,0,.14)}.\uD83D\uDCD6-root{padding-top:72px}}@media screen and (max-width:500px){.\uD83D\uDCD6-view-print.\uD83D\uDCD6-root{padding-top:190px}.\uD83D\uDCD6-view-print .\uD83D\uDCD6-controls{background:var(--bindery-ui-bg);height:180px}.\uD83D\uDCD6-print-options{flex-direction:column;align-items:stretch;left:10px}.\uD83D\uDCD6-hidden-select{display:none}}');const c=a=>'function'==typeof a,e=(a,b,d,e,f)=>{const g=document.createElement(a);if(b&&(g.className=b),f&&(g.textContent=f),d)for(const a in d){const b=d[a];c(b)?g[a]=b:g.setAttribute(a,b)}return e&&e.forEach(a=>g.appendChild(a)),g},f=(a,b,c)=>e('div',a,{},b,c),g=(a,b,c)=>e('button',a,b,[],c),h=(a,b,c)=>e('select',a,b,c),i=(a,b)=>e('option',null,a,[],b),j=a=>f(d('row'),a),k=(a,b)=>g(`${d('control')} ${d('btn')} ${d('btn-main')}`,a,b),l=(a,b)=>{const c=f(d('select-val'),[],'Value'),e=h(d('select'),a,b),g=()=>{c.textContent=e.options[e.selectedIndex].text};return e.addEventListener('change',g),g(),f(`${d('select-wrap')} ${d('control')}`,[c,e])},m=!!window.chrome;return class{constructor(a,b,c){const{Mode:e,Paper:g,Layout:h,Marks:n}=a;let o,p;const q=()=>{c.setMode(e.PRINT);const a=o.querySelector('select');a.value=e.PRINT,a.dispatchEvent(new Event('change')),setTimeout(window.print,10)},r=k({onclick:q},'Print'),s=(m?[i({value:g.AUTO},'Auto'),i({value:g.AUTO_BLEED},'Auto + Bleed'),i({value:g.AUTO_MARKS},'Auto + Marks'),i({value:g.LETTER_PORTRAIT},'Letter Portrait'),i({value:g.LETTER_LANDSCAPE},'Letter Landscape'),i({value:g.A4_PORTRAIT},'A4 Portrait'),i({value:g.A4_LANDSCAPE},'A4 Landscape')]:[i({value:g.LETTER_PORTRAIT,selected:!0},'Default Page Size *'),i({disabled:!0},'Only Chrome supports custom page sizes. Set in your browser\'s print dialog instead.')]).map(a=>(parseInt(a.value,10)===b.paper&&(a.selected=!0),a)),t=()=>{if(m){const a=c.getPageSize(),b=`${a.width} × ${a.height}`;s[0].textContent=`${b}`,s[1].textContent=`${b} + Bleed`,s[2].textContent=`${b} + Marks`}};t();const u=a=>{const b=parseInt(a.target.value,10);c.setPaper(b),b===g.AUTO||b===g.AUTO_BLEED?p.classList.add(d('hidden-select')):p.classList.remove(d('hidden-select'))},v=l({onchange:u},s),w=l({onchange:a=>{c.setLayout(a.target.value),t()}},[i({value:h.PAGES},'1 Page / Sheet'),i({value:h.SPREADS},'1 Spread / Sheet'),i({value:h.BOOKLET},'Booklet Sheets')].map(a=>(parseInt(a.value,10)===b.layout&&(a.selected=!0),a))),x=j([w]);p=l({onchange:a=>c.setMarks(a.target.value)},[i({value:n.NONE},'No Marks'),i({value:n.CROP,selected:!0},'Crop Marks'),i({value:n.BLEED},'Bleed Marks'),i({value:n.BOTH},'Crop and Bleed')].map(a=>(a.value===b.marks&&(a.selected=!0),a))),m&&p.classList.add(d('hidden-select'));const y=j([p]),z=j([v]);this.setDone=()=>{},this.setInProgress=()=>{},this.updateProgress=()=>{},r.classList.add(d('btn-print'));const A=j([x,z,y]);A.classList.add(d('print-options')),o=l({onchange:a=>c.setMode(a.target.value)},[i({value:e.PREVIEW},'Preview'),i({value:e.FLIPBOOK},'Flipbook'),i({value:e.PRINT},'Print Preview')].map(a=>(a.value===b.mode&&(a.selected=!0),a)));const B=j([o]);B.classList.add(d('view-row')),this.element=f(d('controls'),[B,A,r])}}}();

</script>