PHP Classes

File: resources/js/components/FormField.vue

Recommend this page to a friend!
  Classes of Naif Alshaye   Laravel Nova PHP Soundcloud Player   resources/js/components/FormField.vue   Download  
File: resources/js/components/FormField.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel Nova PHP Soundcloud Player
Embed an audio player to play a Soundcloud track
Author: By
Last change:
Date: 5 years ago
Size: 1,912 bytes
 

Contents

Class file image Download
<template> <default-field :field="field"> <template slot="field"> <input :id="field.name" type="text" class="w-full form-control form-input form-input-bordered" :class="errorClasses" placeholder="user/track_title" v-model="value" @change="soundCloud()" /> <iframe id="track_name" width="100%" height="20" scrolling="no" frameborder="no" allow="autoplay" src=""> </iframe> <p v-if="hasError" class="my-2 text-danger"> {{ firstError }} </p> </template> </default-field> </template> <script> import { FormField, HandlesValidationErrors } from 'laravel-nova' export default { mixins: [FormField, HandlesValidationErrors], props: ['resourceName', 'resourceId', 'field'], mounted() { if (this.value.length > 0){ this.play(false); } }, methods: { soundCloud: function() { this.play(true); }, play: function (autoplay) { document.getElementById('track_name').src = 'https://w.soundcloud.com/player/?url=https://soundcloud.com/'+this.value+'&color=%23ff5500&auto_play='+autoplay+'&hide_related=false&show_comments=false&show_user=false&show_reposts=false&show_teaser=false'; }, /* * Set the initial, internal value for the field. */ setInitialValue() { this.value = this.field.value || '' }, /** * Fill the given FormData object with the field's internal value. */ fill(formData) { formData.append(this.field.attribute, this.value || '') }, /** * Update the field's internal value. */ handleChange(value) { this.value = value } } } </script>