kalipso/racalmas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

jquery-ui: replace datetime-picker by flatpickr

Browse Source
This commit is contained in:
Milan
2021-03-13 17:09:48 +01:00
parent 978673bf3f
commit cd8c69f602
17 changed files with 65 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
website/agenda/planung/calendar.cgi
View File

@@ -103,16 +103,14 @@ if (
template::process( $config, 'print', template::check( $config, 'default.html' ),
$headerParams );
print q{
<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/calendar.css" type="text/css" />
<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/flatpickr.min.css" type="text/css" />
<script src="js/flatpickr.js" type="text/javascript"></script>
<script src="js/calendar.js" type="text/javascript"></script>
<script src="js/datetime.js" type="text/javascript"></script>
};
if ( $params->{list} eq '1' ) {
print q{
<!--<link href="css/theme.default.css" rel="stylesheet">-->
<script src="js/jquery.tablesorter.min.js"></script>
<style>#content{ top:5rem; position:relative; }</style>
};
@@ -1299,8 +1297,8 @@ sub addCalendarButton {
#add calendar button
my $content = qq{
<div id="previous_month"><a id="previous">&laquo;</a></div>
<div id="selectDate">
<input id="start_date"/>
<div id="selectDate" data-toggle>
<input id="start_date" data-input/>
<div id="current_date">$calendar->{month} $calendar->{year}</div>
</div>
<div id="next_month"><a id="next">&raquo;</a></div>

5
website/agenda/planung/css/default.css
View File

@@ -673,6 +673,11 @@ ul.tabContainer li:last-child{
border-top-right-radius:0.5rem;
}
#content .editor input.datetimepicker{
padding-left:0;
padding-right:0;
}
#content #dialog{
position:absolute;
z-index:1000;

13
website/agenda/planung/css/flatpickr.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

52
website/agenda/planung/css/jquery-ui-timepicker.css
View File

@@ -1,52 +0,0 @@
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
/* customizations */
.ui-corner-all,
.ui-datepicker-div,
.ui-datepicker-header,
.ui-datepicker-header select{
border-radius:0!important;
border:0;
}
.ui-datepicker-header select{
padding:6px;
}
.ui-datepicker td span,
.ui-datepicker td a{
padding:6px;
border:0;
}
.ui-datepicker .ui-state-default{
border:0;
}

42
website/agenda/planung/js/calendar.js
View File

@@ -299,7 +299,7 @@ function getNearestDatetime(){
}
}
);
return date+" "+hour+":"+minute+ " ";
return date+" "+hour+":"+minute+ ":00";
}
var mouseX=0;
@@ -375,19 +375,16 @@ function show_schedule_series_dialog(project_id, studio_id, series_id, start_dat
function setDatePicker(){
initRegions(region);
registerDatePicker(
'#start_date', {
showWeek: true,
onSelect : function(dateText, inst) {
var url=setUrlParameter(window.location.href,'date',dateText);
loadCalendar(url);
}
var datePicker=showDatePicker('#selectDate', {
wrap:true,
onSelect : function(dates, inst) {
var date = dates[0];
var url = setUrlParameter(window.location.href, 'date', formatDate(date));
loadCalendar(url);
}
);
var date=getUrlParameter("date");
$('#start_date').datepicker("setDate", date);
});
datePicker.setDate(parseDateTime(getUrlParameter("date")));
$('#selectDate').on('click', () => datePicker.toggle() );
}
// add name=value to current url
@@ -431,16 +428,6 @@ function initTodayButton(){
return true;
}
function initSelectDate(){
$('#selectDate').on('click', function(){
if($('#ui-datepicker-div').css("display")=="block"){
$('#start_date').datepicker("hide");
}else{
$('#start_date').datepicker("show");
}
});
}
function initCalendarMenu(){
//add filters to header
var html='';
@@ -459,7 +446,6 @@ function initCalendarMenu(){
setFilter();
setDatePicker();
initTodayButton();
initSelectDate();
resizeCalendarMenu();
}
@@ -889,9 +875,13 @@ function handleGrid(id){
if (project_id<0) return;
if (studio_id<0) return;
var start_date=getNearestDatetime();
var start_date = getNearestDatetime();
$('#series_date').attr('value',start_date);
showDateTimePicker('#series_date');
var date=parseDateTime(start_date);
showDateTimePicker('#series_date', {
date: start_date
});
show_schedule_series_dialog(project_id, studio_id, series_id, start_date);
}

133
website/agenda/planung/js/datetime.js
View File

@@ -1,119 +1,27 @@
// wrapper for date time picker with callback function
function showDateTimePicker(selector, options){
$(selector).each( function(){
// init on first select
$(this).on('click', function(){
if ($(this).hasClass("hasDatepicker")) return;
var defaultOptions={
dateFormat: "yy-mm-dd",
timeFormat: "HH:mm",
stepMinute: 5,
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showWeek: true,
}
//recursively merge options
$.extend(true, defaultOptions, options);
$(this).datetimepicker(defaultOptions);
// set date and time from input field
var datetime=$(this).attr('value');
if ((datetime != null) && (datetime != "")){
var datetime=parseDateTime(datetime);
$(this).datetimepicker('setDate', datetime);
$(this).datetimepicker('setTime', datetime);
}
if((region !=null) && (region !='' ) && (region != 'en')){
$(this).datetimepicker( $.timepicker.regional[ region+"" ] );
}
//show if has been initialized on first click
$(this).focus();
});
});
var defaults = {
locale: { firstDayOfWeek: 1 },
enableTime: true,
time_24hr: true
}
if (options){
if (options["onSelect"]) defaults["onChange"] = options["onSelect"];
if (options["onChange"]) defaults["onChange"] = options["onChange"];
}
var elem = $(selector).flatpickr(defaults);
if (options && options.date) elem.setDate(options.date);
}
// show date picker on first select with callback function
function showDatePicker(selector, options){
$(selector).each( function(){
// init on first select
var activator=$(this);
if ((options!=null)&&(options.activator!=null)) activator=$(options.activator);
activator.on('click', function(){
if ($(this).hasClass("hasDatepicker")) return;
var defaultOptions={
dateFormat: "yy-mm-dd",
timeFormat: "HH:mm",
showTimePicker: false,
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showWeek: true,
}
//recursively merge options
$.extend(true, defaultOptions, options);
$(this).datepicker(defaultOptions);
// set date from input field
var datetime=$(this).attr('value');
if ((datetime != null) && (datetime != "")){
$(this).datepicker('setDate', datetime);
}
if((region !=null) && (region !='' ) && (region != 'en')){
$(this).datepicker( $.datepicker.regional[ region+"" ] );
}
//show if has been initialized on first click
$(this).focus();
});
});
}
// date picker with direct registration
function registerDatePicker(selector, options){
$(selector).each( function(){
var defaultOptions={
dateFormat: "yy-mm-dd",
timeFormat: "HH:mm",
showTimePicker: false,
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showWeek: true,
}
//recursively merge options
$.extend(true, defaultOptions, options);
$(this).datepicker(defaultOptions);
// set date from input field
var datetime=$(this).attr('value');
if ((datetime != null) && (datetime != "")){
$(this).datepicker('setDate', datetime);
}
if((region !=null) && (region !='' ) && (region != 'en')){
$(this).datepicker( $.datepicker.regional[ region+"" ] );
}
//show if has been initialized on first click
$(this).focus();
});
var defaults = {
locale: { firstDayOfWeek: 1 },
}
if (options){
if (options["onSelect"]) defaults["onChange"] = options["onSelect"];
if (options["onChange"]) defaults["onChange"] = options["onChange"];
if (options["wrap"]) defaults["wrap"] = options["wrap"];
}
return $(selector).flatpickr(defaults);
}
function showYearPicker(selector, options){
@@ -221,7 +129,6 @@ function getWeekday(date){
if (loc['weekday_Fr']!=null) weekdays[4]=loc['weekday_Fr'];
if (loc['weekday_Sa']!=null) weekdays[5]=loc['weekday_Sa'];
if (loc['weekday_Su']!=null) weekdays[6]=loc['weekday_Su'];
//console.log(weekdays);
return weekdays[(date.getDay()-1+7)%7]+','
}

2
website/agenda/planung/js/flatpickr.js Normal file
View File

File diff suppressed because one or more lines are too long

5
website/agenda/planung/js/jquery-ui-timepicker.js vendored
View File

File diff suppressed because one or more lines are too long

2
website/agenda/planung/studio-timeslots.cgi
View File

@@ -71,8 +71,6 @@ if ( $action eq 'show_dates' ) {
print "Content-Type:text/html\n\n";
} else {
print q{
<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" />
<link href="css/theme.default.css" rel="stylesheet">
<script src="js/jquery.tablesorter.min.js"></script>

5
website/agenda/planung/templates/assignments.html
View File

@@ -1,12 +1,7 @@
<TMPL_IF .allow.scan_series_events>
<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
<script src="js/jquery.autosize.min.js" type="text/javascript"></script>
<link href="css/theme.default.css" rel="stylesheet">
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/image.js" type="text/javascript"></script>
<script>
var event_id='<TMPL_VAR event_id>';

11
website/agenda/planung/templates/comments.html
View File

@@ -4,14 +4,6 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><TMPL_VAR .doc.title></title>
<link type="text/css" href="css/comment.css" rel="stylesheet"/>
<!--
<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
<script src="js/series.js" type="text/javascript"></script>
<script src="js/edit-event.js" type="text/javascript"></script>
<script src="js/image.js" type="text/javascript"></script>
-->
<script src="js/jquery.autosize.min.js" type="text/javascript"></script>
<script src="js/comment.js" type="text/javascript"></script>
<script src="js/page-leave-handler.js" type="text/javascript"></script>
@@ -28,9 +20,6 @@
);
</TMPL_IF>
</script>
<style>
</style>
</head>
<body>

5
website/agenda/planung/templates/edit-event.html
View File

@@ -6,11 +6,10 @@
<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" />
<link href="css/event.css" type="text/css" rel="stylesheet"/>
<link type="text/css" href="css/comment.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/flatpickr.min.css" type="text/css" />
<!-- for edit series-->
<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
<script src="js/jquery.autosize.min.js" type="text/javascript"></script>
<script src="js/flatpickr.js" type="text/javascript"></script>
<script src="js/series.js" type="text/javascript"></script>
<script src="js/edit-event.js" type="text/javascript"></script>
<script src="js/image.js" type="text/javascript"></script>

6
website/agenda/planung/templates/edit-series.html
View File

@@ -1,13 +1,7 @@
<TMPL_IF .allow.read_series>
<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
<script src="js/jquery.autosize.min.js" type="text/javascript"></script>
<link href="css/theme.default.css" rel="stylesheet">
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/image.js" type="text/javascript"></script>
<script>
var region='<TMPL_VAR loc.region>';

4
website/agenda/planung/templates/edit-work-time.html
View File

@@ -1,13 +1,9 @@
<TMPL_IF .allow.read_series>
<script src="js/datetime.js" type="text/javascript"></script>
<!-- <script src="js/localization.js" type="text/javascript"></script> -->
<link rel="stylesheet" href="css/work-time.css" type="text/css" />
<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
<script src="js/jquery.autosize.min.js" type="text/javascript"></script>
<link href="css/theme.default.css" rel="stylesheet">
<script src="js/jquery.tablesorter.min.js"></script>

5
website/agenda/planung/templates/header-head.html
View File

@@ -2,11 +2,12 @@
var event_manager=0;
</script>
<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="css/default.css" type="text/css" />
<link rel="stylesheet" href="css/flatpickr.min.css" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/flatpickr.js" type="text/javascript"></script>
<script src="js/default.js" type="text/javascript"></script>
<script src="js/history.js" type="text/javascript"></script>
<script src="js/localization.js" type="text/javascript"></script>

3
website/agenda/planung/templates/projects.html
View File

@@ -1,5 +1,3 @@
<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
<script src="js/image.js" type="text/javascript"></script>
<script type="text/javascript">
@@ -11,7 +9,6 @@
<TMPL_IF .allow.create_project>
<div style="clear:both" class="newproject">
<button onclick="add_project('<TMPL_VAR name>')"><TMPL_VAR .loc.button_add_project></button><br/>
<div id="edit_new" class="panel project editor" style="clear:both;display:none">
<form method="post">
<input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">

5
website/agenda/planung/templates/show-playout.html
View File

@@ -1,11 +1,6 @@
<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
<script src="js/jquery.autosize.min.js" type="text/javascript"></script>
<link href="css/theme.default.css" rel="stylesheet">
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/image.js" type="text/javascript"></script>
<table id="playout-table" class="table">