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! ###
_______________________________________________ Ur mailing list [email protected] http://www.impredicative.com/cgi-bin/mailman/listinfo/ur
