redactor attach keyUp callback after initiation - redactor

am trying to attach keyUp callback for redactor after initiation, the textarea is initiated with the following
$("#id_article-content").redactor({
"lang": "en",
"toolbarFixed": true,
"direction": "ltr",
"minHeight": 400,
"buttons": ["formatting", "|", "bold", "italic", "|", "orderedlist", "|", "link", "|", "horizontalrule"]
});
Problem is I cannot attach to the above my callback and I must do it after its has been ran, am trying to use the below code
$('#id_article-content').keyupCallback = function (e) {
console.log('ddd');
};
but that not working, would appreciate any help or pointers I can get on this?
Many thanks,

Check this:
$('#redactor').redactor({
keyupCallback: function(e)
{
console.log(this.get());
}
});
Documentation

just a quick guess, after looking at the API I think the code should look like this (untested):
$('#id_article-content').redactor({
keyupCallback: function (e) {
console.log('ddd');
});

You have to add callbacks on the initial setup of your redactor. If you try to do it afterward, in a separate call, it doesn't work.
$('#redactor).redactor({
buttons: ['formatting', '|', 'bold', 'italic', 'underline', 'deleted', '|', 'unorderedlist', 'orderedlist', 'outdent', 'indent', '|', 'horizontalrule'],
plugins: ['fontcolor'],
pastePlainText: true,
wym: true,
iframe: false,
focus: true,
keyupCallback: function (e) {
console.log(this.get());
}
});

Related

FullCalendar + React, can't made selection for day which contains allDay event

Have a strange issue with FullCalendar + React, I suspect that it might be a bug, but don't sure, maybe I do something wrong. When day contains allDay event, it isn't editable. When I remove this allDay event, everything works good.
The MVCE below and link to sandbox here: https://codesandbox.io/s/elated-leaf-eeq5mp?file=/src/DemoApp.jsx
const Sandbox = () => {
const events = [
{
"_id": "6392d844690474ce8cd8db01",
"startTime": "05:00:00",
"endTime": "11:00:00",
"frequency": 10,
"description": "testrrr",
"daysOfWeek": [
4
],
"_createdAt": "2022-12-09T06:40:04.085Z"
},
{
"_id": "63935c8a192093deab4bccd5",
"startTime": "01:30:00",
"endTime": "04:00:00",
"frequency": 1,
"description": "",
"daysOfWeek": [
4
],
"title": "Hello World!",
"_createdAt": "2022-12-09T16:04:26.123Z"
},
{
"title": "186",
"infoEvent": true,
"start": "2022-12-08T13:06:26.812Z",
"allDay": true,
"editable": false,
"daysOfWeek": [
"4"
]
}
];
const select = selectionInfo => {
console.log(selectionInfo);
}
return (
<FullCalendar
eventOverlap={false}
selectable
selectOverlap={false}
select={select}
contentHeight='auto'
aspectRatio={2}
plugins={[
dayGridPlugin,
interactionPlugin,
timegridPlugin
]}
headerToolbar={{
left: 'timeGridDay,timeGridWeek,dayGridMonth',
center: 'title'
}}
allDaySlot={true}
events={events}
editable
initialView="timeGridWeek"
/>
)
}
export default Sandbox;
UPDATE: Tried to reimplement with the plain FullCalendar, without React wrapper, and couldn't reproduce this error https://codepen.io/anatoly314/pen/ExRJRYz?editors=0010. Opened an issue at FullCalendar's github community: https://github.com/fullcalendar/fullcalendar-react/issues/212
It isn't a bug but a feature because I have allDay events and defined eventOverlap as false. Existed allDay event was blocked creating another event.
When I created MVCE for StackOverflow in vanilla JS I didn't use the property eventOverlap and this is a reason why it worked in my example above. When I tried to write my own React component for FullCalendar, I encountered the same behavior. And later, one of the contributors to FullCalendar confirmed this behavior: https://github.com/fullcalendar/fullcalendar-react/issues/212
So, If you need to disable overlap but keep allDay events you need to write your own logic in function rather than boolean, something like this:
const eventOverlap = (stillEvent, movingEvent) => {
return stillEvent.allDay;
}

Nuxt 3: Element (DOM) not found in onMounted() hook with route change

I am trying to access some DOM elements with the onMounted hook in Nuxt 3. This works perfectly on page reload.
But when I access the page through a nuxt route I am getting an "Element not found" warning in the console. And the gsap animation in this case is not working.
I am new to Nuxt 3, but to my understanding the DOM should be available at this point in the lifecycle?
onMounted(() => {
console.log(document.getElementsByClassName('introimage'))
// Header shrinking
$gsap.to('.introimage__image', {
scrollTrigger: {
trigger: '.introimage',
start: 'top 200px',
end: '300%',
// pin: true,
scrub: true,
reverse: true,
markers: false,
toggleActions: 'restart none none reverse',
},
height: '0',
duration: '3',
})
})
I had the same issue with gsap. The way it worked for me was to add:
definePageMeta({
pageTransition: {
mode: 'default',
},
});
Quick StackBlitz as example

Change background color based on event title Fullcalendar 4

I'm trying to change the background color of an event (in Day View) of fullcalendar v4. I've spent hours trying to implement eventRender, to no avail. This has led me to find other workarounds, but now, I'm striking out!
I'm trying to figure out the solution explained here: [Fullcalendar - change event color based on value ..
But, every time the search for the word 'yes' is TRUE, I get an error in chrome console saying 'Failure parsing JSON'. If I change the search query to something that will create 'false', I do not get this error. To me, this means that the search is working, but the event render function is failing somehow.
my code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceDayGrid', 'resourceTimeGrid' ],
defaultView: 'resourceTimeGridDay',
defaultDate: '<?php echo $startdate?>',
validRange: {
start: '<?php echo $startdate?>',
end: '<?php echo $maxdaycal?>'
},
height: 700,
...
...
eventSources: [
{
url: 'getevents2.php?festid=<?php echo $festid?>&room=<?php echo $roomabv?>',
cache: false,
},
{
url: 'getbreaks2.php?festid=<?php echo $festid?>&room=<?php echo $roomabv?>',
cache: false,
color: 'grey',
editable: false,
}
],
eventRender: function(info) {
if(info.event.extendedProps.desc == "yes") {
element.style.css('background-color', '#000');
}
},
....
});
calendar.render();
});
My goal: Search for the word "Accomp" in the title of the element (probably in info.event.title) .. and have the background change to a different color .. like red .. or something.
I've also tried to show an Icon in this field if the word Accomp is present, but -- I had to show it in a modal, because I couldnt get eventrender to show html.
I think this is because of the differences in FC v4 .. but I'm not sure.
I've also tried: [Is it possible to assign the background colour of a FullCalendar event based on its title? .. but I couldn't get that sorted out either.
UPDATE: The search function is working, as I can see it in the console log, but whenever I try to set the css, the calendar does not render.
eventRender: function(info) {
console.log(info.event.title);
if(-1 != info.event.title.indexOf("Accomp")) {
console.log(info.event.title);
fc-title.css('background-color', '#000');
}
},
This is based on some other answers that areavailable, but it appears that there are differences in FC4... This works for me!
eventRender: function(info) {
if(-1 != info.event.title.indexOf("Accomp")) {
info.el.style.backgroundColor = "red";
}
},

jQuery dataTables sDom positioning

Please refer to the following image:
I'm trying to move the tableTools buttons (Copy, Excel, CSV) down a little bit so that it looks like the buttons are at the same level as the Search Box... I've tried all kinds of sDom parameters without success.
Here's my current initialisation code:
$(document).ready(function () {
$('#myTable').dataTable({
"bSort": false,
"bPaginate": false,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "../../Scripts/swf/copy_csv_xls.swf",
"aButtons": ["copy",
{
"sExtends": "xls",
"sButtonText": "Excel",
"sFileName": "*.xls"
},
"csv"]
}
});
});
Just removed tableTools positioning... and it is working now.

ExtJS4 grid grouping header renderer - How to specify?

Anyone know how to attach a renderer to a grid grouping header in ExtJS4? In ExtJS3 I have the following working code, which returns 'Past' if an event has been completed ('Y'), or 'Upcoming' if not completed:
function fmt_group_heading(groupVal) {
if (groupVal === 'Y') {
return 'Past';
} else {
return 'Upcoming';
}
}
// create the Grid
var fitGrid = new Ext.grid.GridPanel({
store: fitGroupingStore,
columns: [
{header: "ID", dataIndex: 'id', hidden: true },
{header: 'Event', width:320, dataIndex: 'event',
renderer:fmt_event_description},
{header: 'Events', dataIndex: 'completed', hidden: true,
renderer: fmt_group_heading }
],
stripeRows: true,
// config options for stateful behavior
stateful: true,
stateId: 'grid',
hideHeaders: true,
view: new Ext.grid.GroupingView({
groupRenderer: 'completed',
forceFit: true
})
});
ExtJS4 provides grid grouping but I'm not understanding how to change the output of the group text. The 'groupHeaderTpl' attribute of Ext.grid.feature.Grouping seems to only take the raw field value as read from the store.
this.groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {completed}'
});
// create the Grid
this.fitnessGrid = new Ext.grid.Panel({
store: this.fitnessEventStore,
features: [this.groupingFeature],
// etc.......
try smth like this:
groupHeaderTpl:
'{[fmt_group_heading(values.name)]}
({rows.length}
Item{[values.rows.length > 1 ? "s" :
""]})'
The groupHeaderTpl requires you to use {name} when composing the template. It will only use the value provided by the groupField.
See the Docs.
Try this:
groupHeaderTpl: '{[values.rows[0].completed]}'

Resources