diff --git a/style.css b/examples/todoapp/style.css similarity index 100% rename from style.css rename to examples/todoapp/style.css diff --git a/todoapp.html b/examples/todoapp/todoapp.html similarity index 84% rename from todoapp.html rename to examples/todoapp/todoapp.html index 8470a8e..726070a 100644 --- a/todoapp.html +++ b/examples/todoapp/todoapp.html @@ -12,7 +12,7 @@ diff --git a/todoapp.nim b/examples/todoapp/todoapp.nim similarity index 81% rename from todoapp.nim rename to examples/todoapp/todoapp.nim index ea71c66..23840f7 100644 --- a/todoapp.nim +++ b/examples/todoapp/todoapp.nim @@ -1,5 +1,5 @@ -import vdom, karax, karaxdsl, jdict, jstrutils +import vdom, karax, karaxdsl, jstrutils type Filter = enum @@ -15,22 +15,19 @@ proc onTodoEnter(ev: Event; n: VNode) = n.value = "" proc removeHandler(ev: Event; n: VNode) = - let id = suffixAsInt(n.id, "remove:") - entries[id] = (cstring(nil), false) + entries[n.key] = (cstring(nil), false) proc editHandler(ev: Event; n: VNode) = - let id = suffixAsInt(n.id, "edit:") - selectedEntry = id + selectedEntry = n.key proc focusLost(ev: Event; n: VNode) = selectedEntry = -1 proc editEntry(ev: Event; n: VNode) = - let id = suffixAsInt(n.id, "todo-edit:") - entries[id][0] = n.value + entries[n.key][0] = n.value selectedEntry = -1 proc toggleEntry(ev: Event; n: VNode) = - let id = suffixAsInt(n.id, "toggle:") + let id = n.key entries[id][1] = not entries[id][1] proc onAllDone(ev: Event; n: VNode) = @@ -56,12 +53,12 @@ proc createEntry(id: int; d: cstring; completed, selected: bool): VNode = if not selected: tdiv(class = "view"): input(class = "toggle", `type` = "checkbox", checked = toChecked(completed), - onclick=toggleEntry, id="toggle:" & &id) - label(onDblClick=editHandler, id="edit:" & &id): + onclick=toggleEntry, key=id) + label(onDblClick=editHandler, key=id): text d - button(class = "destroy", id="remove:" & $id, onclick=removeHandler) + button(class = "destroy", key=id, onclick=removeHandler) else: - input(class = "edit", name = "title", id = "todo-edit:" & &id, + input(class = "edit", name = "title", key=id, onfocusLost = focusLost, onenter = editEntry, value = d, setFocus) @@ -115,10 +112,5 @@ setOnHashChange(proc(hash: cstring) = ) setRenderer createDom -proc onload(session: cstring) {.exportc.} = - for i in 0..1: # 0_000: - entries.add((cstring"Entry " & &i, false)) +proc onload() {.exportc.} = init() - -for i in 0..10_000: - entries.add((cstring"Entry " & &i, false)) \ No newline at end of file diff --git a/dyn.nim b/experiments/dyn.nim similarity index 100% rename from dyn.nim rename to experiments/dyn.nim diff --git a/example.html b/experiments/example.html similarity index 100% rename from example.html rename to experiments/example.html diff --git a/example.nim b/experiments/example.nim similarity index 100% rename from example.nim rename to experiments/example.nim diff --git a/scrollapp.html b/experiments/scrollapp.html similarity index 100% rename from scrollapp.html rename to experiments/scrollapp.html diff --git a/scrollapp.nim b/experiments/scrollapp.nim similarity index 100% rename from scrollapp.nim rename to experiments/scrollapp.nim diff --git a/readme.rst b/readme.rst index a5fd38a..49fad00 100644 --- a/readme.rst +++ b/readme.rst @@ -5,5 +5,6 @@ Karax is a prototype for developing single page applications in Nim. To try it out, run:: + cd examples/todoapp nim js todoapp.nim open todoapp.html diff --git a/src/dom.nim b/src/dom.nim new file mode 100644 index 0000000..9414c89 --- /dev/null +++ b/src/dom.nim @@ -0,0 +1,564 @@ +# +# +# Nim's Runtime Library +# (c) Copyright 2012 Andreas Rumpf +# +# See the file "copying.txt", included in this +# distribution, for details about the copyright. +# + +## Declaration of the Document Object Model for the `JavaScript backend +## `_. + +when not defined(js) and not defined(Nimdoc): + {.error: "This module only works on the JavaScript platform".} + +type + EventTarget* = ref EventTargetObj + EventTargetObj {.importc.} = object of RootObj + onabort*: proc (event: Event) {.nimcall.} + onblur*: proc (event: Event) {.nimcall.} + onchange*: proc (event: Event) {.nimcall.} + onclick*: proc (event: Event) {.nimcall.} + ondblclick*: proc (event: Event) {.nimcall.} + onerror*: proc (event: Event) {.nimcall.} + onfocus*: proc (event: Event) {.nimcall.} + onkeydown*: proc (event: Event) {.nimcall.} + onkeypress*: proc (event: Event) {.nimcall.} + onkeyup*: proc (event: Event) {.nimcall.} + onload*: proc (event: Event) {.nimcall.} + onmousedown*: proc (event: Event) {.nimcall.} + onmousemove*: proc (event: Event) {.nimcall.} + onmouseout*: proc (event: Event) {.nimcall.} + onmouseover*: proc (event: Event) {.nimcall.} + onmouseup*: proc (event: Event) {.nimcall.} + onreset*: proc (event: Event) {.nimcall.} + onselect*: proc (event: Event) {.nimcall.} + onsubmit*: proc (event: Event) {.nimcall.} + onunload*: proc (event: Event) {.nimcall.} + + Window* = ref WindowObj + WindowObj {.importc.} = object of EventTargetObj + document*: Document + event*: Event + history*: History + location*: Location + closed*: bool + defaultStatus*: cstring + innerHeight*, innerWidth*: int + locationbar*: ref TLocationBar + menubar*: ref TMenuBar + name*: cstring + outerHeight*, outerWidth*: int + pageXOffset*, pageYOffset*: int + personalbar*: ref TPersonalBar + scrollbars*: ref TScrollBars + statusbar*: ref TStatusBar + status*: cstring + toolbar*: ref TToolBar + frames*: seq[TFrame] + + Frame* = ref FrameObj + FrameObj {.importc.} = object of WindowObj + + ClassList* = ref ClassListObj + ClassListObj {.importc.} = object of RootObj + + NodeType* = enum + ElementNode = 1, + AttributeNode, + TextNode, + CDATANode, + EntityRefNode, + EntityNode, + ProcessingInstructionNode, + CommentNode, + DocumentNode, + DocumentTypeNode, + DocumentFragmentNode, + NotationNode + + Node* = ref NodeObj + NodeObj {.importc.} = object of EventTargetObj + attributes*: seq[Node] + childNodes*: seq[Node] + children*: seq[Node] + data*: cstring + firstChild*: Node + lastChild*: Node + nextSibling*: Node + nodeName*: cstring + nodeType*: NodeType + nodeValue*: cstring + parentNode*: Node + previousSibling*: Node + innerHTML*: cstring + style*: Style + + Document* = ref DocumentObj + DocumentObj {.importc.} = object of NodeObj + alinkColor*: cstring + bgColor*: cstring + body*: Element + charset*: cstring + cookie*: cstring + defaultCharset*: cstring + fgColor*: cstring + head*: Element + lastModified*: cstring + linkColor*: cstring + referrer*: cstring + title*: cstring + URL*: cstring + vlinkColor*: cstring + anchors*: seq[AnchorElement] + forms*: seq[FormElement] + images*: seq[ImageElement] + applets*: seq[Element] + embeds*: seq[EmbedElement] + links*: seq[LinkElement] + + Element* = ref ElementObj + ElementObj {.importc.} = object of NodeObj + classList*: Classlist + checked*: bool + defaultChecked*: bool + defaultValue*: cstring + disabled*: bool + form*: FormElement + name*: cstring + readOnly*: bool + options*: seq[OptionElement] + + # https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement + HtmlElement* = ref object of Element + contentEditable*: string + isContentEditable*: bool + dir*: string + offsetHeight*: int + offsetWidth*: int + offsetLeft*: int + offsetTop*: int + + LinkElement* = ref LinkObj + LinkObj {.importc.} = object of ElementObj + target*: cstring + text*: cstring + x*: int + y*: int + + EmbedElement* = ref EmbedObj + EmbedObj {.importc.} = object of ElementObj + height*: int + hspace*: int + src*: cstring + width*: int + `type`*: cstring + vspace*: int + + AnchorElement* = ref AnchorObj + AnchorObj {.importc.} = object of ElementObj + text*: cstring + x*, y*: int + + OptionElement* = ref OptionObj + OptionObj {.importc.} = object of ElementObj + defaultSelected*: bool + selected*: bool + selectedIndex*: int + text*: cstring + value*: cstring + + FormElement* = ref FormObj + FormObj {.importc.} = object of ElementObj + action*: cstring + encoding*: cstring + `method`*: cstring + target*: cstring + elements*: seq[Element] + + ImageElement* = ref ImageObj + ImageObj {.importc.} = object of ElementObj + border*: int + complete*: bool + height*: int + hspace*: int + lowsrc*: cstring + src*: cstring + vspace*: int + width*: int + + Style = ref StyleObj + StyleObj {.importc.} = object of RootObj + background*: cstring + backgroundAttachment*: cstring + backgroundColor*: cstring + backgroundImage*: cstring + backgroundPosition*: cstring + backgroundRepeat*: cstring + border*: cstring + borderBottom*: cstring + borderBottomColor*: cstring + borderBottomStyle*: cstring + borderBottomWidth*: cstring + borderColor*: cstring + borderLeft*: cstring + borderLeftColor*: cstring + borderLeftStyle*: cstring + borderLeftWidth*: cstring + borderRight*: cstring + borderRightColor*: cstring + borderRightStyle*: cstring + borderRightWidth*: cstring + borderStyle*: cstring + borderTop*: cstring + borderTopColor*: cstring + borderTopStyle*: cstring + borderTopWidth*: cstring + borderWidth*: cstring + bottom*: cstring + captionSide*: cstring + clear*: cstring + clip*: cstring + color*: cstring + cursor*: cstring + direction*: cstring + display*: cstring + emptyCells*: cstring + cssFloat*: cstring + font*: cstring + fontFamily*: cstring + fontSize*: cstring + fontStretch*: cstring + fontStyle*: cstring + fontVariant*: cstring + fontWeight*: cstring + height*: cstring + left*: cstring + letterSpacing*: cstring + lineHeight*: cstring + listStyle*: cstring + listStyleImage*: cstring + listStylePosition*: cstring + listStyleType*: cstring + margin*: cstring + marginBottom*: cstring + marginLeft*: cstring + marginRight*: cstring + marginTop*: cstring + maxHeight*: cstring + maxWidth*: cstring + minHeight*: cstring + minWidth*: cstring + overflow*: cstring + padding*: cstring + paddingBottom*: cstring + paddingLeft*: cstring + paddingRight*: cstring + paddingTop*: cstring + pageBreakAfter*: cstring + pageBreakBefore*: cstring + position*: cstring + right*: cstring + scrollbar3dLightColor*: cstring + scrollbarArrowColor*: cstring + scrollbarBaseColor*: cstring + scrollbarDarkshadowColor*: cstring + scrollbarFaceColor*: cstring + scrollbarHighlightColor*: cstring + scrollbarShadowColor*: cstring + scrollbarTrackColor*: cstring + tableLayout*: cstring + textAlign*: cstring + textDecoration*: cstring + textIndent*: cstring + textTransform*: cstring + top*: cstring + verticalAlign*: cstring + visibility*: cstring + width*: cstring + wordSpacing*: cstring + zIndex*: int + + # TODO: A lot of the fields in Event belong to a more specific type of event. + # TODO: Should we clean this up? + Event* = ref EventObj + EventObj {.importc.} = object of RootObj + target*: Node + altKey*, ctrlKey*, shiftKey*: bool + button*: int + clientX*, clientY*: int + keyCode*: int + layerX*, layerY*: int + modifiers*: int + ALT_MASK*, CONTROL_MASK*, SHIFT_MASK*, META_MASK*: int + offsetX*, offsetY*: int + pageX*, pageY*: int + screenX*, screenY*: int + which*: int + `type`*: cstring + x*, y*: int + ABORT*: int + BLUR*: int + CHANGE*: int + CLICK*: int + DBLCLICK*: int + DRAGDROP*: int + ERROR*: int + FOCUS*: int + KEYDOWN*: int + KEYPRESS*: int + KEYUP*: int + LOAD*: int + MOUSEDOWN*: int + MOUSEMOVE*: int + MOUSEOUT*: int + MOUSEOVER*: int + MOUSEUP*: int + MOVE*: int + RESET*: int + RESIZE*: int + SELECT*: int + SUBMIT*: int + UNLOAD*: int + + TouchList* {.importc.} = ref object of RootObj + length*: int + + TouchEvent* {.importc.} = ref object of Event + changedTouches*, targetTouches*, touches*: TouchList + + Touch* {.importc.} = ref object of RootObj + identifier*: int + screenX*, screenY*, clientX*, clientY*, pageX*, pageY*: int + target*: Element + radiusX*, radiusY*: int + rotationAngle*: int + force*: float + + Location* = ref LocationObj + LocationObj {.importc.} = object of RootObj + hash*: cstring + host*: cstring + hostname*: cstring + href*: cstring + pathname*: cstring + port*: cstring + protocol*: cstring + search*: cstring + + History* = ref HistoryObj + HistoryObj {.importc.} = object of RootObj + length*: int + + Navigator* = ref NavigatorObj + NavigatorObj {.importc.} = object of RootObj + appCodeName*: cstring + appName*: cstring + appVersion*: cstring + cookieEnabled*: bool + language*: cstring + platform*: cstring + userAgent*: cstring + mimeTypes*: seq[ref TMimeType] + + TPlugin* {.importc.} = object of RootObj + description*: cstring + filename*: cstring + name*: cstring + + TMimeType* {.importc.} = object of RootObj + description*: cstring + enabledPlugin*: ref TPlugin + suffixes*: seq[cstring] + `type`*: cstring + + TLocationBar* {.importc.} = object of RootObj + visible*: bool + TMenuBar* = TLocationBar + TPersonalBar* = TLocationBar + TScrollBars* = TLocationBar + TToolBar* = TLocationBar + TStatusBar* = TLocationBar + + Screen = ref ScreenObj + ScreenObj {.importc.} = object of RootObj + availHeight*: int + availWidth*: int + colorDepth*: int + height*: int + pixelDepth*: int + width*: int + + TTimeOut* {.importc.} = object of RootObj + TInterval* {.importc.} = object of RootObj + +{.push importcpp.} + +# EventTarget "methods" +proc addEventListener*(et: EventTarget, ev: cstring, cb: proc(ev: Event), useCapture: bool = false) + +# Window "methods" +proc alert*(w: Window, msg: cstring) +proc back*(w: Window) +proc blur*(w: Window) +proc captureEvents*(w: Window, eventMask: int) {.deprecated.} +proc clearInterval*(w: Window, interval: ref TInterval) +proc clearTimeout*(w: Window, timeout: ref TTimeOut) +proc close*(w: Window) +proc confirm*(w: Window, msg: cstring): bool +proc disableExternalCapture*(w: Window) +proc enableExternalCapture*(w: Window) +proc find*(w: Window, text: cstring, caseSensitive = false, + backwards = false) +proc focus*(w: Window) +proc forward*(w: Window) +proc handleEvent*(w: Window, e: Event) +proc home*(w: Window) +proc moveBy*(w: Window, x, y: int) +proc moveTo*(w: Window, x, y: int) +proc open*(w: Window, uri, windowname: cstring, + properties: cstring = nil): Window +proc print*(w: Window) +proc prompt*(w: Window, text, default: cstring): cstring +proc releaseEvents*(w: Window, eventMask: int) {.deprecated.} +proc resizeBy*(w: Window, x, y: int) +proc resizeTo*(w: Window, x, y: int) +proc routeEvent*(w: Window, event: Event) +proc scrollBy*(w: Window, x, y: int) +proc scrollTo*(w: Window, x, y: int) +proc setInterval*(w: Window, code: cstring, pause: int): ref TInterval +proc setInterval*(w: Window, function: proc (), pause: int): ref TInterval +proc setTimeout*(w: Window, code: cstring, pause: int): ref TTimeOut +proc setTimeout*(w: Window, function: proc (), pause: int): ref TInterval +proc stop*(w: Window) +proc requestAnimationFrame*(w: Window, function: proc (time: float)): int +proc cancelAnimationFrame*(w: Window, id: int) + +# Node "methods" +proc appendChild*(n, child: Node) +proc appendData*(n: Node, data: cstring) +proc cloneNode*(n: Node, copyContent: bool): Node +proc deleteData*(n: Node, start, len: int) +proc getAttribute*(n: Node, attr: cstring): cstring +proc getAttributeNode*(n: Node, attr: cstring): Node +proc hasChildNodes*(n: Node): bool +proc insertBefore*(n, newNode, before: Node) +proc insertData*(n: Node, position: int, data: cstring) +proc removeAttribute*(n: Node, attr: cstring) +proc removeAttributeNode*(n, attr: Node) +proc removeChild*(n, child: Node) +proc replaceChild*(n, newNode, oldNode: Node) +proc replaceData*(n: Node, start, len: int, text: cstring) +proc scrollIntoView*(n: Node) +proc setAttribute*(n: Node, name, value: cstring) +proc setAttributeNode*(n: Node, attr: Node) + +# Document "methods" +proc captureEvents*(d: Document, eventMask: int) {.deprecated.} +proc createAttribute*(d: Document, identifier: cstring): Node +proc createElement*(d: Document, identifier: cstring): Element +proc createTextNode*(d: Document, identifier: cstring): Node +proc getElementById*(d: Document, id: cstring): Element +proc getElementsByName*(d: Document, name: cstring): seq[Element] +proc getElementsByTagName*(d: Document, name: cstring): seq[Element] +proc getElementsByClassName*(d: Document, name: cstring): seq[Element] +proc getSelection*(d: Document): cstring +proc handleEvent*(d: Document, event: Event) +proc open*(d: Document) +proc releaseEvents*(d: Document, eventMask: int) {.deprecated.} +proc routeEvent*(d: Document, event: Event) +proc write*(d: Document, text: cstring) +proc writeln*(d: Document, text: cstring) + +# Element "methods" +proc blur*(e: Element) +proc click*(e: Element) +proc focus*(e: Node) +proc handleEvent*(e: Element, event: Event) +proc select*(e: Element) +proc getElementsByTagName*(e: Element, name: cstring): seq[Element] +proc getElementsByClassName*(e: Element, name: cstring): seq[Element] + +# FormElement "methods" +proc reset*(f: FormElement) +proc submit*(f: FormElement) + +# EmbedElement "methods" +proc play*(e: EmbedElement) +proc stop*(e: EmbedElement) + +# Location "methods" +proc reload*(loc: Location) +proc replace*(loc: Location, s: cstring) + +# History "methods" +proc back*(h: History) +proc forward*(h: History) +proc go*(h: History, pagesToJump: int) + +# Navigator "methods" +proc javaEnabled*(h: Navigator): bool + +# ClassList "methods" +proc add*(c: ClassList, class: cstring) +proc remove*(c: ClassList, class: cstring) +proc contains*(c: ClassList, class: cstring):bool +proc toggle*(c: ClassList, class: cstring) + +# Style "methods" +proc getAttribute*(s: Style, attr: cstring, caseSensitive=false): cstring +proc removeAttribute*(s: Style, attr: cstring, caseSensitive=false) +proc setAttribute*(s: Style, attr, value: cstring, caseSensitive=false) + +# Event "methods" +proc preventDefault*(ev: Event) + +# TouchEvent "methods" +proc identifiedTouch*(list: TouchList): Touch +proc item*(list: TouchList, i: int): Touch + +{.pop.} + +var + window* {.importc, nodecl.}: Window + document* {.importc, nodecl.}: Document + navigator* {.importc, nodecl.}: Navigator + screen* {.importc, nodecl.}: Screen + +proc decodeURI*(uri: cstring): cstring {.importc, nodecl.} +proc encodeURI*(uri: cstring): cstring {.importc, nodecl.} + +proc escape*(uri: cstring): cstring {.importc, nodecl.} +proc unescape*(uri: cstring): cstring {.importc, nodecl.} + +proc decodeURIComponent*(uri: cstring): cstring {.importc, nodecl.} +proc encodeURIComponent*(uri: cstring): cstring {.importc, nodecl.} +proc isFinite*(x: BiggestFloat): bool {.importc, nodecl.} +proc isNaN*(x: BiggestFloat): bool {.importc, nodecl.} +proc parseFloat*(s: cstring): BiggestFloat {.importc, nodecl.} +proc parseInt*(s: cstring): int {.importc, nodecl.} +proc parseInt*(s: cstring, radix: int):int {.importc, nodecl.} + + +type + TEventHandlers* {.deprecated.} = EventTargetObj + TWindow* {.deprecated.} = WindowObj + TFrame* {.deprecated.} = FrameObj + TNode* {.deprecated.} = NodeObj + TDocument* {.deprecated.} = DocumentObj + TElement* {.deprecated.} = ElementObj + TLink* {.deprecated.} = LinkObj + TEmbed* {.deprecated.} = EmbedObj + TAnchor* {.deprecated.} = AnchorObj + TOption* {.deprecated.} = OptionObj + TForm* {.deprecated.} = FormObj + TImage* {.deprecated.} = ImageObj + TNodeType* {.deprecated.} = NodeType + TEvent* {.deprecated.} = EventObj + TLocation* {.deprecated.} = LocationObj + THistory* {.deprecated.} = HistoryObj + TNavigator* {.deprecated.} = NavigatorObj + TStyle* {.deprecated.} = StyleObj + TScreen* {.deprecated.} = ScreenObj + TApplet* {.importc, deprecated.} = object of RootObj diff --git a/jdict.nim b/src/jdict.nim similarity index 100% rename from jdict.nim rename to src/jdict.nim diff --git a/jstrutils.nim b/src/jstrutils.nim similarity index 100% rename from jstrutils.nim rename to src/jstrutils.nim diff --git a/karax.nim b/src/karax.nim similarity index 99% rename from karax.nim rename to src/karax.nim index fb3003e..f0f70dd 100644 --- a/karax.nim +++ b/src/karax.nim @@ -222,7 +222,7 @@ proc dodraw() = currentTree = newtree # now that it's part of the DOM, give it the focus: if toFocus != nil: - discard "toFocus.focus()" + toFocus.focus() proc visibleKeys(e: Node; a, b: var VKey; h, count: var int) = # we only care about nodes that have a key: diff --git a/karaxdsl.nim b/src/karaxdsl.nim similarity index 100% rename from karaxdsl.nim rename to src/karaxdsl.nim diff --git a/vdom.nim b/src/vdom.nim similarity index 100% rename from vdom.nim rename to src/vdom.nim diff --git a/diffDomTests.html b/tests/diffDomTests.html similarity index 100% rename from diffDomTests.html rename to tests/diffDomTests.html diff --git a/diffDomTests.nim b/tests/diffDomTests.nim similarity index 100% rename from diffDomTests.nim rename to tests/diffDomTests.nim