Start towards global week via alpine

fantasycalendar · Jul 20, 2024 · e09b653 · e09b653
1 parent ead3fe3
commit e09b653
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     },
     "dependencies": {
         "@alpinejs/intersect": "^3.10.5",
+        "@alpinejs/sort": "^3.14.1",
         "@floating-ui/dom": "^1.6.7",
         "@fortawesome/fontawesome-free": "^5.15.4",
         "@tailwindcss/aspect-ratio": "^0.4.2",

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -231,6 +231,9 @@ window.render_data_generator = render_data_generator;
 $(() => header_initialize());
 
 import Alpine from 'alpinejs'
+import sort from '@alpinejs/sort';
+Alpine.plugin(sort);
+
 import CalendarPresets from './calendar-presets.js';
 import CalendarRenderer from './calendar-renderer.js';
 import CalendarHTMLEditor from './calendar-html-editor.js';
@@ -301,8 +304,9 @@ Alpine.data('MainApp', () => ({
 import ContextMenu from './context-menu.js';
 Alpine.data('context_menu', ContextMenu);
 
+import GlobalWeek from './calendar/calendar_global_week.js';
+Alpine.data('global_week', GlobalWeek);
 
-import Quill from 'quill';
 import RichEditor from './rich-editor.js';
 Alpine.data('rich_editor', RichEditor);
 

diff --git a/resources/js/calendar/calendar_global_week.js b/resources/js/calendar/calendar_global_week.js
@@ -0,0 +1,17 @@
+export default () => ({
+    overflow_weekdays: false,
+    new_weekday_name: '',
+    weekdays: [],
+    show_custom_week_warning: false,
+    load(static_data) {
+        this.refreshWeekdays(static_data);
+        this.customWeekWarningCheck(static_data);
+    },
+    refreshWeekdays(static_data) {
+        this.weekdays = static_data.year_data.global_week;
+    },
+    customWeekWarningCheck(static_data) {
+        this.show_custom_week_warning = static_data.year_data.timespans.some(timespan => timespan.week !== undefined)
+            || static_data.year_data.leap_days.some(leapDay => leapDay.adds_week_day);
+    }
+});
diff --git a/resources/js/calendar/calendar_inputs_edit.js b/resources/js/calendar/calendar_inputs_edit.js
@@ -215,9 +215,9 @@ export function set_up_edit_inputs() {
                 if (creation.is_done() && errors.length == 0) {
                     if (previous_view_type !== 'owner') {
                         evaluate_settings();
-                        if (!preview_date.follow) {
+                        if (!window.preview_date.follow) {
                             update_preview_calendar();
-                            pre_rebuild_calendar('preview', preview_date);
+                            pre_rebuild_calendar('preview', window.preview_date);
                         } else {
                             pre_rebuild_calendar('calendar', window.dynamic_data);
                             preview_date_follow();
@@ -236,7 +236,7 @@ export function set_up_edit_inputs() {
                 if (creation.is_done() && errors.length == 0) {
                     if (previous_view_type !== 'player') {
                         evaluate_settings();
-                        if (!preview_date.follow) {
+                        if (!window.preview_date.follow) {
                             update_preview_calendar();
                             pre_rebuild_calendar('preview', window.preview_date);
                         } else {
@@ -1689,7 +1689,7 @@ export function set_up_edit_inputs() {
         $('#first_week_day_container').toggleClass('hidden', !checked).find('select').prop('disabled', !checked);
         repopulate_weekday_select($(this).closest('.sortable-container').find('.week-day-select'));
         container.find('.internal-list-name').change();
-        evaluate_custom_weeks();
+        window.dispatchEvent(new CustomEvent("events-changed"));
     });
 
     $('#month_overflow').change(function() {
@@ -1703,7 +1703,7 @@ export function set_up_edit_inputs() {
         if ($(this).is(':checked')) {
             var element = [];
             window.static_data.year_data.timespans[timespan_index].week = [];
-            for (index = 0; index < window.static_data.year_data.global_week.length; index++) {
+            for (let index = 0; index < window.static_data.year_data.global_week.length; index++) {
                 window.static_data.year_data.timespans[timespan_index].week.push(window.static_data.year_data.global_week[index]);
                 element.push(`<input type='text' class='form-control internal-list-name dynamic_input custom_week_day' data='year_data.timespans.${timespan_index}.week' fc-index='${index}'/>`);
             }
@@ -1722,8 +1722,7 @@ export function set_up_edit_inputs() {
             do_error_check();
         }
 
-        evaluate_custom_weeks();
-
+        window.dispatchEvent(new CustomEvent("events-changed"));
     });
 
     $(document).on('click', '.weekday_quick_add', function() {
@@ -1961,8 +1960,7 @@ export function set_up_edit_inputs() {
             week_list.children().slice(new_val).remove();
         }
 
-        evaluate_custom_weeks();
-
+        window.dispatchEvent(new CustomEvent("events-changed"));
     });
 
     $(document).on('change', '.custom_week_day', function() {
@@ -2215,7 +2213,7 @@ export function set_up_edit_inputs() {
         var index = $(this).closest('.sortable-container').attr('index') | 0;
         repopulate_day_select($(`.timespan-day-list`), undefined, undefined, undefined, undefined, index);
         window.dynamic_data.epoch = evaluate_calendar_start(window.static_data, convert_year(window.static_data, window.dynamic_data.year), window.dynamic_data.timespan, window.dynamic_data.day).epoch;
-        preview_date.epoch = evaluate_calendar_start(window.static_data, convert_year(window.static_data, preview_date.year), preview_date.timespan, preview_date.day).epoch;
+        window.preview_date.epoch = evaluate_calendar_start(window.static_data, convert_year(window.static_data, window.preview_date.year), window.preview_date.timespan, window.preview_date.day).epoch;
     });
 
     $('#enable_weather').change(function() {
@@ -2260,7 +2258,7 @@ export function set_up_edit_inputs() {
         });
 
         window.dynamic_data.epoch = evaluate_calendar_start(window.static_data, convert_year(window.static_data, window.dynamic_data.year), window.dynamic_data.timespan, window.dynamic_data.day).epoch;
-        preview_date.epoch = evaluate_calendar_start(window.static_data, convert_year(window.static_data, preview_date.year), preview_date.timespan, preview_date.day).epoch;
+        window.preview_date.epoch = evaluate_calendar_start(window.static_data, convert_year(window.static_data, window.preview_date.year), window.preview_date.timespan, window.preview_date.day).epoch;
 
     });
 
@@ -2591,11 +2589,11 @@ export function set_up_edit_inputs() {
 
             changes_applied = true;
 
-            if (!preview_date.follow) {
+            if (!window.preview_date.follow) {
 
                 update_preview_calendar();
 
-                pre_rebuild_calendar('preview', preview_date);
+                pre_rebuild_calendar('preview', window.preview_date);
 
             } else {
 
@@ -2626,11 +2624,11 @@ export function set_up_edit_inputs() {
             $('#reload_background').addClass('hidden').css('display', 'none');
             evaluate_save_button(true);
 
-            if (!preview_date.follow) {
+            if (!window.preview_date.follow) {
 
                 update_preview_calendar();
 
-                rebuild_calendar('preview', preview_date);
+                rebuild_calendar('preview', window.preview_date);
 
             } else {
 
@@ -2804,6 +2802,7 @@ function update_data(e) {
 
         do_error_check(type[0], refresh);
 
+
     } else if (target.attr('class') !== undefined && target.attr('class').indexOf('static_input') > -1) {
 
 
@@ -2850,7 +2849,7 @@ function update_data(e) {
             set_up_view_values();
             set_up_visitor_values();
             window.dynamic_data.epoch = evaluate_calendar_start(window.static_data, convert_year(window.static_data, window.dynamic_data.year), window.dynamic_data.timespan, window.dynamic_data.day).epoch;
-            preview_date.epoch = evaluate_calendar_start(window.static_data, convert_year(window.static_data, preview_date.year), preview_date.timespan, preview_date.day).epoch;
+            window.preview_date.epoch = evaluate_calendar_start(window.static_data, convert_year(window.static_data, window.preview_date.year), window.preview_date.timespan, window.preview_date.day).epoch;
         }
 
         if (target.attr('refresh') == "clock") {
@@ -2862,6 +2861,8 @@ function update_data(e) {
 
         do_error_check(type[0], refresh);
     }
+
+    window.dispatchEvent(new CustomEvent('calendar-structure-changed'));
 }
 
 function add_weekday_to_sortable(parent, key, name) {
@@ -4468,11 +4469,11 @@ function error_check(parent, rebuild) {
     }
     if (rebuild === undefined || rebuild) {
 
-        if (!preview_date.follow) {
+        if (!window.preview_date.follow) {
 
             update_preview_calendar();
 
-            pre_rebuild_calendar('preview', preview_date);
+            pre_rebuild_calendar('preview', window.preview_date);
 
         } else {
 
@@ -4672,7 +4673,7 @@ function reindex_timespan_sortable() {
 
     evaluate_remove_buttons();
 
-    evaluate_custom_weeks();
+    window.dispatchEvent(new CustomEvent("events-changed"));
 }
 
 function reindex_leap_day_list() {
@@ -4709,32 +4710,6 @@ function reindex_leap_day_list() {
     evaluate_remove_buttons();
 }
 
-function evaluate_custom_weeks() {
-    var custom_week = false;
-    timespan_sortable.children().each(function(i) {
-        if ($(this).find('.unique-week-input').is(':checked')) {
-            custom_week = true;
-        }
-    });
-
-    leap_day_list.children().each(function(i) {
-        if ($(this).find('.adds-week-day').is(':checked')) {
-            custom_week = true;
-        }
-    });
-
-    if (custom_week) {
-        $('#month_overflow').prop('checked', !custom_week);
-        window.static_data.year_data.overflow = false;
-    }
-
-    $('#month_overflow').prop('disabled', custom_week);
-    $('.month_overflow_container').toggleClass("hidden", custom_week)
-    $('#overflow_explanation').toggleClass('hidden', !custom_week);
-
-    populate_first_day_select();
-}
-
 function reindex_season_sortable(key) {
     var tabindex = 400;
 
@@ -5158,7 +5133,7 @@ function reindex_era_list() {
     window.dynamic_data.epoch = window.dynamic_date_manager.epoch;
 
     window.preview_date_manager = new date_manager(window.dynamic_data.year, window.dynamic_data.timespan, window.dynamic_data.day);
-    preview_date.epoch = window.preview_date_manager.epoch;
+    window.preview_date.epoch = window.preview_date_manager.epoch;
 
     do_error_check();
 }
@@ -5639,8 +5614,6 @@ export function set_up_edit_values() {
 
     }
 
-    evaluate_custom_weeks();
-
     if (window.static_data.seasons) {
 
         for (var i = 0; i < window.static_data.seasons.data.length; i++) {

diff --git a/resources/views/inputs/full.blade.php b/resources/views/inputs/full.blade.php
@@ -578,9 +578,15 @@ class="mr-2 fas fa-calendar-week"></i> Weekdays <a target="_blank" data-pt-posit
                                                                            href='{{ helplink('weekdays') }}'
                                                                            class="wiki protip"><i
                             class="fa fa-question-circle"></i></a></label>
-            <div class="collapsible-content card-body">
-
-                <div class='row center-text hidden' id='overflow_explanation'>
+            <div
+                class="collapsible-content card-body"
+                x-data="global_week"
+                x-init="$nextTick(() => load(window.static_data))"
+                @calendar-loaded.window="$nextTick(() => load(window.static_data))"
+                @calendar-structure-changed.window="$nextTick(() => load(window.static_data))"
+            >
+
+                <div class='row center-text' x-show="show_custom_week_warning" x-cloak>
                     This calendar has a custom week in some months or a leap day is adding a week-day, this will disable
                     overflows between months, because it makes no sense for two weeks that do not go together to
                     overflow into each other. Sorry.
@@ -596,8 +602,7 @@ class="fa fa-question-circle"></i></a></label>
                     @else
                         <div class='col-4'>
                             <label class="custom-control custom-checkbox right-text">
-                                <input type="checkbox" class="custom-control-input static_input" data='year_data'
-                                       fc-index='overflow' id='month_overflow'>
+                                <input type="checkbox" class="custom-control-input" x-model="overflow_weekdays">
                                 <span class="custom-control-indicator"></span>
                             </label>
                         </div>
@@ -632,15 +637,18 @@ class="fa fa-question-circle"></i></a></label>
 
                     <div class='row no-gutters add_inputs global_week'>
                         <div class='col input-group'>
-                            <input type='text' class='form-control name' id='weekday_name_input'
-                                   placeholder='Weekday name'>
+                            <input type='text' class='form-control' placeholder='Weekday name' x-model="new_weekday_name">
                             <div class="input-group-append">
                                 <button type='button' class='btn btn-primary add'><i class="fa fa-plus"></i></button>
                             </div>
                         </div>
                     </div>
 
-                    <div class='sortable list-group' id='global_week_sortable'></div>
+                    <div x-sort>
+                        <template x-for="weekday in weekdays">
+                            <div x-sort:item x-text="weekday"></div>
+                        </template>
+                    </div>
 
                 @endif