Project

General

Profile

Download (6.56 KB)

Feature #31300 » replace_jquery_mobile_with_flatpickr_demo.patch

Marius BĂLTEANU, 2019-05-05 13:27

View differences:

app/helpers/application_helper.rb
1385 1385 

  		




  1386
  1386
  
    
  def calendar_for(field_id)

  		




  1387
  1387
  
    
    include_calendar_headers_tags

  		




  1388
  
  
    
    javascript_tag("$(function() { $('##{field_id}').addClass('date').datepickerFallback(datepickerOptions); });")

  		




  
  1388
  
    
    javascript_tag("$(function() { $('##{field_id}').addClass('date').datepicker(datepickerOptions); });")

  		




  1389
  1389
  
    
  end

  		




  1390
  1390
  
    

  		




  1391
  1391
  
    
  def include_calendar_headers_tags

  		




  ......




  1395
  1395
  
    
      content_for :header_tags do

  		




  1396
  1396
  
    
        start_of_week = Setting.start_of_week

  		




  1397
  1397
  
    
        start_of_week = l(:general_first_day_of_week, :default => '1') if start_of_week.blank?

  		




  1398
  
  
    
        # Redmine uses 1..7 (monday..sunday) in settings and locales

  		




  1399
  
  
    
        # JQuery uses 0..6 (sunday..saturday), 7 needs to be changed to 0

  		




  1400
  
  
    
        start_of_week = start_of_week.to_i % 7

  		




  1401
  1398
  
    
        tags << javascript_tag(

  		




  1402
  
  
    
                   "var datepickerOptions={dateFormat: 'yy-mm-dd', firstDay: #{start_of_week}, " +

  		




  1403
  
  
    
                     "showOn: 'button', buttonImageOnly: true, buttonImage: '" +

  		




  1404
  
  
    
                     path_to_image('/images/calendar.png') +

  		




  1405
  
  
    
                     "', showButtonPanel: true, showWeek: true, showOtherMonths: true, " +

  		




  1406
  
  
    
                     "selectOtherMonths: true, changeMonth: true, changeYear: true, " +

  		




  1407
  
  
    
                     "beforeShow: beforeShowDatePicker};")

  		




  
  1399
  
    
                   "var datepickerOptions={dateFormat: 'Y-m-d', " +

  		




  
  1400
  
    
                   "'locale' : {'firstDayOfWeek' : #{start_of_week}}, " +

  		




  
  1401
  
    
                   "beforeShow: beforeShowDatePicker};")

  		




  1408
  1402
  
    
        jquery_locale = l('jquery.locale', :default => current_language.to_s)

  		




  1409
  1403
  
    
        unless jquery_locale == 'en'

  		




  1410
  1404
  
    
          tags << javascript_include_tag("i18n/datepicker-#{jquery_locale}.js")

  		












  

    
      app/views/layouts/base.html.erb
    
  





  9
  9
  
    
<meta name="keywords" content="issue,bug,tracker" />

  		




  10
  10
  
    
<%= csrf_meta_tag %>

  		




  11
  11
  
    
<%= favicon %>

  		




  
  12
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

  		




  12
  13
  
    
<%= stylesheet_link_tag 'jquery/jquery-ui-1.11.0', 'application', 'responsive', :media => 'all' %>

  		




  13
  14
  
    
<%= stylesheet_link_tag 'rtl', :media => 'all' if l(:direction) == 'rtl' %>

  		




  14
  15
  
    
<%= javascript_heads %>

  		




  
  16
  
    
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

  		




  15
  17
  
    
<%= heads_for_theme %>

  		




  16
  18
  
    
<%= call_hook :view_layouts_base_html_head %>

  		




  17
  19
  
    
<!-- page specific tags -->

  		












  

    
      public/javascripts/application.js
    
  





  213
  213
  
    
      ' <span style="display:none;"><input type="date" name="v['+field+'][]" id="values_'+fieldId+'_2" size="10" class="value date_value" /></span>' +

  		




  214
  214
  
    
      ' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="3" class="value" /> '+labelDayPlural+'</span>'

  		




  215
  215
  
    
    );

  		




  216
  
  
    
    $('#values_'+fieldId+'_1').val(values[0]).datepickerFallback(datepickerOptions);

  		




  217
  
  
    
    $('#values_'+fieldId+'_2').val(values[1]).datepickerFallback(datepickerOptions);

  		




  
  216
  
    
    $('#values_'+fieldId+'_1').val(values[0]).datepicker(datepickerOptions);

  		




  
  217
  
    
    $('#values_'+fieldId+'_2').val(values[1]).datepicker(datepickerOptions);

  		




  218
  218
  
    
    $('#values_'+fieldId).val(values[0]);

  		




  219
  219
  
    
    break;

  		




  220
  220
  
    
  case "string":

  		




  ......




  678
  678
  
    
      }

  		




  679
  679
  
    
      break;

  		




  680
  680
  
    
  }

  		




  681
  
  
    
  $(input).datepickerFallback("option", "defaultDate", default_date);

  		




  
  681
  
    
  $(input).datepicker("option", "defaultDate", default_date);

  		




  682
  682
  
    
}

  		




  683
  683
  
    

  		




  684
  684
  
    
(function($){

  		




  ......




  838
  838
  
    
}

  		




  839
  839
  
    

  		




  840
  840
  
    
(function ( $ ) {

  		




  841
  
  
    

  		




  842
  
  
    
  // detect if native date input is supported

  		




  843
  
  
    
  var nativeDateInputSupported = true;

  		




  844
  
  
    

  		




  845
  
  
    
  var input = document.createElement('input');

  		




  846
  
  
    
  input.setAttribute('type','date');

  		




  847
  
  
    
  if (input.type === 'text') {

  		




  848
  
  
    
    nativeDateInputSupported = false;

  		




  849
  
  
    
  }

  		




  850
  
  
    

  		




  851
  
  
    
  var notADateValue = 'not-a-date';

  		




  852
  
  
    
  input.setAttribute('value', notADateValue);

  		




  853
  
  
    
  if (input.value === notADateValue) {

  		




  854
  
  
    
    nativeDateInputSupported = false;

  		




  855
  
  
    
  }

  		




  856
  
  
    

  		




  857
  
  
    
  $.fn.datepickerFallback = function( options ) {

  		




  858
  
  
    
    if (nativeDateInputSupported) {

  		




  859
  
  
    
      return this;

  		




  860
  
  
    
    } else {

  		




  861
  
  
    
      return this.datepicker( options );

  		




  862
  
  
    
    }

  		




  
  841
  
    
  $.fn.datepicker = function( options ) {

  		




  
  842
  
    
      return this.flatpickr( options );

  		




  863
  843
  
    
  };

  		




  864
  844
  
    
}( jQuery ));

  		




  865
  845
  
    

  		












  

    
      public/stylesheets/application.css
    
  





  1504
  1504
  
    
.ui-menu .ui-menu-item:hover {font-weight:normal; color:#555; background:#759FCF; color:#fff !important; border:1px solid #759FCF;}

  		




  1505
  1505
  
    
.ui-menu .ui-menu-item.ui-state-focus {font-weight:normal; color:#555; border-color:#759FCF;}

  		




  1506
  1506
  
    

  		




  
  1507
  
    
/* Custom flatpickr styles */

  		




  
  1508
  
    

  		




  
  1509
  
    
/* Colors */

  		




  
  1510
  
    
.flatpickr-months .flatpickr-month,

  		




  
  1511
  
    
.flatpickr-weekdays, span.flatpickr-weekday,

  		




  
  1512
  
    
.flatpickr-day.selected,

  		




  
  1513
  
    
.flatpickr-day.startRange,

  		




  
  1514
  
    
.flatpickr-day.endRange,

  		




  
  1515
  
    
.flatpickr-day.selected.inRange,

  		




  
  1516
  
    
.flatpickr-day.startRange.inRange,

  		




  
  1517
  
    
.flatpickr-day.endRange.inRange,

  		




  
  1518
  
    
.flatpickr-day.selected:focus,

  		




  
  1519
  
    
.flatpickr-day.startRange:focus,

  		




  
  1520
  
    
.flatpickr-day.endRange:focus,

  		




  
  1521
  
    
.flatpickr-day.selected:hover,

  		




  
  1522
  
    
.flatpickr-day.startRange:hover,

  		




  
  1523
  
    
.flatpickr-day.endRange:hover,

  		




  
  1524
  
    
.flatpickr-day.selected.prevMonthDay,

  		




  
  1525
  
    
.flatpickr-day.startRange.prevMonthDay,

  		




  
  1526
  
    
.flatpickr-day.endRange.prevMonthDay,

  		




  
  1527
  
    
.flatpickr-day.selected.nextMonthDay,

  		




  
  1528
  
    
.flatpickr-day.startRange.nextMonthDay,

  		




  
  1529
  
    
.flatpickr-day.endRange.nextMonthDay {

  		




  
  1530
  
    
  background: #628DB6;

  		




  
  1531
  
    
  color: #fff;

  		




  
  1532
  
    
}

  		




  
  1533
  
    
.flatpickr-months .flatpickr-prev-month svg,

  		




  
  1534
  
    
.flatpickr-months .flatpickr-next-month svg {

  		




  
  1535
  
    
  fill: #fff;

  		




  
  1536
  
    
}

  		




  
  1537
  
    

  		




  
  1538
  
    
/* Font sizes */

  		




  
  1539
  
    
.flatpickr-day, span.flatpickr-weekday {

  		




  
  1540
  
    
  font-size: 0.8em;

  		




  
  1541
  
    
}

  		




  
  1542
  
    
.flatpickr-current-month {

  		




  
  1543
  
    
  font-size: 1em;

  		




  
  1544
  
    
}

  		




  
  1545
  
    

  		




  
  1546
  
    
/* Calendar size */

  		




  
  1547
  
    
/*pixel square for each day - default is 39 */

  		




  
  1548
  
    
.flatpickr-calendar {

  		




  
  1549
  
    
  width: 224px;

  		




  
  1550
  
    
}

  		




  
  1551
  
    
.dayContainer {

  		




  
  1552
  
    
  width: 224px;

  		




  
  1553
  
    
  min-width: 224px;

  		




  
  1554
  
    
  max-width: 224px;

  		




  
  1555
  
    
}

  		




  
  1556
  
    
.flatpickr-days {

  		




  
  1557
  
    
  width: 224px;

  		




  
  1558
  
    
}

  		




  
  1559
  
    
.flatpickr-day {

  		




  
  1560
  
    
  max-width: 32px;

  		




  
  1561
  
    
  height: 32px;

  		




  
  1562
  
    
  line-height: 32px;

  		




  
  1563
  
    
}

  		




  
  1564
  
    

  		




  1507
  1565
  
    
/************* Rouge styles *************/

  		




  1508
  1566
  
    
/* generated by: pygmentize -f html -a .syntaxhl -S colorful */

  		




  1509
  1567
  
    
.syntaxhl .hll { background-color: #ffffcc }

  		















  (1-1/4)