<div dir="ltr"><div><span style="font-family:monospace,monospace">I've made a new attempt to wrap an existing, simple JavaScript datepicker library called Pikaday, to use with Ur/Web. </span></div><div><span style="font-family:monospace,monospace"><br></span></div><div><span style="font-family:monospace,monospace">The GitHub repo 'urweb-pikaday' below contains the current version (which does not compile yet):</span><br></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/StefanScott/urweb-pikaday">https://github.com/StefanScott/urweb-pikaday</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">The </font><span style="font-family:monospace,monospace">JavaScript datepicker </span><span style="font-family:monospace,monospace">library Pikaday (which I'm trying to wrap) is very simple: it has no JS dependencies, and it uses "modular" CSS:</span></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/dbushell/Pikaday">https://github.com/dbushell/Pikaday</a></font></div><div><font face="monospace, monospace"><br></font></div><div><div><span style="font-family:monospace,monospace">I'm still unsure </span><span style="font-family:monospace,monospace">how to connect the various pieces involved</span><span style="font-family:monospace,monospace"> in order use Ur/Web JavaScript FFI to wrap an existing library.</span></div><div><br></div></div><div><br></div><div><div><font face="monospace, monospace">Possibly related work:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">David Patterson's player for Democracy Now uses Ur/Web's JavaScript FFI, so I used it as a guide:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/dbp/dnplayer">https://github.com/dbp/dnplayer</a></font></div></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">If there are any other examples available using </font><span style="font-family:monospace,monospace">Ur/Web's JavaScript FFI to wrap an existing JavaScript library</span><span style="font-family:monospace,monospace">, I would be interested in looking at them.</span></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Project files:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">My urweb-pikaday project has the following 6 files:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  - the main project:</font></div><div><font face="monospace, monospace">    pikadayPage.urp</font></div><div><font face="monospace, monospace">    pikadayPage.urs</font></div><div><font face="monospace, monospace">    pikadayPage.ur</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  - the JavaScript FFI:</font></div><div><font face="monospace, monospace">    pikadayControl.urp</font></div><div><font face="monospace, monospace">    pikadayControl.urs</font></div><div><font face="monospace, monospace">    pikadayControl.js</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Plus it gets 3 static files (pikaday.js, pikaday.css, site.css) from the existing Pikaday GitHub repo.</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">The files are on GitHub:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/StefanScott/urweb-pikaday">https://github.com/StefanScott/urweb-pikaday</a><br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Plus they are listed at the end of this message (they are fairly short).</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><br></font></div><div><span style="font-family:monospace,monospace">Note:</span></div><div><span style="font-family:monospace,monospace"><br></span></div><div><span style="font-family:monospace,monospace">I didn't use `benignEffectful` or `effectful` anywhere - because reading section 3.1 of the Ur/Web manual seemed to imply that it is assumed by default.</span><br></div><div><font face="monospace, monospace"><br></font></div><div><br></div><div><font face="monospace, monospace">Compile error:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Doing `urweb pikadayPage` currently generates the following compile error:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">---------</font></div><div><font face="monospace, monospace">$ urweb pikadayPage</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">:0:0: (to 0:0) A handler (URI prefix "PikadayPage/main") accessible via GET could cause side effects; try accessing it only via forms, removing it from the signature of the main program module, or whitelisting it with the 'safeGet' .urp directive</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">$</font></div><div><font face="monospace, monospace">---------</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">I'm hoping that the error(s) in the code (listed below, and on GitHub) might be obvious enough for a more experienced Ur/Web user to easily detect.</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Thanks for any help!</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">---------</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">File listing:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">The 6 files of this project are listed below, and are on GitHub: </font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/StefanScott/urweb-pikaday">https://github.com/StefanScott/urweb-pikaday</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">---------</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(** pikadayPage.urp **)</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">allow url <a href="https://raw.githubusercontent.com/dbushell/Pikaday/master/css/pikaday.css">https://raw.githubusercontent.com/dbushell/Pikaday/master/css/pikaday.css</a></font></div><div><font face="monospace, monospace">allow url <a href="https://raw.githubusercontent.com/dbushell/Pikaday/master/css/site.css">https://raw.githubusercontent.com/dbushell/Pikaday/master/css/site.css</a></font></div><div><font face="monospace, monospace">script <a href="https://raw.githubusercontent.com/dbushell/Pikaday/master/pikaday.js">https://raw.githubusercontent.com/dbushell/Pikaday/master/pikaday.js</a></font></div><div><font face="monospace, monospace">library pikadayControl</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">pikadayPage</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">---------</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(** pikadayPage.urs **)</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">val main : unit -> transaction page</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">---------</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(** pikadayPage.ur  **)</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">fun init nid =</font></div><div><font face="monospace, monospace">  PikadayControl.init nid</font></div><div><br></div><div><font face="monospace, monospace">fun handler r = </font></div><div><font face="monospace, monospace">  return </font></div><div><font face="monospace, monospace">    <xml><body></font></div><div><font face="monospace, monospace">      {[r.DateField]}</font></div><div><font face="monospace, monospace">    </body></xml></font></div><div><br></div><div><font face="monospace, monospace">fun main () = </font></div><div><font face="monospace, monospace">  foo_id <- fresh;</font></div><div><font face="monospace, monospace">  return </font></div><div><font face="monospace, monospace">    <xml></font></div><div><font face="monospace, monospace">      <head></font></div><div><font face="monospace, monospace">        <link </font></div><div><font face="monospace, monospace">          rel="stylesheet" </font></div><div><font face="monospace, monospace">          type="text/css" </font></div><div><font face="monospace, monospace">          href="<a href="https://raw.githubusercontent.com/dbushell/Pikaday/master/css/pikaday.css">https://raw.githubusercontent.com/dbushell/Pikaday/master/css/pikaday.css</a>" /></font></div><div><font face="monospace, monospace">        <link </font></div><div><font face="monospace, monospace">          rel="stylesheet" </font></div><div><font face="monospace, monospace">          type="text/css" </font></div><div><font face="monospace, monospace">          href="<a href="https://raw.githubusercontent.com/dbushell/Pikaday/master/css/site.css">https://raw.githubusercontent.com/dbushell/Pikaday/master/css/site.css</a>" /></font></div><div><font face="monospace, monospace">      </head></font></div><div><font face="monospace, monospace">      <body onload={init foo_id}></font></div><div><font face="monospace, monospace">        <form></font></div><div><font face="monospace, monospace">          <textbox{#DateField} id={foo_id}/></font></div><div><font face="monospace, monospace">          <submit action={handler}/></font></div><div><font face="monospace, monospace">        </form></font></div><div><font face="monospace, monospace">      </body></font></div><div><font face="monospace, monospace">    </xml></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">---------</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(** pikadayControl.urp  **)</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">ffi pikadayControl</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">---------</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(** pikadayControl.urs  **)</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">val init : </font></div><div><font face="monospace, monospace">  id -> </font></div><div><font face="monospace, monospace">  transaction unit</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">---------</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">//  pikadayControl.js</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">function init ( </font><span style="font-family:monospace,monospace">nodeId </span><span style="font-family:monospace,monospace">) = {</span></div><div><font face="monospace, monospace">  var picker = new Pikaday ( { </font></div><div><font face="monospace, monospace">    field: document.getElementById(nodeId),</font></div><div><font face="monospace, monospace">    firstDay: 1,</font></div><div><font face="monospace, monospace">    minDate: new Date('2000-01-01'),</font></div><div><font face="monospace, monospace">    maxDate: new Date('2020-12-31'),</font></div><div><font face="monospace, monospace">    yearRange: [2000,2020]</font></div><div><font face="monospace, monospace">  } ) ;</font></div><div><font face="monospace, monospace">}</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">---------</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">The code in the last file above (the JavaScript file pikadayControl.js) was taken from the demo of the Pikaday datepicker:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="http://dbushell.github.io/Pikaday/">http://dbushell.github.io/Pikaday/</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Thanks for any help!</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">###</font></div><div><br></div></div>