diff --git a/calendar.js b/calendar.js new file mode 100644 index 0000000..ff4b3c8 --- /dev/null +++ b/calendar.js @@ -0,0 +1,112 @@ +/* Usage: Place the script into an empty div: + * + * + * Where the init function takes: + * { 'calendar-name': {'url': 'url-fragment', 'clr': '#clrcode'}, ... } + */ + +const pageStorage = new class { + constructor() { + this._namespace = location.pathname.replace(/^\/(.*?)\/?(?:index.html)?$/, '$1'); + } + getItem(name) { return localStorage.getItem(this._namespace + name); } + setItem(name, value) { return localStorage.setItem(this._namespace + name, value); } + removeItem(name) { return localStorage.removeItem(this._namespace + name); } +}; + +class CalendarTabs { + constructor(container) { + this._container = container; + this._tabs = container.find('div'); + this.each(tab => { + const id = tab.attr('id'); + tab.click(() => this.select(id)); + }); + + var selectedId = 'tab-controller-AGENDA'; + if (pageStorage.getItem('tabId') && container.find('div#' + selectedId).length) + selectedId = pageStorage.getItem('tabId'); + this.select(selectedId); + } + each(callback) { + this._tabs.each(function () { callback($(this)); }); + return this; + } + select(id) { + if (this.selectedId == id) + return; + this.each(tab => { + if (tab.attr('id') == id) + tab.addClass('selected'); + else + tab.removeClass('selected'); + }); + this.selectedId = id; + pageStorage.setItem('tabId', id); + + if (this._onTabChanged) + this._onTabChanged(id.replace('tab-controller-', '')); + } + onTabChanged(onTabChanged) { this._onTabChanged = onTabChanged; } + get currentMode() { return this.selectedId.replace('tab-controller-', ''); } +} + +const calendars = new class Calendars { + constructor() { + this._container = $('#calendar-script').parent(); + this._container.append($( + '' + + '' + + '' + + '' + + '
Hét
Hónap
Napló
' + + '

' + )); + + this._calendarContainer = this._container.children('iframe').first(); + this._switchesContainer = this._container.children('.controls-calendar-switches').first(); + this._urlBase = + 'https://calendar.google.com/calendar/u/0/embed?height=600&wkst=2&bgcolor=%23eef1f8' + + '&ctz=Europe%2FBudapest&showTz=0&showPrint=0&showDate=1&showTabs=0&showCalendars=0' + + '&showTitle=0'; + + this.tabs = new CalendarTabs(this._container.children('.controls-calendar-tabs').first()); + this.tabs.onTabChanged(() => this.update()); + } + init(data) { + this._switches = []; + for (const [name, props] of Object.entries(data)) { + const id = Calendars._normName(name); + var isEnabled = pageStorage.getItem(id) == null ? + props.on != false : + pageStorage.getItem(id) == 'true'; + + const ctrl = $('
' + + `` + + `` + + '
'); + this._switches.push(ctrl.children('input').on('change', event => { + pageStorage.setItem(id, $(event.target).prop('checked')); + this.update(); + })); + this._switchesContainer.append(ctrl); + } + if (this._switches.length <= 1) + this._switchesContainer.css('display', 'none'); + this._switchesContainer.addClass(['form-check', 'form-check-inline']); + this.update(); + } + update() { + var options = '&mode=' + this.tabs.currentMode; + options = this._switches.reduce( + (accumulator, ctrl) => + ctrl.prop('checked') ? accumulator + ctrl.attr('value') : accumulator + , options); + this._calendarContainer.attr('src', this._urlBase + options); + } + static _normName(name) { + return name.toLowerCase().replaceAll(' ', ''); + } +}; diff --git a/celicaclub/index.html b/celicaclub/index.html index ef51454..d43ba58 100644 --- a/celicaclub/index.html +++ b/celicaclub/index.html @@ -43,6 +43,7 @@ + @@ -57,9 +58,29 @@

Celica Club Eseménynaptár

- -

Nem kell mindig idelátogatnod, vedd fel a Google Naptáradba, hogy mindig naprakész lehess! (Ha problémát észlelsz, akkor azért érdemes lehet frissíteni.)

-

Minden esemény leírásában megtalálható a Facebook eseménye.

+
+ + +
+

Nem kell mindig idelátogatnod, vedd fel a Google Naptáradba, hogy mindig naprakész lehess!

+

A Facebook esemény linket megtalálod az események leírásában.