I'm trying to use sticky header from mmenu plugin, but can't get it to work.
<script src="./mmenu.js"></script>
<script src="./mhead.js"></script>
<script>
Mmenu.configs.classNames.selected = "active";
Mmenu.configs.offCanvas.page.selector = "#my-page";
document.addEventListener(
"DOMContentLoaded", () => {
const menu = new Mmenu( "#my-menu", {
slidingSubmenus: false,
extensions: ["theme-dark"],
"iconbar": {
"use": true,
"top": [
"<a href='#/'><i class='fa fa-home'></i></a>",
"<a href='#/'><i class='fa fa-user'></i></a>"
],
"bottom": [
"<a href='#/'><i class='fa fa-twitter'></i></a>",
"<a href='#/'><i class='fa fa-facebook'></i></a>",
"<a href='#/'><i class='fa fa-linkedin'></i></a>"
]
},
"navbars": [
{
"position": "top",
"content": [
"searchfield"
]
}
]
});
}
);
document.addEventListener(
"DOMContentLoaded", () => {
new mhead( "#my-header", {
pin: 100
});
}
);
</script>
when I run it, I keep getting index.html:121 Uncaught ReferenceError: mhead is not defined
at HTMLDocument.
Anyone has the experience this js plugin? https://www.mmenujs.com/mhead/tutorial.html
Everything works fine, except for the sticky header.
change it to
new Mhead
(notice the capital M)
Related
i use izitoast,
i need use $route in button function in vue-izitoast but it doesn't work
or
i don't know how return value of this function to use in vue
buttons: [
[
"<button><b>yes</b></button>",
function() {
axios
.post(`/student/rooms`, {
room_id: room.id
})
.then(res => {
this.$router.push(`/student/rooms/${room.id}`);
});
},
true
],
You must use an Arrow Function to get local scope. Try this:
<template>
<div id="app">
<div>
<button #click="test">TEST</button>
</div>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
methods: {
test() {
this.$toast.show('Welcome!', 'Hey', {
position: 'topCenter',
buttons: [
[
'<button>Change Router</button>',
(instance, toast) => {
this.$router.push({ name: 'About' });
},
true,
],
],
});
},
},
};
</script>
I'm trying to add dynamically an image to the FullCalendar events with Vue. But first of all, I'm testing with a static data and the image doesn't show up.
This is what I'm trying to do after several research:
<template>
...
<FullCalendar
defaultView="timeGridWeek"
header="null"
:slotDuration="slotDuration"
:plugins="calendarPlugins"
#dateClick="handleDateClick"
:allDaySlot="false"
:columnHeaderFormat='columnHeaderFormat'
:hiddenDays="hiddenDays"
:themeSystem="themeSystem"
:minTime="minTime"
:maxTime="maxTime"
:contentHeight="contentHeight"
:events="tutor_applications_not_scheduled"
:config="config"
#eventRender="eventRender"
/>
...
</template>
<script>
import moment from 'moment'
import FullCalendar from '#fullcalendar/vue'
import dayGridPlugin from '#fullcalendar/daygrid'
import timeGridPlugin from '#fullcalendar/timegrid'
import interactionPlugin from '#fullcalendar/interaction'
import bootstrapPlugin from '#fullcalendar/bootstrap'
export default {
components: {
FullCalendar
},
data(){
return {
tutor_application_setup_id: this.$route.params.tutor_application_setup_id,
loading: false,
uri: '/tutor-applications-schedules/',
calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, bootstrapPlugin],
slotDuration: '01:00',
columnHeaderFormat: {weekday:'long'},
hiddenDays: [], //[0,6] - Sunday and Saturday
themeSystem: 'bootstrap',
minTime: '10:00', // will be dynamic
maxTime: '17:00', // will be dynamic
contentHeight: 'auto',
config: {
timeFormat: 'h(:mm) a',
eventClick: function(event) {
if (event.url) {
location.replace(event.url);
return false;
}
}
},
tutor_applications_schedules: [],
tutor_applications_not_scheduled: [],
tutor_applications_scheduled: [],
errors: [],
}
},
methods: {
handleDateClick(arg){
alert(arg.date)
},
loadTutorApplicationsSchedules(){
axios.get(this.uri + this.tutor_application_setup_id).then(response=>{
this.tutor_applications_schedules = response.data.tutor_applications_schedules
this.loadTutorApplicationsNotScheduled()
this.loading = true
});
},
loadTutorApplicationsNotScheduled(){
// this.tutor_applications_schedules.forEach(schedule => {
// if(!schedule.is_scheduled){
this.tutor_applications_not_scheduled.push({
title: 'TEST TITLE',
start: '2019-05-22 10:00',
end: '2019-05-22 13:00',
imageurl: '/images/profile/1557196883.png'
});
// }
// });
},
eventRender: function(event, eventElement) {
console.log(event) // returning everything
console.log(event.imageurl) // returning undefined
if (event.imageurl) {
eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl +"' width='16' height='16'>");
}
},
loadTutorApplicationsScheduled(){
},
moment: function (date) {
return moment(date)
},
},
mounted(){
this.loadTutorApplicationsSchedules()
}
}
</script>
The result returns only the time and the title in the correct date.
I also tried to insert the img tag to the title attribute, and changed the eventRender, like below:
...
title: '<img src="/images/profile/1557196883.png" />TEST TITLE',
...
eventRender: function(event, element, view) {
var title = element.find( '.fc-title' );
title.html(title.text());
},
It's returning the html tag as string, like <img src="/images/profile/1557196883.png" />TEST TITLE.
Some of my dependencies are:
"vue": "^2.5.17",
"#fullcalendar/bootstrap": "^4.1.0",
"#fullcalendar/core": "^4.1.0",
"#fullcalendar/daygrid": "^4.1.0",
"#fullcalendar/interaction": "^4.1.0",
"#fullcalendar/timegrid": "^4.1.0",
"#fullcalendar/vue": "^4.1.1",
"babel-runtime": "^6.26.0",
"vue-full-calendar": "^2.7.0",
I don't know which approach to follow anymore. Any help? Thank you.
UPDATE
I realized that some params has changed (Full Calendar Updates) and I changed my eventRender function, and now I can read the imageurl. However, I'm stuck how in Vue to find a tag and prepend with my image tag.
My code now is like this:
eventRender: function(info) {
console.log(info) // returning everything
console.log(info.event.extendedProps.imageurl) // returning the image path correctly
if (info.event.extendedProps.imageurl) {
info.el.find("div.fc-content").prepend("<img src='" + info.event.extendedProps.imageurl +"' width='16' height='16'>"); // this line is the problem now
}
},
It's returning the error [Vue warn]: Error in v-on handler: "TypeError: info.el.find is not a function", and I don't know how to fix it.
For whom it may concern :), this thread helped me, and I figured out what to do. I changed my eventRender to this:
eventRender: function(info) {
if (info.event.extendedProps.imageurl) {
info.el.firstChild.innerHTML = info.el.firstChild.innerHTML + "<img src='" + info.event.extendedProps.imageurl +"' width='40' height='40'>";
}
},
In this case, I can be even more flexible like:
info.el.firstChild.innerHTML = "<div><h4><a href='#'>"+ info.event.title +"</a></h4><img src='" + info.event.extendedProps.imageurl +"' width='40' height='40'></div>";
etc.
I hope this can help someone else!
Define a variable in data as imageURL: "",
Define img tag in html where you want to show it as
<img v-if="imageURL!=''" :src="imageURL" width='16' height='16'>
Your renderer function
eventRender: function(info) {
if (info.event.extendedProps.imageurl) {
this.imageURL = info.event.extendedProps.imageurl;
}
}
This is how I did mind by putting this function into methods
eventRender(info) {
info.el.firstChild.innerHTML = `
<a class="rounded-lg fc-day-grid-event fc-h-event fc-event f-start fc-end">
<div class="h-12">
<span class="fc-title text-white flex ml-3">
<img class="img-circle avatar-small h-8 w-8 p-1" src="${info.event.extendedProps.imageurl}">
<span class="ml-3 self-center font bold">${info.event.extendedProps.username}</span>
</span>
</div>
</a>
`
},
Now to change color dynamically for each event I did it from Laravel Resource
'backgroundColor' => $this->status === 1 ? '#48BB78' : '#F6E05E'
Tried to use :class inside the eventRender and didn't work.
So you can just send in the API the color you want based on a condition instead and perform the operation on laravel.
Have tried with and without a checkbox(checkbox will be shown but not selectable), also using editor. Project is local dev in laravel. Code snippets is best i got. I am at about 5 hours searching the web. Everything else is working except select, and the edit and remove buttons because i can't select. No console errors. Inline editing works great.
I tried both dataTables.select.js and dataTables.select.min.js. Tried many different versions of select.
JS and CSS
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
<script src="{{asset('plugins/editor/js/editor.bootstrap4.min.js')}}"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.4/css/select.bootstrap4.min.css">
<link rel="stylesheet" href="/plugins/editor/css/dataTables.editor.css">
<link rel="stylesheet" href="/plugins/editor/css/editor.bootstrap4.min.css">
Table
<table class="table" id="example">
<thead>
<tr>
<th></th> <!--Checkbox Column --!>
<th></th> <!-- Avatar Column --!>
<th>Name</th>
<th>Priority</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
</table>
JS
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
}
});
var editor = new $.fn.dataTable.Editor({
ajax: "manage",
table: "#example",
idSrc: 'id',
fields: [
{label:"Title", name: "title", type:"textarea"},
{label:"Priority", name: "priority_id", type: "select",
options: [
#foreach ($priorities as $priority)
{ label: "{{$priority['name'] }}", value: "{{$priority['id']}}" },
#endforeach
]
},
{label:"user_id", name: "user_id", type: "select", def: "Unassigned",
options: [
#foreach ($users as $user)
{ label: "{{$user['first_name'] }} {{$user['last_name']}}", value: "{{$user['id']}}" },
#endforeach
]
},
{label:"Body", name: "body", type:"textarea"}
]
});
$('#example').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this, {
buttons: {label: '>', fn:function(){ this.submit()}},
onBlur: 'submit',
submit: 'allIfChanged'
});
});
$(function() {
var table = $('#example').DataTable({
ajax: '/manage/data',
dom: 'Bfrtip',
order: [3, 'asc'],
processing: true,
serverSide: true,
deferRender: true,
select:[
{style: 'multi'},
{selector: 'td:first-child'}
],
columns: [
{
data : null,
defaultContent : '',
className : 'select-checkbox',
title : '',
orderable : false,
searchable : false
},
{data: 'user_avatar', name:"user_avatar", render: function(data,type,row){ // column
if (row.user == null) {
var avatar = "<img style='width:75px' src='/storage/users/default.png'>";
} else {
var avatar = "<img style='width:75px' src='/storage/"+ row.user.avatar +"'>";
}
return avatar;
}},
{ data: null, name: 'user.name', editField: "user_id", defaultContent: '', render: function(data,type,row){ //column
if(row.user === null){
var name = 'Unassigned';
} else {
var name = row.user.first_name +" "+ row.user.last_name;
}
return name;
} },
{
data: 'priority.name',
name: 'priority.name',
editField:"priority_id"
},
{
data: 'title',
name: 'title'
},
{
data: 'body',
name: 'body'
}
],
buttons: [
{extend: 'create', editor: editor},
{extend: 'edit', editor: editor},
{extend: 'remove', editor: editor},
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}
]
});
});
})
I have also tried using
$('#example tbody').on( 'click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
So im creating a basic tasklist where i want to set them done, when the <li>is clicked. When it's clicked i want that a class is added to the <li> thats clicked. i could not figure this out with the docs so i hope someone could help me out :D
The code i already have:
<transition-group name="list">
<li class="list-item list-group-item" v-for="(task, index) in list" :key="task.id" v-on:click="finishTask(task.id)" >
#{{ task.text }}
<button #click="removeTask(task.id)" class="btn btn-danger btn-xs pull-right">Delete</button>
</li>
</transition-group>
</ul>
</div>
// get the csrf token from the meta
var csrf_token = $('meta[name="csrf-token"]').attr('content');
export default {
data() {
return {
list: [],
taskInput: {
id: '',
text: ''
}
};
},
// So the tasks will show when the page is loaded
created() {
this.allTasks();
},
methods: {
// get all the existing tasks
allTasks() {
axios.get('tasks').then((response) => {
this.list = response.data;
});
},
// create a new task
createTask() {
axios({
method: 'post',
url: '/tasks',
data: {
_token: csrf_token,
text: this.taskInput.text,
},
}).then(response => {
this.taskInput.text = '';
this.allTasks();
});
},
// remove the tasks
removeTask(id) {
axios.get('tasks/' + id).then((response) => {
this.allTasks();
});
},
finishTask(id) {
axios({
method: 'post',
url: 'tasks/done/' + id,
data: {
_token: csrf_token,
data: this.taskInput,
},
}).then(response => {
this.allTasks();
});
}
}
}
I know how i should do this with jquery but not with vue js, i hope this aint a to stupid question :D
You can bind css classes and styles, add a Boolean done property to your note object with default value of false, when you click the note change its done property to true. here is an example
new Vue({
el:"#app",
data:{
notes: [
{ text: "First note", done:false },
{ text: "Second note", done:false },
{ text: "Third note", done:false },
{ text: "Fourth note", done:false },
{ text: "Fifth note", done:false }
]
},
methods:{
finishNote(note){
// send your api request
// then update your note
note.done = true
}
}
})
.done{
background-color:green;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.min.js"></script>
<div id="app">
<ul>
<li v-for="note in notes" :class="{done:note.done}" #click="finishNote(note)">{{note.text}}</li>
</ul>
</div>
You can use the event argument. Which is automatically provided on your on click method.
onListClicked(event) {
event.target.className += " myClass";
}
Here I did a demo for you: https://jsfiddle.net/6wpbp70g/
I try to run TableTools but I have a problem.
Copy, CSV, Excel and PDF not work but print is ok.
I put into the sSwfPath : CDN 2.2.2
I have an console error :GET http://localhost/development/swf/copy_csv_xls_pdf.swf 404 (Not Found)
var tt = new $.fn.dataTable.TableTools( table, {
"dom": 'T<"clear">lfrtip',
"tableTools":
{
"sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "pdf",
"sButtonText": '<i class="fa fa-file-pdf-o"></i>',
"sPdfMessage": "Your custom message would go here."
},
{
"sExtends": "xls",
"sButtonText": '<i class="fa fa-file-excel-o"></i>'
},
{
"sExtends": "print",
"sButtonText": '<i class="fa fa-print"></i>'
}
]
}
} );
$( tt.fnContainer()).insertAfter('.header-link');
I don't understand my error.
Thanks