[Ur] New attempt to wrap a simple JS datepicker library (Pikaday) to use with Ur/Web

Thu Aug 6 20:09:06 EDT 2015

I've made a new attempt to wrap an existing, simple JavaScript datepicker
library called Pikaday, to use with Ur/Web.

The GitHub repo 'urweb-pikaday' below contains the current version (which
does not compile yet):

  https://github.com/StefanScott/urweb-pikaday

The JavaScript datepicker library Pikaday (which I'm trying to wrap) is
very simple: it has no JS dependencies, and it uses "modular" CSS:

  https://github.com/dbushell/Pikaday

I'm still unsure how to connect the various pieces involved in order use
Ur/Web JavaScript FFI to wrap an existing library.

Possibly related work:

David Patterson's player for Democracy Now uses Ur/Web's JavaScript FFI, so
I used it as a guide:

  https://github.com/dbp/dnplayer

If there are any other examples available using Ur/Web's JavaScript FFI to
wrap an existing JavaScript library, I would be interested in looking at
them.

Project files:

My urweb-pikaday project has the following 6 files:

  - the main project:
    pikadayPage.urp
    pikadayPage.urs
    pikadayPage.ur

  - the JavaScript FFI:
    pikadayControl.urp
    pikadayControl.urs
    pikadayControl.js

Plus it gets 3 static files (pikaday.js, pikaday.css, site.css) from the
existing Pikaday GitHub repo.

The files are on GitHub:

  https://github.com/StefanScott/urweb-pikaday

Plus they are listed at the end of this message (they are fairly short).

Note:

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.

Compile error:

Doing `urweb pikadayPage` currently generates the following compile error:

---------
$ urweb pikadayPage

: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

$
---------

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.

Thanks for any help!

---------

File listing:

The 6 files of this project are listed below, and are on GitHub:

  https://github.com/StefanScott/urweb-pikaday

---------

(** pikadayPage.urp **)

allow url
https://raw.githubusercontent.com/dbushell/Pikaday/master/css/pikaday.css
allow url
https://raw.githubusercontent.com/dbushell/Pikaday/master/css/site.css
script https://raw.githubusercontent.com/dbushell/Pikaday/master/pikaday.js
library pikadayControl

pikadayPage

---------

(** pikadayPage.urs **)

val main : unit -> transaction page

---------

(** pikadayPage.ur  **)

fun init nid =
  PikadayControl.init nid

fun handler r =
  return
    <xml><body>
      {[r.DateField]}
    </body></xml>

fun main () =
  foo_id <- fresh;
  return
    <xml>
      <head>
        <link
          rel="stylesheet"
          type="text/css"
          href="
https://raw.githubusercontent.com/dbushell/Pikaday/master/css/pikaday.css"
/>
        <link
          rel="stylesheet"
          type="text/css"
          href="
https://raw.githubusercontent.com/dbushell/Pikaday/master/css/site.css" />
      </head>
      <body onload={init foo_id}>
        <form>
          <textbox{#DateField} id={foo_id}/>
          <submit action={handler}/>
        </form>
      </body>
    </xml>

---------

(** pikadayControl.urp  **)

ffi pikadayControl

---------

(** pikadayControl.urs  **)

val init :
  id ->
  transaction unit

---------

//  pikadayControl.js

function init ( nodeId ) = {
  var picker = new Pikaday ( {
    field: document.getElementById(nodeId),
    firstDay: 1,
    minDate: new Date('2000-01-01'),
    maxDate: new Date('2020-12-31'),
    yearRange: [2000,2020]
  } ) ;
}

---------

The code in the last file above (the JavaScript file pikadayControl.js) was
taken from the demo of the Pikaday datepicker:

  http://dbushell.github.io/Pikaday/

Thanks for any help!

###
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.impredicative.com/pipermail/ur/attachments/20150806/24b23b75/attachment-0001.html>