refactored script to separate component
This commit is contained in:
Damodar Lohani
parent
048402871d
commit
61c091811d
|
|
@ -255,94 +255,3 @@
|
|||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.store('uploader', {
|
||||
files: [],
|
||||
isOpen: true,
|
||||
init() {
|
||||
window.addEventListener('beforeunload', (event) => {
|
||||
this.files.forEach((file) => {
|
||||
if(!file.completed && !file.failed) {
|
||||
let confirmationMessage = "There are incomplete uploads, are you sure you want to leave?";
|
||||
event.returnValue = confirmationMessage;
|
||||
return confirmationMessage;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
toggle() {
|
||||
this.isOpen = !this.isOpen;
|
||||
},
|
||||
addFile(file) {
|
||||
this.files.push(file);
|
||||
},
|
||||
updateFile(id, file) {
|
||||
this.files = this.files.map((oldFile) => id == oldFile.id ? {...oldFile, ...file} : oldFile);
|
||||
},
|
||||
removeFile(id) {
|
||||
this.files = this.files.filter((file) => file.id !== id);
|
||||
},
|
||||
async uploadFile(target) {
|
||||
const formData = new FormData(target);
|
||||
const sdk = window.ls.container.get('sdk');
|
||||
const file = formData.get('file');
|
||||
const fileId = formData.get('fileId');
|
||||
const id = fileId === 'unique()' ? performance.now() : fileId;
|
||||
let read = formData.get('read');
|
||||
if(read) {
|
||||
read = JSON.parse(read);
|
||||
}
|
||||
let write = formData.get('write');
|
||||
if(write) {
|
||||
write = JSON.parse(wirte);
|
||||
}
|
||||
|
||||
this.addFile({
|
||||
id: id,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
completed: false,
|
||||
failed: false,
|
||||
isCancelled: false,
|
||||
});
|
||||
target.reset();
|
||||
try {
|
||||
const response = await sdk.storage.createFile(
|
||||
formData.get('bucketId'),
|
||||
fileId,
|
||||
file,
|
||||
read,
|
||||
write,
|
||||
(progress) => {
|
||||
/*if cancelled
|
||||
throw something
|
||||
- When cancelled we need to delete the file
|
||||
- but we don't yet have the id of the file,
|
||||
- after resumable upload change, we will have the id
|
||||
*/
|
||||
this.updateFile(id, {
|
||||
id: id,
|
||||
progress: Math.round(progress),
|
||||
});
|
||||
});
|
||||
this.updateFile(id,{
|
||||
id: response.$id,
|
||||
name: response.name,
|
||||
progress: 100,
|
||||
completed: true,
|
||||
failed: false,
|
||||
});
|
||||
document.dispatchEvent(new CustomEvent('storage.createFile'));
|
||||
} catch(error) {
|
||||
this.updateFile(id, {
|
||||
id: id,
|
||||
failed: true,
|
||||
});
|
||||
document.dispatchEvent(new CustomEvent('storage.createFile'));
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const configApp = {
|
|||
'public/scripts/routes.js',
|
||||
'public/scripts/filters.js',
|
||||
'public/scripts/app.js',
|
||||
// 'public/scripts/upload-modal.js',
|
||||
'public/scripts/upload-modal.js',
|
||||
|
||||
'public/scripts/views/service.js',
|
||||
|
||||
|
|
|
|||
4
public/dist/scripts/app-all.js
vendored
4
public/dist/scripts/app-all.js
vendored
|
|
@ -3728,7 +3728,9 @@ if(forcePlaces!==false){rounded=Number(rounded).toFixed(forcePlaces);}
|
|||
return rounded+abbr;}
|
||||
window.ls.container.get("view").add({selector:"data-acl",controller:function(element,document,router,alerts){document.body.classList.remove("console");document.body.classList.remove("home");document.body.classList.add(router.getCurrent().view.scope);if(!router.getCurrent().view.project){document.body.classList.add("hide-nav");document.body.classList.remove("show-nav");}else{document.body.classList.add("show-nav");document.body.classList.remove("hide-nav");}
|
||||
if("/console"===router.getCurrent().path){document.body.classList.add("index");}else{document.body.classList.remove("index");}}}).add({selector:"data-prism",controller:function(window,document,element,alerts){Prism.highlightElement(element);let copy=document.createElement("i");copy.className="icon-docs copy";copy.title="Copy to Clipboard";copy.textContent="Click Here to Copy";copy.addEventListener("click",function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(element);window.getSelection().addRange(range);try{document.execCommand("copy");alerts.add({text:"Copied to clipboard",class:""},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:"error"},3000);}
|
||||
window.getSelection().removeAllRanges();});element.parentNode.parentNode.appendChild(copy);}});(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
|
||||
window.getSelection().removeAllRanges();});element.parentNode.parentNode.appendChild(copy);}});(function(window){document.addEventListener('alpine:init',()=>{Alpine.store('uploader',{files:[],isOpen:true,init(){window.addEventListener('beforeunload',(event)=>{this.files.forEach((file)=>{if(!file.completed&&!file.failed){let confirmationMessage="There are incomplete uploads, are you sure you want to leave?";event.returnValue=confirmationMessage;return confirmationMessage;}});});},toggle(){this.isOpen=!this.isOpen;},addFile(file){this.files.push(file);},updateFile(id,file){this.files=this.files.map((oldFile)=>id==oldFile.id?{...oldFile,...file}:oldFile);},removeFile(id){this.files=this.files.filter((file)=>file.id!==id);},async uploadFile(target){const formData=new FormData(target);const sdk=window.ls.container.get('sdk');const file=formData.get('file');const fileId=formData.get('fileId');const id=fileId==='unique()'?performance.now():fileId;let read=formData.get('read');if(read){read=JSON.parse(read);}
|
||||
let write=formData.get('write');if(write){write=JSON.parse(wirte);}
|
||||
this.addFile({id:id,name:file.name,progress:0,completed:false,failed:false,isCancelled:false,});target.reset();try{const response=await sdk.storage.createFile(formData.get('bucketId'),fileId,file,read,write,(progress)=>{this.updateFile(id,{id:id,progress:Math.round(progress),});});this.updateFile(id,{id:response.$id,name:response.name,progress:100,completed:true,failed:false,});document.dispatchEvent(new CustomEvent('storage.createFile'));}catch(error){this.updateFile(id,{id:id,failed:true,});document.dispatchEvent(new CustomEvent('storage.createFile'));}}});});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
|
||||
throw new Error("This callback is only valid for forms");};},alert:function(text,classname){return function(alerts){alerts.add({text:text,class:classname||"success"},3000);};},redirect:function(url){return function(router){window.location=url||"/";};},reload:function(){return function(router){router.reload();};},state:function(keys){let updateQueryString=function(key,value,url){var re=new RegExp("([?&])"+key+"=.*?(&|#|$)(.*)","gi"),hash;if(re.test(url)){if(typeof value!=="undefined"&&value!==null){return url.replace(re,"$1"+key+"="+value+"$2$3");}else{hash=url.split("#");url=hash[0].replace(re,"$1$3").replace(/(&|\?)$/,"");if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
|
||||
return url;}}else{if(typeof value!=="undefined"&&value!==null){var separator=url.indexOf("?")!==-1?"&":"?";hash=url.split("#");url=hash[0]+separator+key+"="+value;if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
|
||||
return url;}else{return url;}}};keys=keys.split(",").map(element=>element.trim());return function(serviceForm,router,window){let url=window.location.href;keys.map(node=>{node=node.split("=");let key=node[0]||"";let name=node[1]||key;let value=getValue(key,"param",serviceForm);url=updateQueryString(name,value?value:null,url);});if(url!==window.location.href){window.history.pushState({},"",url);router.reset();}};},trigger:function(events){return function(document){events=events.trim().split(",");for(let i=0;i<events.length;i++){if(""===events[i]){continue;}
|
||||
|
|
|
|||
4
public/dist/scripts/app.js
vendored
4
public/dist/scripts/app.js
vendored
|
|
@ -689,7 +689,9 @@ if(forcePlaces!==false){rounded=Number(rounded).toFixed(forcePlaces);}
|
|||
return rounded+abbr;}
|
||||
window.ls.container.get("view").add({selector:"data-acl",controller:function(element,document,router,alerts){document.body.classList.remove("console");document.body.classList.remove("home");document.body.classList.add(router.getCurrent().view.scope);if(!router.getCurrent().view.project){document.body.classList.add("hide-nav");document.body.classList.remove("show-nav");}else{document.body.classList.add("show-nav");document.body.classList.remove("hide-nav");}
|
||||
if("/console"===router.getCurrent().path){document.body.classList.add("index");}else{document.body.classList.remove("index");}}}).add({selector:"data-prism",controller:function(window,document,element,alerts){Prism.highlightElement(element);let copy=document.createElement("i");copy.className="icon-docs copy";copy.title="Copy to Clipboard";copy.textContent="Click Here to Copy";copy.addEventListener("click",function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(element);window.getSelection().addRange(range);try{document.execCommand("copy");alerts.add({text:"Copied to clipboard",class:""},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:"error"},3000);}
|
||||
window.getSelection().removeAllRanges();});element.parentNode.parentNode.appendChild(copy);}});(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
|
||||
window.getSelection().removeAllRanges();});element.parentNode.parentNode.appendChild(copy);}});(function(window){document.addEventListener('alpine:init',()=>{Alpine.store('uploader',{files:[],isOpen:true,init(){window.addEventListener('beforeunload',(event)=>{this.files.forEach((file)=>{if(!file.completed&&!file.failed){let confirmationMessage="There are incomplete uploads, are you sure you want to leave?";event.returnValue=confirmationMessage;return confirmationMessage;}});});},toggle(){this.isOpen=!this.isOpen;},addFile(file){this.files.push(file);},updateFile(id,file){this.files=this.files.map((oldFile)=>id==oldFile.id?{...oldFile,...file}:oldFile);},removeFile(id){this.files=this.files.filter((file)=>file.id!==id);},async uploadFile(target){const formData=new FormData(target);const sdk=window.ls.container.get('sdk');const file=formData.get('file');const fileId=formData.get('fileId');const id=fileId==='unique()'?performance.now():fileId;let read=formData.get('read');if(read){read=JSON.parse(read);}
|
||||
let write=formData.get('write');if(write){write=JSON.parse(wirte);}
|
||||
this.addFile({id:id,name:file.name,progress:0,completed:false,failed:false,isCancelled:false,});target.reset();try{const response=await sdk.storage.createFile(formData.get('bucketId'),fileId,file,read,write,(progress)=>{this.updateFile(id,{id:id,progress:Math.round(progress),});});this.updateFile(id,{id:response.$id,name:response.name,progress:100,completed:true,failed:false,});document.dispatchEvent(new CustomEvent('storage.createFile'));}catch(error){this.updateFile(id,{id:id,failed:true,});document.dispatchEvent(new CustomEvent('storage.createFile'));}}});});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
|
||||
throw new Error("This callback is only valid for forms");};},alert:function(text,classname){return function(alerts){alerts.add({text:text,class:classname||"success"},3000);};},redirect:function(url){return function(router){window.location=url||"/";};},reload:function(){return function(router){router.reload();};},state:function(keys){let updateQueryString=function(key,value,url){var re=new RegExp("([?&])"+key+"=.*?(&|#|$)(.*)","gi"),hash;if(re.test(url)){if(typeof value!=="undefined"&&value!==null){return url.replace(re,"$1"+key+"="+value+"$2$3");}else{hash=url.split("#");url=hash[0].replace(re,"$1$3").replace(/(&|\?)$/,"");if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
|
||||
return url;}}else{if(typeof value!=="undefined"&&value!==null){var separator=url.indexOf("?")!==-1?"&":"?";hash=url.split("#");url=hash[0]+separator+key+"="+value;if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
|
||||
return url;}else{return url;}}};keys=keys.split(",").map(element=>element.trim());return function(serviceForm,router,window){let url=window.location.href;keys.map(node=>{node=node.split("=");let key=node[0]||"";let name=node[1]||key;let value=getValue(key,"param",serviceForm);url=updateQueryString(name,value?value:null,url);});if(url!==window.location.href){window.history.pushState({},"",url);router.reset();}};},trigger:function(events){return function(document){events=events.trim().split(",");for(let i=0;i<events.length;i++){if(""===events[i]){continue;}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,91 @@
|
|||
//get sdk instance from litespeed
|
||||
(function(window){
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.store('uploader', {
|
||||
files: [],
|
||||
isOpen: true,
|
||||
init() {
|
||||
window.addEventListener('beforeunload', (event) => {
|
||||
this.files.forEach((file) => {
|
||||
if(!file.completed && !file.failed) {
|
||||
let confirmationMessage = "There are incomplete uploads, are you sure you want to leave?";
|
||||
event.returnValue = confirmationMessage;
|
||||
return confirmationMessage;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
toggle() {
|
||||
this.isOpen = !this.isOpen;
|
||||
},
|
||||
addFile(file) {
|
||||
this.files.push(file);
|
||||
},
|
||||
updateFile(id, file) {
|
||||
this.files = this.files.map((oldFile) => id == oldFile.id ? {...oldFile, ...file} : oldFile);
|
||||
},
|
||||
removeFile(id) {
|
||||
this.files = this.files.filter((file) => file.id !== id);
|
||||
},
|
||||
async uploadFile(target) {
|
||||
const formData = new FormData(target);
|
||||
const sdk = window.ls.container.get('sdk');
|
||||
const file = formData.get('file');
|
||||
const fileId = formData.get('fileId');
|
||||
const id = fileId === 'unique()' ? performance.now() : fileId;
|
||||
let read = formData.get('read');
|
||||
if(read) {
|
||||
read = JSON.parse(read);
|
||||
}
|
||||
let write = formData.get('write');
|
||||
if(write) {
|
||||
write = JSON.parse(wirte);
|
||||
}
|
||||
|
||||
// (function (window) {
|
||||
// window.onload = function () {
|
||||
// console.log(document);
|
||||
// document.addEventListener('alpine:init', () => {
|
||||
// Alpine.store('uploader', {
|
||||
// files: [],
|
||||
// addFile: (file) => {
|
||||
// files.push(file);
|
||||
// console.log(files);
|
||||
// },
|
||||
this.addFile({
|
||||
id: id,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
completed: false,
|
||||
failed: false,
|
||||
isCancelled: false,
|
||||
});
|
||||
target.reset();
|
||||
try {
|
||||
const response = await sdk.storage.createFile(
|
||||
formData.get('bucketId'),
|
||||
fileId,
|
||||
file,
|
||||
read,
|
||||
write,
|
||||
(progress) => {
|
||||
/*if cancelled
|
||||
throw something
|
||||
- When cancelled we need to delete the file
|
||||
- but we don't yet have the id of the file,
|
||||
- after resumable upload change, we will have the id
|
||||
*/
|
||||
this.updateFile(id, {
|
||||
id: id,
|
||||
progress: Math.round(progress),
|
||||
});
|
||||
});
|
||||
this.updateFile(id,{
|
||||
id: response.$id,
|
||||
name: response.name,
|
||||
progress: 100,
|
||||
completed: true,
|
||||
failed: false,
|
||||
});
|
||||
document.dispatchEvent(new CustomEvent('storage.createFile'));
|
||||
} catch(error) {
|
||||
this.updateFile(id, {
|
||||
id: id,
|
||||
failed: true,
|
||||
});
|
||||
document.dispatchEvent(new CustomEvent('storage.createFile'));
|
||||
}
|
||||
}
|
||||
|
||||
// });
|
||||
// })
|
||||
// }
|
||||
// })(window);
|
||||
});
|
||||
});
|
||||
})(window);
|
||||
Loading…
Reference in a new issue