function ytknsRequestJson(url, callback, method, data, headers, handleErr, upload) { if(!callback) callback = function(){}; var xhr = new XMLHttpRequest; if(xhr.upload && upload) { xhr.upload.onloadstart = function(ev) { upload('loadstart', ev); }; xhr.upload.onprogress = function(ev) { upload('progress', ev) }; xhr.upload.onload = function(ev) { upload('load', ev); }; } xhr.onreadystatechange = function() { if(xhr.readyState !== 4) return; var json = JSON.parse(xhr.responseText); if(json.err && !handleErr) { alert(json.err); callback([]); } else callback(json); }; xhr.open(method || 'GET', url); if(headers && headers.length > 0) for(var i = 0; i < headers.length; i++) xhr.setRequestHeader(headers[i].name, headers[i].value); xhr.send(data || null); } function ytknsEditorLoadEffects(callback) { ytknsRequestJson('/zones/_effects', callback); } function ytknsLoadZoneInfo(zoneId, callback) { ytknsRequestJson('/zones/' + parseInt(zoneId).toString() + '.json', callback); } function ytknsLoadUploadInfo(uploadId, callback) { ytknsRequestJson('/uploads/' + uploadId.toString() + '.json', callback); } function ytknsCreateUrlString(set) { var parts = []; for(var i = 0; i < set.length; i++) parts.push(encodeURIComponent(set[i].name) + '=' + encodeURIComponent(set[i].value)); return parts.join('&'); } function ytknsCreateUrlStringPart(name, value) { return { 'name': name.toString(), 'value': ( (typeof value).toLowerCase() === 'object' ? JSON.stringify(value) : value.toString() ) }; } function ytknsZoneInfoToUrlString(zoneInfo) { return ytknsCreateUrlString(ytknsZoneInfoSerialise(zoneInfo, ytknsCreateUrlStringPart)); } function ytknsZoneInfoSerialise(zoneInfo, callback) { var set = []; if(zoneInfo) { set.push(callback('zone_token', ytknsEditorToken || '')); set.push(callback('zone_id', zoneInfo.id)); set.push(callback('zone_name', zoneInfo.name)); set.push(callback('zone_title', zoneInfo.title)); if(zoneInfo.effects && zoneInfo.effects.length > 0) { for(var i = 0; i < zoneInfo.effects.length; i++) { var format = 'zone_effect[%1][%2]'.replace('%1', zoneInfo.effects[i].type), keys = Object.keys(zoneInfo.effects[i].values); if(keys.length < 1) { set.push(callback(format.replace('%2', '_'), '_')); } else for(var j = 0; j < keys.length; j++) { var key = format.replace('%2', keys[j]); set.push(callback(key, zoneInfo.effects[i].values[keys[j]] || '')); } } } } return set; } function ytknsSaveZoneInfo(zoneInfo, callback) { if(!zoneInfo || !zoneInfo.id) return; ytknsRequestJson( '/zones/' + parseInt(zoneInfo.id).toString() + '.json', callback, 'POST', ytknsZoneInfoToUrlString(zoneInfo), [{ name: 'Content-Type', value: 'application/x-www-form-urlencoded' }] ); } function ytknsEditorPreview(zoneInfo) { var formElement = document.createElement('form'); formElement.action = '/zones/_preview'; formElement.method = 'post'; formElement.target = ytknsEditorSBS ? 'preview' : '_blank'; formElement.style.display = 'none'; var elements = ytknsZoneInfoSerialise(zoneInfo, function(name, value) { var inputElement = document.createElement('input'); inputElement.name = name; inputElement.type = 'hidden'; inputElement.value = ( (typeof value).toLowerCase() === 'object' ? JSON.stringify(value) : value.toString() ); formElement.appendChild(inputElement); }); document.body.appendChild(formElement); formElement.submit(); formElement.parentNode.removeChild(formElement); } function ytknsEditorCreateUpload(file, callback, status) { var formData = new FormData; formData.append('upload_token', ytknsEditorUploadToken || ''); formData.append('upload_file', file); ytknsRequestJson( '/uploads', callback, 'POST', formData, null, true, status ); } var ytknsZoneInfo = null, ytknsEditorToken = '', ytknsEditorUploadToken = '', ytknsEditorElemSidebar = null, ytknsEditorElemSidebarButtons = null, ytknsEditorElemSidebarEffects = null, ytknsEditorElemMain = null, ytknsEditorElemMainTitle = null, ytknsEditorElemMainContainer = null, ytknsEditorEffects = [], ytknsEditorIgnoreHashChange = false, ytknsEditorCleanExit = true, ytknsEditorSBS = false; function ytknsEditorChangeHash(hash) { ytknsEditorIgnoreHashChange = true; location.hash = hash; } function ytknsEditorBeforeUnload(ev) { if(!ytknsEditorCleanExit) { ev.preventDefault(); ev.returnValue = ''; } } function ytknsGetEffectInfoByType(type) { for(var i = 0; i < ytknsEditorEffects.length; i++) if(ytknsEditorEffects[i].type === type) return ytknsEditorEffects[i]; return null; } function ytknsGetEffectValueByType(type) { if(ytknsZoneInfo === null || ytknsZoneInfo.effects === null || ytknsZoneInfo.effects.length < 1) return null; for(var i = 0; i < ytknsZoneInfo.effects.length; i++) if(ytknsZoneInfo.effects[i].type === type) return ytknsZoneInfo.effects[i]; return null; } function ytknsRemoveEffectValueByType(type) { var info = ytknsGetEffectValueByType(type); if(!info) { alert('Tried to remove an effect that doesn\'t exist.'); return; } var index = ytknsZoneInfo.effects.indexOf(info); if(index >= 0) ytknsZoneInfo.effects.splice(index, 1); ytknsEditorUpdateSidebarEffects(); } function ytknsEditorFilePickerDoUpload(files, callback, status) { if(files.length < 1) { alert('No file selected.'); return; } var file = files[0]; ytknsEditorCreateUpload(file, function(resp) { if(resp.file) { ytknsLoadUploadInfo(resp.file, function(uploadInfo) { callback(uploadInfo); }); } else if(resp.err) { alert(resp.err); if(status) status(-1, -1); } }, function(type, ev) { if(status) status(ev.loaded, ev.total); }); } function ytknsEditorShowFilePicker(mimes, title, callback) { var container = document.createElement('div'); container.classList.add('ye-applet-uploads'); var progressBarContainer = document.createElement('div'); progressBarContainer.classList.add('ye-applet-uploads-progress'); progressBarContainer.classList.add('ye-applet-uploads-hidden'); container.appendChild(progressBarContainer); var progressBar = document.createElement('progress'); progressBar.min = 0; progressBar.max = 100; progressBar.value = 0; progressBar.classList.add('ye-applet-uploads-progress-bar'); progressBarContainer.appendChild(progressBar); var dropZone = document.createElement('div'), dropZoneInner = document.createElement('div'); dropZone.classList.add('ye-applet-uploads-dropzone'); dropZoneInner.classList.add('ye-applet-uploads-dropzone-inner'); dropZoneInner.textContent = 'Drop a file or click here!'; dropZone.appendChild(dropZoneInner); container.appendChild(dropZone); var cancel = document.createElement('input'); cancel.classList.add('ye-applet-uploads-cancel'); cancel.type = 'button'; cancel.value = 'Cancel'; cancel.onclick = function() { callback(null); }; container.appendChild(cancel); var doUpload = function(files) { dropZone.classList.add('ye-applet-uploads-hidden'); cancel.classList.add('ye-applet-uploads-hidden'); progressBarContainer.classList.remove('ye-applet-uploads-hidden'); ytknsEditorFilePickerDoUpload(files, function(resp) { dropZone.classList.remove('ye-applet-uploads-hidden'); cancel.classList.remove('ye-applet-uploads-hidden'); progressBarContainer.classList.add('ye-applet-uploads-hidden'); callback(resp); }, function(loaded, total) { if(loaded < 0 && total < 0) { dropZone.classList.remove('ye-applet-uploads-hidden'); cancel.classList.remove('ye-applet-uploads-hidden'); progressBarContainer.classList.add('ye-applet-uploads-hidden'); return; } progressBar.value = Math.ceil((loaded / total) * 100); }); }; dropZone.onclick = function() { var selector = document.createElement('input'); selector.type = 'file'; selector.onchange = function() { doUpload(selector.files); }; if(mimes) selector.accept = mimes.join(','); selector.click(); }; dropZone.ondragenter = function(ev) { ev.preventDefault(); ev.stopPropagation(); dropZone.classList.add('ye-applet-uploads-dropzone--active'); }; dropZone.ondragleave = function(ev) { ev.preventDefault(); ev.stopPropagation(); dropZone.classList.remove('ye-applet-uploads-dropzone--active'); }; dropZone.ondragover = function(ev) { ev.preventDefault(); ev.stopPropagation(); dropZone.classList.add('ye-applet-uploads-dropzone--active'); }; dropZone.ondrop = function(ev) { ev.preventDefault(); ev.stopPropagation(); dropZone.classList.remove('ye-applet-uploads-dropzone--active'); doUpload(ev.dataTransfer.files); }; ytknsEditorMainSetContainer(container, title || 'Upload File'); } function ytknsLoadEffectEditor(effectInfo, effectValue) { ytknsEditorChangeHash(effectInfo.type); var editor = document.createElement('div'); editor.classList.add('ye-applet-editor'); if(effectInfo.props.length < 1) { var empty = document.createElement('div'); editor.classList.add('ye-applet-editor--fill'); empty.classList.add('ye-applet-editor-empty'); empty.textContent = 'This effect has no properties.'; editor.appendChild(empty); } else { var properties = document.createElement('div'); properties.classList.add('ye-applet-editor-properties'); editor.appendChild(properties); for(var i = 0; i < effectInfo.props.length; i++) { ytknsAddEffectEditorProperty( properties, effectInfo, effectValue, effectInfo.props[i], function() { ytknsLoadEffectEditor(effectInfo, effectValue); } // there's gotta be a better way ); } } ytknsEditorMainSetContainer(editor, effectInfo.name); } function ytknsAddEffectEditorProperty(listContainer, effectInfo, effectValue, propInfo, redraw) { var container = document.createElement('div'); container.classList.add('ye-applet-editor-properties-property'); listContainer.appendChild(container); var propTitle = document.createElement('div'); propTitle.classList.add('ye-applet-editor-properties-property-title'); propTitle.textContent = propInfo.title; container.appendChild(propTitle); var propWrap = document.createElement('div'); propWrap.classList.add('ye-applet-editor-properties-property-wrap'); container.appendChild(propWrap); switch(propInfo.type.name) { case 'upload': var propUpload = document.createElement('div'); propUpload.classList.add('ye-applet-editor-properties-property-upload'); propWrap.appendChild(propUpload); var propUploadId = document.createElement('div'); propUploadId.classList.add('ye-applet-editor-properties-property-upload-id'); propUploadId.textContent = effectValue.values[propInfo.name] || '(none)'; propUpload.appendChild(propUploadId); var propUploadSelect = document.createElement('div'); propUploadSelect.classList.add('ye-applet-editor-properties-property-upload-select'); propUploadSelect.title = 'Upload file'; propUploadSelect.onclick = function() { ytknsEditorShowFilePicker(propInfo.type.allowed || [], ('Selecting ' + propInfo.title + ' for ' + effectInfo.name), function(uploadInfo) { if(uploadInfo) effectValue.values[propInfo.name] = uploadInfo.id || null; redraw(); }); }; propUpload.appendChild(propUploadSelect); break; case 'bool': var propBool = document.createElement('label'); propBool.classList.add('ye-applet-editor-properties-property-bool'); propWrap.appendChild(propBool); var propBoolToggle = document.createElement('input'); propBoolToggle.classList.add('ye-applet-editor-properties-property-bool-toggle'); propBoolToggle.type = 'checkbox'; propBoolToggle.checked = (typeof effectValue.values[propInfo.name]).toLowerCase() === 'undefined' ? (propInfo.default || false) : effectValue.values[propInfo.name]; propBoolToggle.onchange = function() { effectValue.values[propInfo.name] = propBoolToggle.checked; redraw(); }; propBool.appendChild(propBoolToggle); break; case 'int': case 'float': var propInt = document.createElement('label'); propInt.classList.add('ye-applet-editor-properties-property-int'); propWrap.appendChild(propInt); var propIntInput = document.createElement('input'); propIntInput.classList.add('ye-applet-editor-properties-property-int-input'); propIntInput.type = 'number'; if(propInfo.min) propIntInput.min = propInfo.min; if(propInfo.max) propIntInput.max = propInfo.max; if(propInfo.type.name === 'float') propIntInput.step = 0.01; propIntInput.value = effectValue.values[propInfo.name] || propInfo.default || 0; propIntInput.onchange = function() { effectValue.values[propInfo.name] = propInfo.type.name === 'int' ? parseInt(propIntInput.value) : parseFloat(propIntInput.value); redraw(); }; propInt.appendChild(propIntInput); break; case 'select': var propSelect = document.createElement('label'); propSelect.classList.add('ye-applet-editor-properties-property-select'); propWrap.appendChild(propSelect); var propSelectInput = document.createElement('select'); propSelectInput.classList.add('ye-applet-editor-properties-property-select-input'); propSelectInput.onchange = function() { effectValue.values[propInfo.name] = propSelectInput.value; redraw(); }; propSelect.appendChild(propSelectInput); var propSelectOptionsKeys = Object.keys(propInfo.type.options), propSelectOptionsValues = Object.values(propInfo.type.options); for(var i = 0; i < propSelectOptionsKeys.length; i++) { var propSelectOption = document.createElement('option'); propSelectOption.value = propSelectOptionsKeys[i]; propSelectOption.textContent = propSelectOptionsValues[i]; propSelectOption.selected = (effectValue.values[propInfo.name] || propInfo.default) === propSelectOptionsKeys[i]; propSelectInput.appendChild(propSelectOption); } break; case 'colour': var propColour = document.createElement('label'); propColour.classList.add('ye-applet-editor-properties-property-colour'); propWrap.appendChild(propColour); var propColourInput = document.createElement('input'); propColourInput.type = 'color'; propColourInput.value = '#' + (effectValue.values[propInfo.name] || 0).toString(16).padStart(6, '0'); propColourInput.classList.add('ye-applet-editor-properties-property-colour-input'); propColourInput.onchange = function() { effectValue.values[propInfo.name] = parseInt(propColourInput.value.substring(1), 16); redraw(); }; propColour.appendChild(propColourInput); break; case 'string': var propString = document.createElement('label'); propString.classList.add('ye-applet-editor-properties-property-string'); propWrap.appendChild(propString); var propStringInput = document.createElement('input'); propStringInput.type = 'text'; if(propInfo.type.min) propStringInput.minLength = propInfo.type.min; if(propInfo.type.max) propStringInput.maxLength = propInfo.type.max; propStringInput.value = effectValue.values[propInfo.name] || ''; propStringInput.classList.add('ye-applet-editor-properties-property-string-input'); propStringInput.onchange = function() { effectValue.values[propInfo.name] = propStringInput.value; redraw(); }; propString.appendChild(propStringInput); break; case 'gradient': if(!effectValue.values[propInfo.name]) effectValue.values[propInfo.name] = {}; var propGrad = document.createElement('div'); propGrad.classList.add('ye-applet-editor-properties-property-gradient'); propWrap.appendChild(propGrad); var propGradPreview = document.createElement('div'); propGradPreview.classList.add('ye-applet-editor-properties-property-gradient-preview'); propGrad.appendChild(propGradPreview); var propGradDirection = document.createElement('div'); propGradDirection.classList.add('ye-applet-editor-properties-property-gradient-direction'); propGrad.appendChild(propGradDirection); var propGradDirectionCircle = document.createElement('div'); propGradDirectionCircle.classList.add('ye-applet-editor-properties-property-gradient-direction-circle'); propGradDirection.appendChild(propGradDirectionCircle); var propGradDirectionCircleValue = document.createElement('div'); propGradDirectionCircleValue.classList.add('ye-applet-editor-properties-property-gradient-direction-circle-value'); propGradDirectionCircle.appendChild(propGradDirectionCircleValue); var propGradDirectionCircleIndicator = document.createElement('div'); propGradDirectionCircleIndicator.classList.add('ye-applet-editor-properties-property-gradient-direction-circle-indicator'); propGradDirectionCircleValue.appendChild(propGradDirectionCircleIndicator); var propGradDirectionValue = document.createElement('input'); propGradDirectionValue.classList.add('ye-applet-editor-properties-property-gradient-direction-input'); propGradDirectionValue.type = 'number'; propGradDirectionValue.min = 0; propGradDirectionValue.max = 359; propGradDirectionValue.value = 0; propGradDirection.appendChild(propGradDirectionValue); var propGradRedrawPreview = function() { propGradPreview.style.backgroundImage = ytknsEditorGradientCSS(effectValue.values[propInfo.name]); }; var propGradDirectionSet = function(val) { val = parseInt(val); effectValue.values[propInfo.name].d = val; if(propGradDirectionValue.value != val) propGradDirectionValue.value = val; propGradDirectionCircleValue.style.transform = 'rotate(' + val + 'deg)'; propGradRedrawPreview(); }; propGradDirectionSet(effectValue.values[propInfo.name].d || 0); propGradDirectionValue.onchange = function() { propGradDirectionSet(propGradDirectionValue.value); }; var propGradDirectionCircleMouseEvent = function(ev) { if((ev.buttons & 1) < 1) return; var rect = ev.target.getBoundingClientRect(), y = ev.layerY - (rect.height / 2), x = ev.layerX - (rect.width / 2), deg = Math.atan2(x, y) * 180 / Math.PI, val = 180 - parseInt(deg); propGradDirectionSet(val); }; propGradDirectionCircle.onmousedown = propGradDirectionCircleMouseEvent; propGradDirectionCircle.onmousemove = propGradDirectionCircleMouseEvent; var propGradPoints = document.createElement('div'); propGradPoints.classList.add('ye-applet-editor-properties-property-gradient-points'); propGrad.appendChild(propGradPoints); var propGradPointAdd = function(point) { if(!point) point = {}; if((typeof point.c).toLowerCase() === 'undefined') point.c = parseInt(0xFFFFFF * Math.random()); if((typeof point.o).toLowerCase() === 'undefined') point.o = parseInt(100 * Math.random()); var propGradPoint = document.createElement('div'); propGradPoint.classList.add('ye-applet-editor-properties-property-gradient-points-point'); propGradPoints.appendChild(propGradPoint); var propGradPointActions = document.createElement('div'); propGradPointActions.classList.add('ye-applet-editor-properties-property-gradient-points-point-actions'); propGradPoint.appendChild(propGradPointActions); var propGradPointActionsAdd = function(name, title, action) { var propGradPointAction = document.createElement('div'); propGradPointAction.classList.add('ye-applet-editor-properties-property-gradient-points-point-actions-action'); propGradPointAction.classList.add('ye-applet-editor-properties-property-gradient-points-point-actions-action--' + name); propGradPointAction.title = title; propGradPointAction.onclick = function() { if(action) action(); }; propGradPointActions.appendChild(propGradPointAction); }; propGradPointActionsAdd('delete', 'Delete', function() { var index = effectValue.values[propInfo.name].p.indexOf(point); if(index < 0) return; effectValue.values[propInfo.name].p.splice(index, 1); propGradPoints.removeChild(propGradPoint); propGradRedrawPreview(); }); var propGradPointColour = document.createElement('label'); propGradPointColour.classList.add('ye-applet-editor-properties-property-gradient-points-point-colour'); propGradPoint.appendChild(propGradPointColour); var propGradPointColourValue = document.createElement('input'); propGradPointColourValue.type = 'color'; propGradPointColourValue.value = '#' + point.c.toString(16).padStart(6, '0'); propGradPointColourValue.classList.add('ye-applet-editor-properties-property-gradient-points-point-colour-value'); propGradPointColourValue.onchange = function() { point.c = parseInt(propGradPointColourValue.value.substring(1), 16); propGradPointColour.style.backgroundColor = propGradPointColourValue.value; propGradRedrawPreview(); }; propGradPointColour.appendChild(propGradPointColourValue); propGradPointColour.style.backgroundColor = propGradPointColourValue.value; var propGradPointOffset = document.createElement('input'); propGradPointOffset.type = 'range'; propGradPointOffset.classList.add('ye-applet-editor-properties-property-gradient-points-point-offset-range'); propGradPointOffset.value = 0; propGradPointOffset.min = 0; propGradPointOffset.max = 100; propGradPoint.appendChild(propGradPointOffset); var propGradPointOffsetNum = document.createElement('input'); propGradPointOffsetNum.type = 'number'; propGradPointOffsetNum.classList.add('ye-applet-editor-properties-property-gradient-points-point-offset-numeric'); propGradPointOffsetNum.value = 0; propGradPointOffsetNum.min = 0; propGradPointOffsetNum.max = 100; propGradPoint.appendChild(propGradPointOffsetNum); var propGradPointOffsetIsSetting = false, propGradPointOffsetSet = function(val) { if(propGradPointOffsetIsSetting) return; propGradPointOffsetIsSetting = true; val = parseInt(val); propGradPointOffset.value = propGradPointOffsetNum.value = point.o = val; propGradRedrawPreview(); propGradPointOffsetIsSetting = false; }; propGradPointOffsetSet(point.o); propGradPointOffset.onchange = function() { propGradPointOffsetSet(propGradPointOffset.value); }; propGradPointOffsetNum.onchange = function() { propGradPointOffsetSet(propGradPointOffsetNum.value); }; }; var propGradPointAddButton = document.createElement('button'); propGradPointAddButton.classList.add('ye-applet-editor-properties-property-gradient-points-add'); propGradPointAddButton.onclick = function() { var point = {}; if(!effectValue.values[propInfo.name].p) effectValue.values[propInfo.name].p = []; effectValue.values[propInfo.name].p.push(point); propGradPointAdd(point); propGradRedrawPreview(); }; propGradDirection.appendChild(propGradPointAddButton); var propGradPointAddButtonIcon = document.createElement('div'); propGradPointAddButtonIcon.classList.add('ye-applet-editor-properties-property-gradient-points-add-icon'); propGradPointAddButton.appendChild(propGradPointAddButtonIcon); var propGradPointAddButtonText = document.createElement('div'); propGradPointAddButtonText.classList.add('ye-applet-editor-properties-property-gradient-points-add-text'); propGradPointAddButtonText.textContent = 'Add gradient point'; propGradPointAddButton.appendChild(propGradPointAddButtonText); if(effectValue.values[propInfo.name].p) for(var i = 0; i < effectValue.values[propInfo.name].p.length; i++) propGradPointAdd(effectValue.values[propInfo.name].p[i]); break; default: var propNone = document.createElement('div'); propNone.classList.add('ye-applet-editor-properties-property-none'); propNone.textContent = 'There is no handler available for this property type.'; propWrap.appendChild(propNone); break; } var propDefault = document.createElement('div'); propDefault.classList.add('ye-applet-editor-properties-property-reset'); propDefault.title = 'Reset'; propDefault.onclick = function() { effectValue.values[propInfo.name] = propInfo.default; redraw(); }; propWrap.appendChild(propDefault); } function ytknsEditorGradientCSS(obj) { var str = 'linear-gradient(' + (obj.d || 0).toString() + 'deg, ', points = []; if(obj.p) for(var i = 0; i < obj.p.length; i++) points.push('#' + (obj.p[i].c || 0).toString(16).padStart(6, '0') + ' ' + (obj.p[i].o || 0).toString() + '%'); return str + points.join(', ') + ')'; } function ytknsEditorAddSidebarButton(className, title, callback) { var button = document.createElement('div'); button.classList.add('ye-sidebar-buttons-button'); button.classList.add('ye-sidebar-buttons-button--' + className); button.title = title; button.onclick = callback; ytknsEditorElemSidebarButtons.appendChild(button); } function ytknsEditorAddSidebarButtonSeparator() { var separator = document.createElement('div'); separator.classList.add('ye-sidebar-buttons-separator'); ytknsEditorElemSidebarButtons.appendChild(separator); } function ytknsEditorAddSidebarEffect(effectValue) { var effectInfo = ytknsGetEffectInfoByType(effectValue.type); if(!effectInfo) { alert('Attempted to add unregistered effect.'); return; } var effect = document.createElement('div'); effect.classList.add('ye-sidebar-effects-effect'); ytknsEditorElemSidebarEffects.appendChild(effect); var effectName = document.createElement('div'); effectName.classList.add('ye-sidebar-effects-effect-name'); effectName.textContent = effectInfo.name; effect.appendChild(effectName); var effectActions = document.createElement('div'); effectActions.classList.add('ye-sidebar-effects-effect-actions'); effect.appendChild(effectActions); ytknsEditorAddSidebarEffectAction(effectActions, 'edit', 'Edit Effect', function() { ytknsLoadEffectEditor(effectInfo, effectValue); }); ytknsEditorAddSidebarEffectAction(effectActions, 'delete', 'Delete Effect', function() { var previous = ytknsEditorMainClone(); ytknsEditorMainShowEffectDeleteConfirm(effectInfo, function(accept) { if(accept) { ytknsRemoveEffectValueByType(effectValue.type); ytknsEditorMainShowWelcome(); } else { ytknsEditorMainRestore(previous); } }); }); } function ytknsEditorMainShowEffectDeleteConfirm(effectInfo, callback) { var confirmation = document.createElement('div'), text = confirmation.appendChild(document.createElement('div')), actions = confirmation.appendChild(document.createElement('div')); confirmation.classList.add('ye-main-effect-delete-confirm'); text.classList.add('ye-main-effect-delete-confirm-text'); text.textContent = 'Are you sure you want to delete "' + effectInfo.name + '"?'; actions.classList.add('ye-main-effect-delete-confirm-actions'); var accept = document.createElement('div'); accept.classList.add('ye-main-effect-delete-confirm-actions-action'); accept.classList.add('ye-main-effect-delete-confirm-actions-action--accept'); accept.textContent = 'Yes'; accept.onclick = function() { callback(true); }; actions.appendChild(accept); var deny = document.createElement('div'); deny.classList.add('ye-main-effect-delete-confirm-actions-action'); deny.classList.add('ye-main-effect-delete-confirm-actions-action--deny'); deny.textContent = 'No'; deny.onclick = function() { callback(false); }; actions.appendChild(deny); ytknsEditorMainSetContainer(confirmation, 'Delete effect'); } function ytknsEditorAddSidebarEffectAction(container, className, title, callback) { var action = document.createElement('div'); action.classList.add('ye-sidebar-effects-effect-actions-action'); action.classList.add('ye-sidebar-effects-effect-actions-action--' + className); action.title = title; action.onclick = callback; container.appendChild(action); } function ytknsEditorUpdateSidebarEffects() { ytknsEditorElemSidebarEffects.innerHTML = ''; if(ytknsZoneInfo == null || ytknsZoneInfo.effects == null || ytknsZoneInfo.effects.length < 1) { var nothing = document.createElement('div'); nothing.classList.add('ye-sidebar-effects-empty'); nothing.textContent = 'You have not added any effects yet.'; ytknsEditorElemSidebarEffects.appendChild(nothing); } else { for(var i = 0; i < ytknsZoneInfo.effects.length; i++) ytknsEditorAddSidebarEffect(ytknsZoneInfo.effects[i]); } } function ytknsShowDetailsEdit() { ytknsEditorChangeHash('details'); var container = document.createElement('div'); container.classList.add('ye-main-details'); var fieldsElem = document.createElement('div'); fieldsElem.classList.add('ye-main-details-fields'); container.appendChild(fieldsElem); var fields = [ { name: 'Zone ID', value: ytknsZoneInfo.id }, { name: 'Subdomain', value: ytknsZoneInfo.name, suffix: '.' + location.host }, { name: 'Title', value: ytknsZoneInfo.title, max: 255, edit: function(val) { ytknsZoneInfo.title = val; } }, ]; for(var i = 0; i < fields.length; i++) { var field = fields[i], fieldElem = document.createElement('div'); fieldElem.classList.add('ye-main-details-fields-field'); var fieldName = document.createElement('div'); fieldName.classList.add('ye-main-details-fields-field-name'); fieldName.textContent = field.name + ':'; fieldElem.appendChild(fieldName); var fieldWrap = document.createElement('div'); fieldWrap.classList.add('ye-main-details-fields-field-wrap'); fieldElem.appendChild(fieldWrap); var fieldInput = document.createElement('input'); fieldInput.classList.add('ye-main-details-fields-field-input'); fieldInput.type = 'text'; fieldInput.value = field.value; if(field.max) fieldInput.maxLength = field.max; if(field.edit) { var onedit = field.edit; fieldInput.onchange = function(ev) { onedit(ev.target.value); }; } else { fieldInput.readOnly = true; fieldElem.classList.add('ye-main-details-fields-field--readonly'); } fieldWrap.appendChild(fieldInput); if(field.suffix) fieldWrap.appendChild(document.createTextNode(field.suffix)); fieldsElem.appendChild(fieldElem); } ytknsEditorMainSetContainer(container, 'Zone information'); } function ytknsEditorMainGetTitle() { return ytknsEditorElemMainTitle.textContent; } function ytknsEditorMainSetTitle(title) { ytknsEditorElemMainTitle.textContent = title; } function ytknsEditorMainGetContainer() { return ytknsEditorElemMainContainer.firstChild; } function ytknsEditorMainSetContainer(child, title) { if(title) ytknsEditorMainSetTitle(title); ytknsEditorElemMainContainer.innerHTML = ''; ytknsEditorElemMainContainer.appendChild(child); if(ytknsEditorSBS) ytknsEditorPreview(ytknsZoneInfo); } function ytknsEditorMainClone() { return { 'title': ytknsEditorMainGetTitle(), 'content': ytknsEditorMainGetContainer().cloneNode(true), }; } function ytknsEditorMainRestore(clone) { ytknsEditorMainSetContainer(clone.content, clone.title); } function ytknsEditorMainShowWelcome() { var welcome = document.createElement('div'); welcome.classList.add('ye-main-welcome'); var welcomeH1 = document.createElement('h1'); welcomeH1.classList.add('ye-main-welcome-h1'); welcomeH1.textContent = 'Welcome!'; welcome.appendChild(welcomeH1); var welcomeP = document.createElement('p'); welcomeP.classList.add('ye-main-welcome-p'); welcomeP.textContent = 'Select a tool in the sidebar to get started.'; welcome.appendChild(welcomeP); ytknsEditorMainSetContainer(welcome, 'Welcome to the YTKNS Editor'); } function ytknsEditorMainShowEffectList() { ytknsEditorChangeHash('add'); var container = document.createElement('div'); container.classList.add('ye-applet-effects'); var effects = document.createElement('div'); effects.classList.add('ye-applet-effects-list'); container.appendChild(effects); for(var i = 0; i < ytknsEditorEffects.length; i++) { var effectInfo = ytknsEditorEffects[i], effectValue = ytknsGetEffectValueByType(effectInfo.type), effectElement = document.createElement('div'), effectUsed = effectValue !== null; effectElement.classList.add('ye-applet-effects-list-item'); if(effectUsed) effectElement.classList.add('ye-applet-effects-list-item--used'); var effectName = document.createElement('div'); effectName.classList.add('ye-applet-effects-list-item-name'); effectName.textContent = effectInfo.name; effectElement.appendChild(effectName); var effectActions = document.createElement('div'); effectActions.classList.add('ye-applet-effects-list-item-actions'); effectElement.appendChild(effectActions); if(!effectUsed) { var effectActionAdd = document.createElement('div'); effectActionAdd.classList.add('ye-applet-effects-list-item-actions-action'); effectActionAdd.classList.add('ye-applet-effects-list-item-actions-action--add'); effectActionAdd.title = 'Add Effect'; (function() { // javascript is very cool and good var effectInfoCopy = effectInfo; effectActionAdd.onclick = function() { var effectValueNew = ytknsEditorAddNewEffect(effectInfoCopy); ytknsEditorUpdateSidebarEffects(); ytknsLoadEffectEditor(effectInfoCopy, effectValueNew); }; })(); effectActions.appendChild(effectActionAdd); } effects.appendChild(effectElement); } ytknsEditorMainSetContainer(container, 'Available effects'); } function ytknsEditorAddNewEffect(effectInfo) { var effectValue = { type: effectInfo.type, values: {}, }; for(var i = 0; i < effectInfo.props.length; i++) { var propInfo = effectInfo.props[i]; effectValue.values[propInfo.name] = propInfo.default || ''; } ytknsZoneInfo.effects.push(effectValue); return effectValue; } function ytknsEditorConfirmReloadZoneInfo(zoneId) { if(confirm('Are you sure you want to undo any changes you\'ve made?')) ytknsEditorReloadZoneInfo(zoneId); } function ytknsEditorReloadZoneInfo(zoneId, onComplete) { ytknsEditorChangeHash(''); ytknsEditorMainShowWelcome(); ytknsEditorLoadEffects(function(effects) { ytknsEditorEffects = effects; ytknsLoadZoneInfo(zoneId, function(zoneInfo) { ytknsZoneInfo = zoneInfo; ytknsEditorUpdateSidebarEffects(); if(onComplete) onComplete(); }); }); } function ytknsEditorSwitchString(str) { switch(str) { case '': ytknsEditorMainShowWelcome(); break; case 'add': ytknsEditorMainShowEffectList(); break; case 'details': ytknsShowDetailsEdit(); break; default: var openEffectInfo = ytknsGetEffectInfoByType(str); if(openEffectInfo) { var openEffectValue = ytknsGetEffectValueByType(str); ytknsLoadEffectEditor(openEffectInfo, openEffectValue); } break; } } function ytknsEditorHashChange(ev) { if(!ytknsEditorIgnoreHashChange) ytknsEditorSwitchString(location.hash.substring(1)); ytknsEditorIgnoreHashChange = false; } function ytknsEditorMain(container, zoneId, editorToken, uploadToken, sideBySide) { if(navigator.userAgent.match(/mobile/gi) && !confirm("The editor is not designed to be used on phones whatsoever.\r\nHit OK to continue anyway or cancel to whereever you came from.")) { history.go(-1); return; } window.onhashchange = ytknsEditorHashChange; window.onbeforeunload = ytknsEditorBeforeUnload; ytknsEditorToken = editorToken; ytknsEditorUploadToken = uploadToken; ytknsEditorSBS = sideBySide; container.innerHTML = ''; container.classList.add('ye'); ytknsEditorElemSidebar = container.appendChild(document.createElement('div')); ytknsEditorElemSidebar.classList.add('ye-sidebar'); ytknsEditorElemSidebarButtons = ytknsEditorElemSidebar.appendChild(document.createElement('div')); ytknsEditorElemSidebarButtons.classList.add('ye-sidebar-buttons'); ytknsEditorAddSidebarButton('save', 'Save', function() { ytknsSaveZoneInfo(ytknsZoneInfo, function(res) { if(res.msg) alert(res.msg); }); }); ytknsEditorAddSidebarButton('cancel', 'Cancel', function() { location.assign('/zones?f=my'); }); ytknsEditorAddSidebarButton('reset', 'Undo Changes', function() { ytknsEditorConfirmReloadZoneInfo(zoneId); }); ytknsEditorAddSidebarButton('edit', 'Edit Details', function() { ytknsShowDetailsEdit(); }); ytknsEditorAddSidebarButtonSeparator(); ytknsEditorAddSidebarButton('preview', 'Show Preview', function() { ytknsEditorPreview(ytknsZoneInfo); }); ytknsEditorAddSidebarButton('live', 'View Live', function() { window.open('//%1.%2'.replace('%2', location.host).replace('%1', ytknsZoneInfo.name)); }); ytknsEditorAddSidebarButtonSeparator(); ytknsEditorAddSidebarButton('add', 'Add Effect', function() { ytknsEditorMainShowEffectList(); }); ytknsEditorElemSidebarEffects = ytknsEditorElemSidebar.appendChild(document.createElement('div')); ytknsEditorElemSidebarEffects.classList.add('ye-sidebar-effects'); ytknsEditorUpdateSidebarEffects(); ytknsEditorElemMain = container.appendChild(document.createElement('div')); ytknsEditorElemMain.classList.add('ye-main'); ytknsEditorElemMainTitle = ytknsEditorElemMain.appendChild(document.createElement('div')); ytknsEditorElemMainTitle.classList.add('ye-main-title'); ytknsEditorElemMainContainer = ytknsEditorElemMain.appendChild(document.createElement('div')); ytknsEditorElemMainContainer.classList.add('ye-main-container'); var goToEditor = location.hash.substring(1); ytknsEditorReloadZoneInfo(zoneId, function() { ytknsEditorSwitchString(goToEditor); }); }