We Keep Coding

How to customize Storybook's UI?

I'm trying to customize the way Storybook's UI looks and behaves, by customizing a manager.js file placed into the /.storybook folder, following their documentation :
// .storybook/manager.js
import { addons } from '#storybook/addons';
addons.setConfig({
isFullscreen: false,
showNav: true,
showPanel: true,
panelPosition: 'bottom',
enableShortcuts: true,
showToolbar: true,
theme: undefined,
selectedPanel: undefined,
initialActive: 'sidebar',
sidebar: {
showRoots: false,
collapsedRoots: ['other'],
},
toolbar: {
title: { hidden: false },
zoom: { hidden: false },
eject: { hidden: false },
copy: { hidden: false },
fullscreen: { hidden: false },
},
});
I'm changing some parameters, nothing changes on the UI. I even tried setting the theme to dark for it to be obvious, nothing happens. The server refreshes correctly, I even tried to restart it.
I'm running Storybook 6.5.14 on localhost in a react app, the dependencies "#storybook/theming": "^6.5.15" and "#storybook/addons": "^6.4.22" are installed.

Enabling touchdrag for mobile devices or Refreshing owl carousel in angular

I am trying to enable touchdrag and mousedrag only for mobile devices.
customOptions: OwlOptions = {
loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navText: ['', ''],
items: 4,
responsive: {
0: {
touchDrag: true,
mouseDrag: true
},
768: {
touchDrag: false,
mouseDrag: false
}
},
nav: true
}
Somewhere I read, carousel should be refreshed for changes to happen when resized. But everywhere they used jquery
$('owl-carousel').trigger('refresh.owl.carousel')
But I want to do it without using jquery as I am using owl-carousel-o tag and also owloptions. If there is some other way also please suggest.

The docs already provides a solution for you.
Here I chose "initialized" event to change the options. Despite the name, it seemed to fire more than 1 time. So I put a flag there to make it run only once. Below is the link of working demo with Angular 14.
https://stackblitz.com/edit/angular-ivy-uznbfk?file=src/app/hello.component.ts

I used a hostlistener when the screen resizes and assigned the values in there to change. It is working fine now.
#HostListener('window:resize', ['$event'])
checkScreenSize(event?) {
this.isDesktop = window.innerWidth >= 768 ? true : false;
if (this.isDesktop) {
this.customOptions.touchDrag = false;
this.customOptions.mouseDrag = false;
}
else {
this.customOptions.touchDrag = true;
this.customOptions.mouseDrag = true;
}
}
customOptions: OwlOptions = {
margin: 10,
stagePadding: 10,
loop: false,
dots: false,
navSpeed: 600,
navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>", "<i class='fa fa-angle-right' aria-hidden='true'></i>"],
nav: true,
responsive: {
0: {
items: 4
}
}
}

How to make jqgrid scroll to top when going to next page?

I have a grid that when the page is changed the scrollbar is still at the bottom of the grid. Is there a property in the jqgrid for it to automatically scroll back to the top of the grid.
Here are the properties for my grid:
options = {
datatype: 'local',
colModel: [],
colNames: [],
height: 'auto',
autowidth: true,
forceFit: true,
shrinkToFit: typeof(settings.shrink) != "undefined" ? false : true,
gridview: true,
recordpos: 'left',
scroll: false,
viewrecords: true,
hoverrows: false,
loadonce: true,
toppager: 'pager',
pagerpos: 'right',
pginput: false
}

After some more reasearch I found the answer. JQGrid also has a pagerOptions.onPaging event which allows you to execute code when changing pages.
Here is the fix I used.
pagerOptions.onPaging = function () {
window.scrollTo(0, $("#header").height());
};
When the page changes it scrolls the page up until the header.

How to rewrite this datepicker code?

I use this library and I have some JS code for initialization:
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('#datetimepicker3').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('#datetimepicker4').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
$('#datetimepicker5').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
});
I don't like it because if I have 10 more elements I will have 50 more strings of repeated code, so the thing I wanna do is this:
var DateTimePicker = {
constructor: function(id, language, maskInput,pickTime,pickSeconds,pick12HourFormat){
this.language = language;
this.maskInput = maskInput;
this.pickTime = pickTime;
this.pickSeconds = pickSeconds;
this.pick12HourFormat = pick12HourFormat;
this.id = id;
return this;
},
initialization: function() {
document.getElementById(this.id).datetimepicker({
language: this.language,
maskInput: this.maskInput,
pickTime: this.pickTime,
pickSeconds: this.pickSeconds,
pick12HourFormat: this.pick12HourFormat
});
}
};
var firstDatepicker, secondDatepicker, firstTimepicker, secondTimepicker;
firstDatepicker = Object.create(DateTimePicker).constructor('#datetimepicker2','en', true, false, false, false);
secondDatepicker = Object.create(DateTimePicker).constructor('#datetimepicker3','en', true, false, false, false);
firstTimepicker = Object.create(DateTimePicker).constructor('#datetimepicker4','en', true, true, false, true);
secondTimepicker = Object.create(DateTimePicker).constructor('#datetimepicker5','en', true, true, false, true);
firstDatepicker.initialization();
secondDatepicker.initialization();
firstTimepicker.initialization();
secondTimepicker.initialization();
This gives me an error:
Uncaught TypeError: Cannot read property 'datetimepicker' of null
So I think I am trying to do something really weird. I suspect that datetimepicker is an object which I am trying to manipulate incorrectly. Could you please help me with this, I am just learning JS.

The error you get is because you're calling datetimepicker() on a DOMElement. Use $(this.id).datetimepicker() instead.
That being said, I would argue that your 'simplified' version is actually more complex and difficult to maintain.
If you look at the settings you're using you only really have two different settings; those with pickSeconds and pick12HourFormat and those without. As such you could just use two classes by placing the relevant one on the required datepicker. Try this:
$(function() {
$('.simple-datepicker').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('.adv-datepicker').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
});
Obviously the class names can be adjusted as you require, but you can now use the above code for an infinite number of datepickers in your page, so long as they have the right class added to them.

jQuery jqGrid Inline Editing - Cancel row edit deletes the row?

I actual got a problem with my jqGrid and I couldn't find any similar problem on the net. Maybe I don't took the write tags for it, sorry tho.
Okay lets start talking about the real problem. I'm using inline editing, and I customized the buttons a bit. I wanna use "ENTER" and "ESC"-Keys as shortcuts. This works fine. I'm manipulating the data in my grid local and only if the user is pressing a specialised button I'll save the data in a file. This files are used to fill the grid too. So if the user now is editing any row in the grid which isn't in my file yet, and he is canceling the editing by pressing ESC, the complete row of data is getting deleted.
Anyone who can help me out? My grid:
// Table
jQuery("#tbl").tableDnD({scrollAmount:0});
jQuery("#tbl").jqGrid({
url:'../path/to/my/script.pl',
datatype: "json",
postData:{'art':'empfang'},
jsonReader: {
repeatitems: false
},
colNames:['1','2','3','4','5'],
colModel:
[
{name:'1',index:'1', width:200, align:"left", sortable:true,editable:true, edittype:"text"},
{name:'2',index:'2', width:200, align:"left", sortable:true,editable:true, edittype:"select",editoptions:{value:b}},
{name:'3',index:'3', width:200, align:"left", sortable:true,editable:true, edittype:"text"},
{name:'4',index:'4', width:220, align:"left", sortable:true,editable:true, edittype:"select",editoptions:{value:""}},
{name:'5',index:'5', width:200, align:"left",sortable:true,editable:true, edittype:"select",editoptions:{value:""}}
],
rowNum:2000,
rowTotal: 2000,
loadtext: 'Reading data...',
height: '100%',
width: '100%',
hidegrid: false,
sortable: true,
toppager: true,
gridview: true,
viewrecords: true,
rownumbers: true,
loadonce: true,
editurl: 'dummy.php',
pager: '#tbl_toppager',
loadComplete: function(data){
$("#tbl").setColProp('4', { editoptions: { value: data.userdata.4} });
$("#tbl").setColProp('5', { editoptions: { value: data.userdata.directory_listing} });
},
gridComplete: function() {
$("#_empty","#tbl").addClass("nodrag nodrop");
jQuery("#tbl").tableDnDUpdate();
},
caption: "Testgrid",
ondblClickRow: function(id){
jQuery('#tbl').editRow(id, true);
}
});
jQuery("#tbl").jqGrid('filterToolbar');
jQuery("#tbl").jqGrid(
'navGrid',
'#tbl_toppager',
{
del: true,
add: false,
edit: false,
refresh: false,
search: true
},
{
}, // edit options
{
}, // add options
{
reloadAfterSubmit: false,
jqModal: true,
closeOnEscape: true
}, // del options
{
jqModal: true,
closeOnEscape: true
} // search options
);
jQuery("#tbl").jqGrid(
'inlineNav',
'#tbl_toppager',
{
editParams: { keys: true },
addParams: { addRowParams: { keys: true } }
}
); // Inline Editing
jQuery("#tbl_toppager_right").hide();
jQuery("#tbl_toppager_center").hide();
jQuery("#tbl").navSeparatorAdd(
"#tbl_toppager_left",
{
sepclass : "ui-separator",
sepcontent:""
}
).jqGrid(
'navButtonAdd',
'#tbl_toppager_left',
{
caption: "",
buttonicon: "ui-icon-document",
title: "Save data in file",
position: "last",
onClickButton: function () {
$("#write_file").dialog('open');
}
}
);
Thanks in advice. Regards.

In the official demo of JQGrid they provide an example which do nearly the same of what you request
...
onSelectRow: function(id){
if(id && id!==lastsel){
jQuery('#rowed3').jqGrid('restoreRow',lastsel);
jQuery('#rowed3').jqGrid('editRow',id,true);
lastsel=id;
}
}
...
where lastsel is a global variable
So you can use jQuery('#rowed3').jqGrid('restoreRow',idOfLineToRestore);
in your escape event