2a:T644,viewof inputs = { const form = html` `; form.oninput = () => form.value = { domain: form.domain.value, cloudname: form.cloudname.value, type: form.type.value, source: form.source.value, transformations: [ ...form.transformations.querySelectorAll( 'input' ) ] .map( input => input.value ) .filter( item => item !== '' ), resource: form.resource.value }; form.querySelector( '#addTransformation' ).addEventListener( 'click', (e) => { e.preventDefault(); const btn = e.target, fieldset = btn.parentNode; fieldset.insertBefore( html``, btn ); } ) form.oninput(); return form }2b:T635,httpStatusText = ({ 100: "Continue", 101: "Switching Protocol", 102: "Processing (WebDAV)", 103: "Early Hints", 200: "OK", 201: "Created", 202: "Accepted", 203: "Non", 204: "No Content", 205: "Reset Content", 206: "Partial Content", 207: "Multi", 208: "Already Reported (WebDAV)", 226: "IM Used (HTTP Delta encoding)", 300: "Multiple Choice", 301: "Moved Permanently", 302: "Found", 303: "See Other", 304: "Not Modified", 305: "Use Proxy ", 306: "unused", 307: "Temporary Redirect", 308: "Permanent Redirect", 400: "Bad Request", 401: "Unauthorized", 402: "Payment Required ", 403: "Forbidden", 404: "Not Found", 405: "Method Not Allowed", 406: "Not Acceptable", 407: "Proxy Authentication Required", 408: "Request Timeout", 409: "Conflict", 410: "Gone", 411: "Length Required", 412: "Precondition Failed", 413: "Payload Too Large", 414: "URI Too Long", 415: "Unsupported Media Type", 416: "Range Not Satisfiable", 417: "Expectation Failed", 418: "I'm a teapot", 421: "Misdirected Request", 422: "Unprocessable Entity (WebDAV)", 423: "Locked (WebDAV)", 424: "Failed Dependency (WebDAV)", 425: "Too Early", 426: "Upgrade Required", 428: "Precondition Required", 429: "Too Many Requests", 431: "Request Header Fields Too Large", 451: "Unavailable For Legal Reasons", 500: "Internal Server Error", 501: "Not Implemented", 502: "Bad Gateway", 503: "Service Unavailable", 504: "Gateway Timeout", 505: "HTTP Version Not Supported", 506: "Variant Also Negotiates", 507: "Insufficient Storage (WebDAV)", 508: "Loop Detected (WebDAV)", 510: "Not Extended", 511: "Network Authentication Required" })2c:[] 29:{"title":"Cloudinary URL builder","cells":[{"id":0,"value":"md`\n

☁️🛠

\n# Cloudinary URL builder`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"output = html`\\\nhttps://\\\n${ inputs.domain }/\\\n${ ( inputs.cloudname !== ''\n ?\n `${ inputs.cloudname }/`\n :\n ''\n )\n}\\\n${ ( inputs.type === 'image' && inputs.source === 'upload'\n ? \n ''\n : \n `${ inputs.type }/\\${ inputs.source }/`\n )\n}\\\n${ ( inputs.transformations.length > 0\n ?\n `${ inputs.transformations.filter( el => el !== '' ).join( '/' ) }/`\n :\n ''\n)}\\\n${ inputs.resource }\\\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"headerMetadata = { // stuff we can get quick, without waiting for the body to load\n const response = await fetch( output.textContent, { method: 'HEAD' } ),\n statusCode = response.status,\n statusText = httpStatusText[ response.status ],\n ok = ( Math.floor( statusCode / 100 ) === 2 ),\n cloudinaryError = response.headers.get('X-Cld-Error'),\n byteSize = response.headers.get('Content-Length'),\n encoding = response.headers.get('Content-Encoding'),\n format = response.headers.get('Content-Type')\n return html`\n

${ statusCode } ${ statusText } \n ${ (\n cloudinaryError ?\n `

${ cloudinaryError }

` :\n `

${ prettyBytes( byteSize ) } ${ prettyFormat( format ) }${ encoding ? ` ${ encoding }` : '' }

`\n ) }\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"bodyMetadata = { // slower\n await painted;\n const w = painted.naturalWidth || painted.videoWidth,\n h = painted.naturalHeight || painted.videoHeight;\n return html`\n

${ w.toLocaleString() } × ${ h.toLocaleString() }

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"images = [\n { name: 's7',\n 'url': 'https://bge.scene7.com/is/image/TheBradfordExchangeOnline/replatformOverlays?layer=comp&wid=280&hei=280&fmt=jpeg,rgb&qlt=90,1&op_sharpen=1&resMode=bicub&op_usm=0.5,2.0,0,0&iccEmbed=0&$product_id=0129983001'\n }, {\n name: 'cloudinary',\n 'url': output.textContent\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"viewof toggle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"images[toggle]['name']","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"painted = {\n const url = images[toggle]['url'];\n if (inputs.type === 'video') {\n return new Promise( ( resolve, reject ) => {\n const v = html`

`;\n v.crossOrigin = \"anonymous\";\n v.addEventListener( 'loadedmetadata', () => resolve( v ) );\n v.src = url;\n } );\n } else {\n return new Promise( ( resolve, reject ) => {\n const i = new Image();\n i.crossOrigin = \"anonymous\";\n i.addEventListener( 'load', () => resolve( i ) );\n i.src = url;\n } );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`\n---\n## TODO\n\n- ability to delete transformation groups (make the minus button work)\n- draggable transformation groups order\n- make it prettier\n - subgrid!\n- copy result button\n- paste clipboard into form button\n- url param that autofills form\n- more info about resulting image\n - resource + server timing?\n - ssimulacra? (vs what?)\n\n## Don't do (out of scope)\n\n- social images\n- authenticated images\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"prettyBytes = function( bytes ) {\n if ( bytes < 1000 ) {\n return `${ bytes } B`;\n } else if ( bytes < 1000000 ) {\n return `${ Math.round( bytes / 100 ) / 10 } kB`\n } else {\n return `${ Math.round( bytes / 100000 ) / 10 } MB`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"prettyFormat = function( mimeType ) {\n const split = mimeType.split('/');\n if ( split[1] ) { \n const upper = split[1].toUpperCase(),\n [ format, codecs ] = upper.split( ';' );\n if ( format === \"SVG+XML\" ) { return \"SVG\"; }\n if ( format === \"WEBP\" ) { return \"WebP\"; }\n if ( format === \"JP2\" ) { return \"JPEG 2000\"; }\n if ( codecs ) { return `${ format } (${ codecs.split('=')[1] })` }\n else { return format; }\n }\n else { return mimeType; }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"import {listOfItems} from '@eeeps/variable-length-sortable-list-input'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2c","stdlib":"1","titling":"auto"}