Created
June 30, 2022 20:53
-
-
Save Parables/3f62018c1ba3dc124b97be8c8d76d2c4 to your computer and use it in GitHub Desktop.
How to AlpineJS - Simple reusable components for AlpineJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import plupload from "plupload"; | |
export let alert = ( | |
message = "Success", | |
details = [], | |
type = "default", | |
duration = 5000, | |
position = "bottom-center", | |
autoDismiss = true | |
) => ({ | |
init() { | |
this.message = message; | |
this.details = details; | |
this.type = type; | |
this.duration = duration; | |
this.position = position; | |
autoDismiss && this.autoDismissAlert(); | |
}, | |
message: "Success", | |
details: [], | |
type: "default", | |
duration: 5000, | |
position: "bottom-center", | |
dismissAlert() { | |
this.$root.remove(); | |
}, | |
autoDismissAlert() { | |
setTimeout(() => this.$root.remove(), this.duration); | |
} | |
}); | |
export let mediaUpload = ( | |
browseButton = "browse", | |
url = "http://localhost/media/upload" | |
) => ({ | |
init() { | |
this.setup(); | |
this.uploader.init(); | |
}, | |
uploader: new plupload.Uploader({}), | |
setup() { | |
let token = document.getElementsByName("_token")[0].value; | |
console.log("token", token); | |
this.uploader = new plupload.Uploader({ | |
browse_button: browseButton, | |
url: url, | |
file_data_name: "media", | |
multi_selection: false, | |
filters: { | |
mime_types: [{ title: "Image files", extensions: "jpg,gif,png" }], | |
prevent_duplicates: true | |
}, | |
max_retries: 3, | |
chunk_size: "10kb", | |
multipart_params: { | |
_token: token | |
}, | |
init: { | |
PostInit: (up) => { | |
// arrow syntax infers this from it global scope | |
console.log("internal post init this:", this); // this = instance of Alpine data proxy | |
}, | |
/* | |
// Alternative Syntax | |
// Example 1: // ES syntax methods bound this to it local scope | |
PostInit(up) { | |
console.log('internal post init this:', this); //this = instance of uploader | |
}, | |
// Example 2: traditional function bounds this to it local scope | |
PostInit: function (up) { | |
console.log('internal post init this:', this); //this = instance of uploader | |
}, | |
// More examples below | |
*/ | |
FilesAdded: (up, files) => { | |
const reader = new FileReader(); | |
reader.addEventListener("load", () => { | |
console.log("data url: ", reader.result); | |
document.getElementById("image-preview").src = reader.result; | |
}); | |
reader.readAsDataURL(files[0].getSource().getSource()); | |
up.start(); | |
// this.$dispatch('upload_started', this.uploader) | |
}, | |
ChunkUploaded: (up, file, info) => { | |
console.log("Chunk uploaded: ", info); | |
}, | |
UploadProgress: (up, file) => { | |
console.log("UploadProgress: ", file.percent, "%"); | |
console.log(file); | |
}, | |
FileUploaded: (up, file, result) => { | |
console.log("FileUploaded"); | |
console.log(file); | |
console.log(JSON.parse(result.response)); | |
const responseResult = JSON.parse(result.response); | |
if (!responseResult.ok) { | |
console.log("Upload Error: ", responseResult.info); | |
} | |
if (result.status !== 200) { | |
console.log("File Uploaded Failed"); | |
} | |
if (responseResult.ok === 1 && result.status === 200) { | |
console.log("File Uploaded Successfully"); | |
} | |
}, | |
UploadComplete: (up, file) => { | |
console.log("File Uploaded Successfully!!", file); | |
}, | |
Error: (up, err) => { | |
console.log("error: ", err, up); | |
} | |
} | |
}); | |
/* | |
// More alternative syntax | |
// Example 3: arrow syntax infers this from it global scope | |
uploader.bind('PostInit', (up) => { | |
console.log('post init this: ', this) // this = instance of Alpine data proxy | |
}); | |
// Example 4: traditional function bounds this to it local scope | |
uploader.bind('PostInit', function (up) { | |
console.log("post init this: ", this) // //this = instance of uploader | |
}); | |
// Example 5: Overriding the local scope of `this` bounded by the traditional function | |
// by passing in the 3rd argument:`scope` | |
uploader.bind('PostInit', function (up) { | |
console.log("post init this: ", this) // this = instance of Alpine data proxy | |
}, this); | |
// Example 6: arrow syntax infers this from it global scope | |
// again, the 3rd arugument scope is passed | |
//(this is a little extraneous but here for demo purpose) | |
uploader.bind('PostInit', (up) => { | |
console.log("post init this: ", this) // this = instance of Alpine data proxy | |
}, this); | |
*/ | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment