13 files changed, 509 insertions, 0 deletions
diff --git a/doc/ref/javascript/arbitary_kv.texi b/doc/ref/javascript/arbitary_kv.texi
new file mode 100644
index 00000000..b28c8b92
--- /dev/null
+++ b/doc/ref/javascript/arbitary_kv.texi
@@ -0,0 +1,3 @@
+@node arbitary_kv
+@subsection arbitary_kv.js
+
diff --git a/doc/ref/javascript/binders.texi b/doc/ref/javascript/binders.texi
new file mode 100644
index 00000000..2b64b230
--- /dev/null
+++ b/doc/ref/javascript/binders.texi
@@ -0,0 +1,47 @@
+
+@node binders
+@subsection binders.js
+
+The bind system allows HTML-elements to specify that they want to be
+updated whenever its corresponding (vcalendar) object changes.
+The bind system is currently set up in
+@code{bind_properties} (@pxref{bind_properties})
+(which at the time of writing is (badly) located in @ref{script}).
+
+All (HTML) components with the class @code{bind} are bound. By default
+the (HTML) attribute @code{data-property} is checked for a property
+name, and @code{object.innerHTML} is set whenever that property field
+changes.
+Alternatively an (HTML) component may specify a specific binder
+through the HTML attribute @code{data-bindby}, which should be the
+name of a JavaScript function taking two arguments, an @TODO{event
+component}
+@footnote{Root ``root'' HTML component of a given calendar event
+(something which @code{get_property} can be called on},
+and the component in question.
+
+@c Also sets up event listeners, which most doesn't do.
+
+Binder functions are generally placed in @file{binders.js}, and
+shouldn't be called manually.
+
+@defun bind_recur el e
+Handles recurrence rules.
+Uses a sub-binder system on components with class containing
+``bind-rr''.
+@end defun
+
+@defun bind_edit el e
+Cases for @code{input} and @code{textarea} elements @TODO{(should also
+handle @code{select}s?)}
+@end defun
+
+@defun bind_view el e
+The same as the default binder????
+@end defun
+
+@defun bind_wholeday el e
+Binder for the wholeday toggle button.
+While CSS would suffice, this sets the disabled flags on the time
+inputs, giving a better user experience.
+@end defun
diff --git a/doc/ref/javascript/clock.texi b/doc/ref/javascript/clock.texi
new file mode 100644
index 00000000..5c2bd954
--- /dev/null
+++ b/doc/ref/javascript/clock.texi
@@ -0,0 +1,84 @@
+@node clock
+@subsection clock.js
+
+@deftp {(abstract) class} Clock
+Interface for ``things'' which wants to get updated on a human timescale.
+
+@defmethod Clock update now
+Called every now and then, with @var{now} being the current time.
+@end defmethod
+
+All instances are expected to implement @code{update}, but are free to
+implement any other methods they see fit.
+@end deftp
+
+Below, only the methods (including @code{constructor} and
+@code{update} which do something of note (excluding the expected))
+are noted.
+
+@deftp {class} Timebar @extends{Clock}
+The (blue) vertical line which show the current time in the current day.
+
+@c @defmethod Timebar constructor ∅
+@c @end defmethod
+@c 
+@c @defmethod Timebar update now
+@c @end defmethod
+@end deftp
+
+@deftp {class} SmallcalCellHighlight @extends{Clock}
+Highlights the current date in the small calendar to the side.
+Currently directly sets a border
+@TODO{but should preferably set a class instead}.
+
+@defmethod SmallcalCellHighlight constructor small_cal
+@var{small_cal} is the DOM-node of the calendar.
+(it should support querySelector).
+@end defmethod
+
+@c @defmethod SmallcalCellHighlight update now
+@c @end defmethod
+@end deftp
+
+@deftp {class} ButtonUpdater @extends{Clock}
+Updates the ``Today'' link in the side panel to point directly to the
+correct web-address. The link works without JavaScript, but then
+requires a redirect from the server.
+
+All actual updating logic is already abstracted away. It would be
+desirable if something more was done with this.
+
+@defmethod ButtonUpdater el proc
+Takes the element @var{el} to be updated, and the procedure @var{proc}
+which will be called with the element, and the current time.
+@end defmethod
+@end deftp
+
+
+As of commit
+@githash{c9719ce7937f0f0f2aa371ced1d585f67af22457,static/script.js,231} 
+all objects required manual setup. See static/script.js:
+
+@verbatim
+   231	    let start_time = document.querySelector("meta[name='start-time']").content;
+   232	    let end_time = document.querySelector("meta[name='end-time']").content;
+   233	
+   234	    const button_updater = new ButtonUpdater(
+   235	        document.getElementById("today-button"),
+   236	        (e, d) => e.href = d.format('~Y-~m-~d') + ".html"
+   237	    );
+   238	
+   239	    const sch = new SmallcalCellHighlight(
+   240	        document.querySelector('.small-calendar'))
+   241	
+   242	    const timebar = new Timebar(start_time, end_time);
+   243	
+   244	    timebar.update(new Date);
+   245	    window.setInterval(() => {
+   246	        let d = new Date;
+   247	        timebar.update(d);
+   248	        button_updater.update(d);
+   249	        sch.update(d);
+   250	    }, 1000 * 60);
+   251	
+@end verbatim
diff --git a/doc/ref/javascript/date_time.texi b/doc/ref/javascript/date_time.texi
new file mode 100644
index 00000000..fb2563f1
--- /dev/null
+++ b/doc/ref/javascript/date_time.texi
@@ -0,0 +1,39 @@
+@node date_time
+@subsection date_time.js
+
+@defun init_date_time
+@c possibly have special index for these
+@cindex dummy component
+Procedure which initializes the dummy component for date-time input.
+When called, finds all elements with class ``date-time'', and makes
+them date-time inputs.
+
+@c <input type='date-time'/>
+
+The expected HTML form is
+@example
+<div class="date-time" name="@var{name}">
+    <input type="date"/>
+    <input type="time"/>
+</div>
+@end example
+
+Each date-time gets the following fields:
+
+@defivar date_time value
+The current date-time value as a string,
+on the form @code{YYYY-mm-ddTHH:MM[:SS]}
+(@code{SS} if the underlying time input has it).
+
+A new date-time can also be set to the field, the same format as above
+is expected.
+@end defivar
+
+@defivar date_time name
+The ``name'' field of the date-time input. Since @code{name} note that
+this is an addition, since name is actually invalid on non-input
+components. We nevertheless use it here since we are emulating an
+input element.
+@end defivar
+
+@end defun
diff --git a/doc/ref/javascript/draggable.texi b/doc/ref/javascript/draggable.texi
new file mode 100644
index 00000000..d1851ec4
--- /dev/null
+++ b/doc/ref/javascript/draggable.texi
@@ -0,0 +1,24 @@
+@node dragable
+@subsection dragable.js
+
+@c TODO This text is just yanked from the old org file, along with the
+@c source codes header. It should probably be rewritten.
+
+Manually apply =bind_popup_control= to the statusbar of a floating
+"window".  Nothing is required from the component, but the "window"
+must have 'popup-container' ∈ =class=
+
+@defun bind_popup_control nav
+Apply to a given component to make it draggable.
+Drag area (usually a title bar) should be be the only argument.
+It is REQUIRED that the object which should be moved have the class
+@code{popup-container}.
+
+@example
+<div class='popup-container'>
+    ...
+        <nav />
+    ...
+</div>
+@end example
+@end defun
diff --git a/doc/ref/javascript/input_list.texi b/doc/ref/javascript/input_list.texi
new file mode 100644
index 00000000..65db81a4
--- /dev/null
+++ b/doc/ref/javascript/input_list.texi
@@ -0,0 +1,51 @@
+@node input_list
+@subsection input_list.js
+@cindex dummy component
+
+All elements with the class @code{input-list} are treated as a
+collection of input fields. Uses including setting tags on calendar
+entries.
+
+All direct children of the ``input-list'' @emph{must} have the class
+@code{unit}, and one direct child @code{unit} have the class @code{final}.
+
+@c All elements having 'input-list' ∈ =class=
+
+@c Direct children must all have 'unit' ∈ =class=
+@c One direct child must have 'final' ∈ =class=
+
+@defmethod input_list get_value
+
+@example
+querySelectorAll('input')
+        .map(x => x.value)
+        .join(@var{joinby})
+@end example
+@end defmethod
+
+@defivar input_list [data-]joinby
+ Alternative character to join by
+@end defivar
+
+@defivar input_list [data-]bindby
+ replacement for get_value
+@end defivar
+
+binds =get_value= on instances, by default returning the value
+of all =<input/>= tags joined by =,=. This can be overwritten with
+
+TODO: instead, override value?
+
+=addEventList('input',= is overwritten, registering the listener for all input
+elements.
+
+
+  ∀ children('.input-list') => 'unit' ∈ classList(child)
+
+  <div class="input-list">
+    <div class="unit"><input/></div>
+    <div class="unit final"><input/></div>
+  </div>
+
+@defun init_input_list
+@end defun
diff --git a/doc/ref/javascript/jcal.texi b/doc/ref/javascript/jcal.texi
new file mode 100644
index 00000000..4be8d33b
--- /dev/null
+++ b/doc/ref/javascript/jcal.texi
@@ -0,0 +1,4 @@
+
+@node jcal
+@subsection jcal.js
+
diff --git a/doc/ref/javascript/lib.texi b/doc/ref/javascript/lib.texi
new file mode 100644
index 00000000..ec5d4450
--- /dev/null
+++ b/doc/ref/javascript/lib.texi
@@ -0,0 +1,147 @@
+
+@node lib
+@subsection lib.js
+
+General procedures which in theory could be used anywhere.
+
+@defvar xcal
+The xml namespace name for xcalendar, which is
+``urn:ietf:params:xml:ns:icalendar-2.0''.
+@end defvar
+
+
+@node Default prototype extensions
+@subsubsection Default prototype extensions
+
+HTMLElement extensions
+
+@defmethod HTMLElement addEventListener name proc
+Replace the default @code{addEventListener} with a version that stores
+all listeners in the dictionary @var{listeners}.
+@end defmethod
+
+@defivar HTMLElement listeners
+Dictionary of all registered listeners to this element.
+Keys are taken from @code{addEventListener}.
+@end defivar
+
+@defmethod DOMTokenList find regexp
+Finds the first element of the DOMTokenList whichs value matches
+the supplied regexp. Returns a pair of the index and the value.
+@end defmethod
+
+@defmethod Object format args ...
+Returns a string representation of the given object.
+Allows extending for custom types,
+@ref{date-format}
+@end defmethod
+
+@node General
+@subsubsection General
+
+@defun zip args ...
+Takes a list of lists, and returns a single list of tuples.
+@example
+» zip([1,2,3,4,5], "Hello")
+← [[1,'H'],[2,'e'],[3,'l'],[4,'l'],[5,'o']]
+@end example
+@end defun
+
+@defun makeElement name [attr=@{@}]
+Creates a new DOM element of type @var{name}, with all keys in
+@var{attr} transfered to it. For example, the equivalent of
+@example
+<input type='number'/>
+@end example
+would be
+@verbatim
+values.push(makeElement('input', {
+    type: 'number',
+}));
+@end verbatim
+.
+@end defun
+
+@defun round_time time fraction
+TODO
+@end defun
+
+@defun date_to_percent date
+Retuns how far along the date specified by @var{date} is, between 0
+and 100, where 00:00 maps to 0, and 23:59 to ~100.
+@end defun
+
+@defun gensym [pxrefix='gensym']
+Generates a new string which is (hopefully) globally unique.
+Compare with @code{gensym} from Lisp.
+@end defun
+
+@defun setVar str val
+Set the CSS var @var{str} to @var{val} on the root element.
+@end defun
+
+@defun asList thing
+Ensures that @var{thing} is a list. Returning it outright if it
+already is one, otherwise wrapping it in a list.
+@end defun
+
+@node Date
+@subsubsection Date
+
+Some extensions to the builtin class ``Date'' is made.
+
+@defivar Date utc
+Boolean indicating if the given timestamp is in UTC or local time.
+true means UTC.
+@end defivar
+
+@defivar Date dateonly
+Boolean indicating if the time component of the Date object should be disregarded.
+@end defivar
+
+@defun parseDate str
+Takes a string @var{str}, which should be in ISO-8601 date-format, and
+returns a javascript Date object.
+@end defun
+
+@defun copyDate date
+Creates a new instance of the given Date @var{date}, also transfers my
+custom fields.
+@end defun
+
+@defun to_local date
+@anchor{to_local}
+Returns a Date object (which may be new) which is guaranteed in local
+time.
+This means that the @var{utc} field is @code{false}, and that
+@code{to_local(current_time())} should show what your wall-clock shows.
+@end defun
+
+@defmethod Date format str args ...
+@anchor{date-format}
+Formats a Date object according to the format specification @var{str}.
+Keeping with Guile each format specifier starts with a ~.
+
+@c table formatting borrowed from Gulie Reference (SRFI-19 Date to string)
+@multitable {MMMM} {MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM}
+@item @nicode{~~} @tab literal ~
+@c Almost all fields are left padded. How do I signify this
+@c with a single footnote?
+@item @nicode{~Y} @tab year, left-padding with zeroes.
+@item @nicode{~m} @tab month number, left padded with zeroes.
+@item @nicode{~d} @tab day of month.
+@item @nicode{~H} @tab hour
+@item @nicode{~M} @tab minute
+@item @nicode{~S} @tab second
+@item @nicode{~Z} @tab 'Z' if Date is UTC, otherwise nothing
+
+@item @nicode{~L} @tab Converts the date to local time
+(@pxref{to_local}) (doesn't modify source object). Outputs nothing
+@end multitable
+@end defmethod
+
+@defun format_date date str
+Equivalent to @code{(@var{date}).format(@var{str})}.
+@c TODO link
+@end defun
+
diff --git a/doc/ref/javascript/popup.texi b/doc/ref/javascript/popup.texi
new file mode 100644
index 00000000..2dd8f48f
--- /dev/null
+++ b/doc/ref/javascript/popup.texi
@@ -0,0 +1,5 @@
+
+
+@node popup
+@subsection popup.js
+
diff --git a/doc/ref/javascript/rrule.texi b/doc/ref/javascript/rrule.texi
new file mode 100644
index 00000000..5d7a7576
--- /dev/null
+++ b/doc/ref/javascript/rrule.texi
@@ -0,0 +1,4 @@
+
+@node rrule
+@subsection rrule.js
+
diff --git a/doc/ref/javascript/script.texi b/doc/ref/javascript/script.texi
new file mode 100644
index 00000000..a60343e4
--- /dev/null
+++ b/doc/ref/javascript/script.texi
@@ -0,0 +1,60 @@
+
+@node script
+@subsection script.js
+
+@dfn{Main} for my javascript, and also currently dumping ground for stuff.
+
+@deftp {class} EventCreator
+
+@defmethod EventCreator create_empty_event
+@end defmethod
+
+@defmethod EventCreator create_event_down intended_target
+@end defmethod
+
+@defmethod EventCreator create_event_move pos_in [round=1] [wide_element=false]
+@end defmethod
+
+@defmethod EventCreator create_event_finisher callback
+@end defmethod
+
+@end deftp
+
+@defun place_in_edit_mode event
+@end defun
+
+@c window.onload is here in source file
+
+@defun get_property event field default_value
+Returns the @emph{value} slot of given field in @var{event}, creating it if needed.
+
+@itemize
+@item
+@var{el}: the event to work on
+
+@item
+@var{field}: name of the field
+
+@item
+@var{default_value}: default value when creating
+
+@item
+@var{bind_to_ical} should this property be added to the icalendar subtree?
+@end itemize
+@end defun
+
+@defun bind_properties el [wide_event=false]
+@anchor{bind_properties}
+@ref{binders}
+  Properties are icalendar properties.
+
+  p['name'] to get and set value (also updates any connected slots)
+
+  p['_value_name'] for raw value
+  p['_slot_name'] for connected slots, Vector of pairs, where the
+                  car should be a reference to the slot, and the
+                  cdr a procedure which takes a slot and a value
+                  and binds the value to the slot.
+@end defun
+
+
diff --git a/doc/ref/javascript/server_connect.texi b/doc/ref/javascript/server_connect.texi
new file mode 100644
index 00000000..2f50f02d
--- /dev/null
+++ b/doc/ref/javascript/server_connect.texi
@@ -0,0 +1,2 @@
+@node server_connect
+@subsection server_connect.js
diff --git a/doc/ref/javascript/types.texi b/doc/ref/javascript/types.texi
new file mode 100644
index 00000000..73a58550
--- /dev/null
+++ b/doc/ref/javascript/types.texi
@@ -0,0 +1,39 @@
+@node types
+@subsection types.js
+
+Collection of type information for calendar data.
+
+@defvar all_types
+Name of all valid icalendar types.
+
+    text, uri, binary, float, integer, date-time, date, duration,
+    period, utc-offset, cal-address, recur, boolean,
+@end defvar
+
+@defvar property_names
+All known names properties (top level keys) can have.
+Such as ``calscale'', ``dtstart'', ...
+@end defvar
+
+@defvar valid_fields
+Which property fields each component can hold.
+
+@verbatim
+{ 'VCALENDAR': ['PRODID', 'VERSION', 'CALSCALE', 'METHOD'],
+    ...
+}
+@end verbatim
+@end defvar
+
+@defvar valid_input_types
+Which types are valid to store under each property.
+If multiple values are an option for that property, then
+the list of possibilities will contain a sub-list (see example).
+
+@verbatim
+{ 'DTSTART': ['date', 'date-time'],
+  'CATEGORIES': [['text']],
+  ...
+}
+@end verbatim
+@end defvar