Merge branch 'master' of https://github.com/darkmusic/karax into darkmusic-master

This commit is contained in:
Araq 2017-12-12 15:05:19 +01:00
commit 4428c4ed95
8 changed files with 11561 additions and 51 deletions

2
.gitignore vendored
View file

@ -1,3 +1,5 @@
nimcache/
/tests/tester
/tools/karun
*.code-workspace
*.exe

View file

@ -8,7 +8,9 @@ import karax
proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
data: cstring;
cont: proc (httpStatus: int; response: cstring);
kxi: KaraxInstance = kxi) =
kxi: KaraxInstance = kxi,
useBinary: bool = false,
blob: Blob = nil) =
proc contWrapper(httpStatus: int; response: cstring) =
cont(httpStatus, response)
redraw(kxi)
@ -22,6 +24,7 @@ proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
proc setRequestHeader(r: HttpRequest; a, b: cstring) {.importcpp: "#.setRequestHeader(@)".}
proc statechange(r: HttpRequest; cb: proc()) {.importcpp: "#.onreadystatechange = #".}
proc send(r: HttpRequest; data: cstring) {.importcpp: "#.send(#)".}
proc send(r: HttpRequest, data: Blob) {.importcpp: "#.send(#)".}
proc open(r: HttpRequest; meth, url: cstring; async: bool) {.importcpp: "#.open(@)".}
proc newRequest(): HttpRequest {.importcpp: "new XMLHttpRequest(@)".}
@ -36,7 +39,10 @@ proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
contWrapper(this.status, this.responseText)
else:
contWrapper(this.status, this.statusText)
ajax.send(data)
if useBinary:
ajax.send(blob)
else:
ajax.send(data)
proc ajaxPost*(url: cstring; headers: openarray[(cstring, cstring)];
data: cstring;
@ -44,6 +50,12 @@ proc ajaxPost*(url: cstring; headers: openarray[(cstring, cstring)];
kxi: KaraxInstance = kxi) =
ajax("POST", url, headers, data, cont, kxi)
proc ajaxPost*(url: cstring; headers: openarray[(cstring, cstring)];
data: Blob;
cont: proc (httpStatus: int, response: cstring);
kxi: KaraxInstance = kxi) =
ajax("POST", url, headers, "", cont, kxi, true, data)
proc ajaxGet*(url: cstring; headers: openarray[(cstring, cstring)];
cont: proc (httpStatus: int, response: cstring);
kxi: KaraxInstance = kxi) =

View file

@ -2,7 +2,7 @@
import kdom, vdom, jstrutils, compact, jdict, vstyles
export kdom.Event
export kdom.Event, kdom.Blob
proc kout*[T](x: T) {.importc: "console.log", varargs, deprecated.}
## the preferred way of debugging karax applications. Now deprecated,
@ -85,7 +85,7 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind;
let action = action
let n = n
result = proc (ev: Event) =
if ev.keyCode == 13: keyeventBody()
if cast[KeyboardEvent](ev).keyCode == 13: keyeventBody()
proc laterWrapper(): NativeEventHandler =
let action = action

View file

@ -37,6 +37,38 @@ type
onsubmit*: proc (event: Event) {.nimcall.}
onunload*: proc (event: Event) {.nimcall.}
# https://developer.mozilla.org/en-US/docs/Web/Events
DomEvent* {.pure.} = enum
Abort = "abort",
BeforeInput = "beforeinput",
Blur = "blur",
Click = "click",
CompositionEnd = "compositionend",
CompositionStart = "compositionstart",
CompositionUpdate = "compositionupdate",
DblClick = "dblclick",
Error = "error",
Focus = "focus",
FocusIn = "focusin",
FocusOut = "focusout",
Input = "input",
KeyDown = "keydown",
KeyPress = "keypress",
KeyUp = "keyup",
Load = "load",
MouseDown = "mousedown",
MouseEnter = "mouseenter",
MouseLeave = "mouseleave",
MouseMove = "mousemove",
MouseOut = "mouseout",
MouseOver = "mouseover",
MouseUp = "mouseup",
Resize = "resize",
Scroll = "scroll",
Select = "select",
Unload = "unload",
Wheel = "wheel"
Window* = ref WindowObj
WindowObj {.importc.} = object of EventTargetObj
document*: Document
@ -57,6 +89,7 @@ type
status*: cstring
toolbar*: ref ToolBar
frames*: seq[Frame]
screen*: Screen
Frame* = ref FrameObj
FrameObj {.importc.} = object of WindowObj
@ -131,9 +164,8 @@ type
name*: cstring
readOnly*: bool
options*: seq[OptionElement]
# https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
HtmlElement* = ref object of Element
selectedOptions*: seq[OptionElement]
clientWidth*, clientHeight*: int
contentEditable*: string
isContentEditable*: bool
dir*: string
@ -142,6 +174,87 @@ type
offsetLeft*: int
offsetTop*: int
# https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
ValidityState* = ref ValidityStateObj
ValidityStateObj {.importc.} = object
badInput*: bool
customError*: bool
patternMismatch*: bool
rangeOverflow*: bool
rangeUnderflow*: bool
stepMismatch*: bool
tooLong*: bool
tooShort*: bool
typeMismatch*: bool
valid*: bool
valueMissing*: bool
# https://developer.mozilla.org/en-US/docs/Web/API/Blob
Blob* = ref BlobObj
BlobObj {.importc.} = object of RootObj
size*: int
`type`*: cstring
# https://developer.mozilla.org/en-US/docs/Web/API/File
File* = ref FileObj
FileObj {.importc.} = object of Blob
lastModified*: int
name*: cstring
# https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
InputElement* = ref InputElementObj
InputElementObj {.importc.} = object of Element
# Properties related to the parent form
formAction*: cstring
formEncType*: cstring
formMethod*: cstring
formNoValidate*: bool
formTarget*: cstring
# Properties that apply to any type of input element that is not hidden
`type`*: cstring
autofocus*: bool
required*: bool
value*: cstring
validity*: ValidityState
validationMessage*: cstring
willValidate*: bool
# Properties that apply only to elements of type "checkbox" or "radio"
indeterminate*: bool
# Properties that apply only to elements of type "image"
alt*: cstring
height*: cstring
src*: cstring
width*: cstring
# Properties that apply only to elements of type "file"
accept*: cstring
files*: seq[Blob]
# Properties that apply only to text/number-containing or elements
autocomplete*: cstring
maxLength*: int
size*: int
pattern*: cstring
placeholder*: cstring
min*: cstring
max*: cstring
selectionStart*: int
selectionEnd*: int
selectionDirection*: cstring
# Properties not yet categorized
dirName*: cstring
accessKey*: cstring
list*: Element
multiple*: bool
labels*: seq[Element]
step*: cstring
valueAsDate*: cstring
valueAsNumber*: float
LinkElement* = ref LinkObj
LinkObj {.importc.} = object of ElementObj
target*: cstring
@ -171,13 +284,19 @@ type
text*: cstring
value*: cstring
# https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement
FormElement* = ref FormObj
FormObj {.importc.} = object of ElementObj
acceptCharset*: cstring
action*: cstring
encoding*: cstring
`method`*: cstring
target*: cstring
autocomplete*: cstring
elements*: seq[Element]
encoding*: cstring
enctype*: cstring
length*: int
`method`*: cstring
noValidate*: bool
target*: cstring
ImageElement* = ref ImageObj
ImageObj {.importc.} = object of ElementObj
@ -284,55 +403,467 @@ type
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?
EventPhase* = enum
None = 0,
CapturingPhase,
AtTarget,
BubblingPhase
# https://developer.mozilla.org/en-US/docs/Web/API/Event
Event* = ref EventObj
EventObj {.importc.} = object of RootObj
bubbles*: bool
cancelBubble*: bool
cancelable*: bool
composed*: bool
currentTarget*: Node
defaultPrevented*: bool
eventPhase*: int
target*: Node
altKey*, ctrlKey*, shiftKey*: bool
button*: int
clientX*, clientY*: int
`type`*: cstring
isTrusted*: bool
# https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
UIEvent* = ref UIEventObj
UIEventObj {.importc.} = object of Event
detail*: int64
view*: Window
# https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
KeyboardEvent* = ref KeyboardEventObj
KeyboardEventObj {.importc.} = object of UIEvent
altKey*, ctrlKey*, metaKey*, shiftKey*: bool
code*: cstring
isComposing*: bool
key*: cstring
keyCode*: int
layerX*, layerY*: int
modifiers*: int
ALT_MASK*, CONTROL_MASK*, SHIFT_MASK*, META_MASK*: int
location*: int
# https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
KeyboardEventKey* {.pure.} = enum
# Modifier keys
Alt,
AltGraph,
CapsLock,
Control,
Fn,
FnLock,
Hyper,
Meta,
NumLock,
ScrollLock,
Shift,
Super,
Symbol,
SymbolLock,
# Whitespace keys
ArrowDown,
ArrowLeft,
ArrowRight,
ArrowUp,
End,
Home,
PageDown,
PageUp,
# Editing keys
Backspace,
Clear,
Copy,
CrSel,
Cut,
Delete,
EraseEof,
ExSel,
Insert,
Paste,
Redo,
Undo,
# UI keys
Accept,
Again,
Attn,
Cancel,
ContextMenu,
Escape,
Execute,
Find,
Finish,
Help,
Pause,
Play,
Props,
Select,
ZoomIn,
ZoomOut,
# Device keys
BrigtnessDown,
BrigtnessUp,
Eject,
LogOff,
Power,
PowerOff,
PrintScreen,
Hibernate,
Standby,
WakeUp,
# Common IME keys
AllCandidates,
Alphanumeric,
CodeInput,
Compose,
Convert,
Dead,
FinalMode,
GroupFirst,
GroupLast,
GroupNext,
GroupPrevious,
ModeChange,
NextCandidate,
NonConvert,
PreviousCandidate,
Process,
SingleCandidate,
# Korean keyboards only
HangulMode,
HanjaMode,
JunjaMode,
# Japanese keyboards only
Eisu,
Hankaku,
Hiragana,
HiraganaKatakana,
KanaMode,
KanjiMode,
Katakana,
Romaji,
Zenkaku,
ZenkakuHanaku,
# Function keys
F1,
F2,
F3,
F4,
F5,
F6,
F7,
F8,
F9,
F10,
F11,
F12,
F13,
F14,
F15,
F16,
F17,
F18,
F19,
F20,
Soft1,
Soft2,
Soft3,
Soft4,
# Phone keys
AppSwitch,
Call,
Camera,
CameraFocus,
EndCall,
GoBack,
GoHome,
HeadsetHook,
LastNumberRedial,
Notification,
MannerMode,
VoiceDial,
# Multimedia keys
ChannelDown,
ChannelUp,
MediaFastForward,
MediaPause,
MediaPlay,
MediaPlayPause,
MediaRecord,
MediaRewind,
MediaStop,
MediaTrackNext,
MediaTrackPrevious,
# Audio control keys
AudioBalanceLeft,
AudioBalanceRight,
AudioBassDown,
AudioBassBoostDown,
AudioBassBoostToggle,
AudioBassBoostUp,
AudioBassUp,
AudioFaderFront,
AudioFaderRear,
AudioSurroundModeNext,
AudioTrebleDown,
AudioTrebleUp,
AudioVolumeDown,
AUdioVolumeMute,
AudioVolumeUp,
MicrophoneToggle,
MicrophoneVolumeDown,
MicrophoneVolumeMute,
MicrophoneVolumeUp,
# TV control keys
TV,
TV3DMode,
TVAntennaCable,
TVAudioDescription,
TVAudioDescriptionMixDown,
TVAudioDescriptionMixUp,
TVContentsMenu,
TVDataService,
TVInput,
TVInputComponent1,
TVInputComponent2,
TVInputComposite1,
TVInputComposite2,
TVInputHDMI1,
TVInputHDMI2,
TVInputHDMI3,
TVInputHDMI4,
TVInputVGA1,
TVMediaContext,
TVNetwork,
TVNumberEntry,
TVPower,
TVRadioService,
TVSatellite,
TVSatelliteBS,
TVSatelliteCS,
TVSatelliteToggle,
TVTerrestrialAnalog,
TVTerrestrialDigital,
TVTimer,
# Media controller keys
AVRInput,
AVRPower,
ColorF0Red,
ColorF1Green,
ColorF2Yellow,
ColorF3Blue,
ColorF4Grey,
ColorF5Brown,
ClosedCaptionToggle,
Dimmer,
DisplaySwap,
DVR,
Exit,
FavoriteClear0,
FavoriteClear1,
FavoriteClear2,
FavoriteClear3,
FavoriteRecall0,
FavoriteRecall1,
FavoriteRecall2,
FavoriteRecall3,
FavoriteStore0,
FavoriteStore1,
FavoriteStore2,
FavoriteStore3,
Guide,
GuideNextDay,
GuidePreviousDay,
Info,
InstantReplay,
Link,
ListProgram,
LiveContent,
Lock,
MediaApps,
MediaAudioTrack,
MediaLast,
MediaSkipBackward,
MediaSkipForward,
MediaStepBackward,
MediaStepForward,
MediaTopMenu,
NavigateIn,
NavigateNext,
NavigateOut,
NavigatePrevious,
NextFavoriteChannel,
NextUserProfile,
OnDemand,
Pairing,
PinPDown,
PinPMove,
PinPUp,
PlaySpeedDown,
PlaySpeedReset,
PlaySpeedUp,
RandomToggle,
RcLowBattery,
RecordSpeedNext,
RfBypass,
ScanChannelsToggle,
ScreenModeNext,
Settings,
SplitScreenToggle,
STBInput,
STBPower,
Subtitle,
Teletext,
VideoModeNext,
Wink,
ZoomToggle,
# Speech recognition keys
SpeechCorrectionList,
SpeechInputToggle,
# Document keys
Close,
New,
Open,
Print,
Save,
SpellCheck,
MailForward,
MailReply,
MailSend,
# Application selector keys
LaunchCalculator,
LaunchCalendar,
LaunchContacts,
LaunchMail,
LaunchMediaPlayer,
LaunchMusicPlayer,
LaunchMyComputer,
LaunchPhone,
LaunchScreenSaver,
LaunchSpreadsheet,
LaunchWebBrowser,
LaunchWebCam,
LaunchWordProcessor,
LaunchApplication1,
LaunchApplication2,
LaunchApplication3,
LaunchApplication4,
LaunchApplication5,
LaunchApplication6,
LaunchApplication7,
LaunchApplication8,
LaunchApplication9,
LaunchApplication10,
LaunchApplication11,
LaunchApplication12,
LaunchApplication13,
LaunchApplication14,
LaunchApplication15,
LaunchApplication16,
# Browser control keys
BrowserBack,
BrowserFavorites,
BrowserForward,
BrowserHome,
BrowserRefresh,
BrowserSearch,
BrowserStop,
# Numeric keypad keys
Key11,
Key12,
Separator
MouseButtons* = enum
NoButton = 0,
PrimaryButton = 1,
SecondaryButton = 2,
AuxilaryButton = 4,
FourthButton = 8,
FifthButton = 16
# https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
MouseEvent* = ref MouseEventObj
MouseEventObj {.importc.} = object of UIEvent
altKey*, ctrlKey*, metaKey*, shiftKey*: bool
button*: int
buttons*: int
clientX*, clientY*: int
movementX*, movementY*: int
offsetX*, offsetY*: int
pageX*, pageY*: int
relatedTarget*: EventTarget
#region*: cstring
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
DataTransferItemKind* {.pure.} = enum
File = "file",
String = "string"
# https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem
DataTransferItem* = ref DataTransferItemObj
DataTransferItemObj {.importc.} = object of RootObj
kind*: cstring
`type`*: cstring
# https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
DataTransfer* = ref DataTransferObj
DataTransferObj {.importc.} = object of RootObj
dropEffect*: cstring
effectAllowed*: cstring
files*: seq[Element]
items*: seq[DataTransferItem]
types*: seq[cstring]
DataTransferDropEffect* {.pure.} = enum
None = "none",
Copy = "copy",
Link = "link",
Move = "move"
DataTransferEffectAllowed* {.pure.} = enum
None = "none",
Copy = "copy",
CopyLink = "copyLink",
CopyMove = "copyMove",
Link = "link",
LinkMove = "linkMove",
Move = "move",
All = "all",
Uninitialized = "uninitialized"
DragEventTypes* = enum
Drag = "drag",
DragEnd = "dragend",
DragEnter = "dragenter",
DragExit = "dragexit",
DragLeave = "dragleave",
DragOver = "dragover",
DragStart = "dragstart",
Drop = "drop"
# https://developer.mozilla.org/en-US/docs/Web/API/DragEvent
DragEvent* {.importc.} = object of MouseEvent
dataTransfer*: DataTransfer
TouchList* {.importc.} = ref object of RootObj
length*: int
length*: int
TouchEvent* {.importc.} = ref object of Event
changedTouches*, targetTouches*, touches*: TouchList
Touch* {.importc.} = ref object of RootObj
Touch* = ref TouchObj
TouchObj {.importc.} = object of RootObj
identifier*: int
screenX*, screenY*, clientX*, clientY*, pageX*, pageY*: int
target*: Element
@ -340,6 +871,10 @@ type
rotationAngle*: int
force*: float
TouchEvent* = ref TouchEventObj
TouchEventObj {.importc.} = object of UIEvent
changedTouches*, targetTouches*, touches*: seq[Touch]
Location* = ref LocationObj
LocationObj {.importc.} = object of RootObj
hash*: cstring
@ -397,6 +932,11 @@ type
TimeOut* {.importc.} = ref object of RootObj
Interval* {.importc.} = object of RootObj
AddEventListenerOptions* = object
capture*: bool
once*: bool
passive*: bool
when defined(nodejs):
# we provide a dummy DOM for nodejs for testing purposes
proc len*(x: Node): int = x.childNodes.len
@ -483,6 +1023,7 @@ proc clearTimeout*(t: Timeout) {.importc, nodecl.}
# EventTarget "methods"
proc addEventListener*(et: EventTarget, ev: cstring, cb: proc(ev: Event), useCapture: bool = false)
proc addEventListener*(et: EventTarget, ev: cstring, cb: proc(ev: Event), options: AddEventListenerOptions)
proc removeEventListener*(et: EventTarget; ev: cstring; cb: proc(ev: Event))
# Window "methods"
@ -491,7 +1032,7 @@ proc back*(w: Window)
proc blur*(w: Window)
proc captureEvents*(w: Window, eventMask: int) {.deprecated.}
proc clearInterval*(w: Window, interval: ref Interval)
proc clearTimeout*(w: Window, timeout: TimeOut)
proc clearTimeout*(w: Window, timeout: ref TimeOut)
proc close*(w: Window)
proc confirm*(w: Window, msg: cstring): bool
proc disableExternalCapture*(w: Window)
@ -500,6 +1041,7 @@ proc find*(w: Window, text: cstring, caseSensitive = false,
backwards = false)
proc focus*(w: Window)
proc forward*(w: Window)
proc getComputedStyle*(w: Window, e: Node, pe:Node = nil): Style
proc handleEvent*(w: Window, e: Event)
proc home*(w: Window)
proc moveBy*(w: Window, x, y: int)
@ -516,7 +1058,7 @@ proc scrollBy*(w: Window, x, y: int)
proc scrollTo*(w: Window, x, y: int)
proc setInterval*(w: Window, code: cstring, pause: int): ref Interval
proc setInterval*(w: Window, function: proc (), pause: int): ref Interval
proc setTimeout*(w: Window, code: cstring, pause: int): TimeOut
proc setTimeout*(w: Window, code: cstring, pause: int): ref TimeOut
proc setTimeout*(w: Window, function: proc (), pause: int): ref Interval
proc stop*(w: Window)
proc requestAnimationFrame*(w: Window, function: proc (time: float)): int
@ -526,6 +1068,7 @@ proc cancelAnimationFrame*(w: Window, id: int)
proc appendData*(n: Node, data: cstring)
proc cloneNode*(n: Node, copyContent: bool): Node
proc deleteData*(n: Node, start, len: int)
proc focus*(e: Node)
proc getAttribute*(n: Node, attr: cstring): cstring
proc getAttributeNode*(n: Node, attr: cstring): Node
proc hasChildNodes*(n: Node): bool
@ -550,11 +1093,13 @@ 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)
proc querySelector*(d: Document, selectors: cstring): Element
proc querySelectorAll*(d: Document, selectors: cstring): seq[Element]
# Element "methods"
proc blur*(e: Element)
proc click*(e: Element)
proc focus*(e: Node)
proc focus*(e: Element)
proc handleEvent*(e: Element, event: Event)
proc select*(e: Element)
proc getElementsByTagName*(e: Element, name: cstring): seq[Element]
@ -563,6 +1108,8 @@ proc getElementsByClassName*(e: Element, name: cstring): seq[Element]
# FormElement "methods"
proc reset*(f: FormElement)
proc submit*(f: FormElement)
proc checkValidity*(e: FormElement): bool
proc reportValidity*(e: FormElement): bool
# EmbedElement "methods"
proc play*(e: EmbedElement)
@ -593,12 +1140,37 @@ proc setAttribute*(s: Style, attr, value: cstring, caseSensitive=false)
# Event "methods"
proc preventDefault*(ev: Event)
proc stopImmediatePropagation*(ev: Event)
proc stopPropagation*(ev: Event)
# KeyboardEvent "methods"
proc getModifierState*(ev: KeyboardEvent, keyArg: cstring): bool
# MouseEvent "methods"
proc getModifierState*(ev: MouseEvent, keyArg: cstring): bool
# TouchEvent "methods"
proc identifiedTouch*(list: TouchList): Touch
proc item*(list: TouchList, i: int): Touch
# DataTransfer "methods"
proc clearData*(dt: DataTransfer, format: cstring)
proc getData*(dt: DataTransfer, format: cstring): cstring
proc setData*(dt: DataTransfer, format: cstring, data: cstring)
proc setDragImage*(dt: DataTransfer, img: Element, xOffset: int64, yOffset: int64)
# DataTransferItem "methods"
proc getAsFile*(dti: DataTransferItem): File
# InputElement "methods"
proc setSelectionRange*(e: InputElement, selectionStart: int, selectionEnd: int, selectionDirection: cstring = "none")
proc setRangeText*(e: InputElement, replacement: cstring, startindex: int = 0, endindex: int = 0, selectionMode: cstring = "preserve")
proc setCustomValidity*(e: InputElement, error: cstring)
proc checkValidity*(e: InputElement): bool
# Blob "methods"
proc slice*(e: Blob, startindex: int = 0, endindex: int = e.size, contentType: cstring = "")
{.pop.}
proc setAttr*(n: Node; key, val: cstring) {.importcpp: "#.setAttribute(@)".}
@ -657,3 +1229,4 @@ proc inViewport*(el: Node): bool =
proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}
proc offsetTop*(e: Node): int {.importcpp: "#.offsetTop", nodecl.}
proc offsetLeft*(e: Node): int {.importcpp: "#.offsetLeft", nodecl.}

33
tests/domEventTests.css Normal file
View file

@ -0,0 +1,33 @@
#dragDiv {
background-color: #0d1224;
width: 500px;
height: 100px;
position: absolute;
top: 500px;
left: 200px;
text-align: center;
cursor: move;
color: rgb(60, 201, 163);
}
#results {
font-family: monospace;
font-size: 10pt;
width: 100%;
height: 400px;
overflow: auto;
background-color: #000000;
color: forestgreen;
}
#test10input1, #test10input2, #test11h3, #test12input {
visibility: hidden;
}
#test11h3 {
color: gold;
}
body {
background-color: dimgrey;
}

13
tests/domEventTests.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>DOM Event Tests</title>
<link href="domEventTests.css" rel="stylesheet" />
<meta charset="UTF-8" />
<script src="jquery-3.2.1.js" type="text/javascript"></script>
</head>
<body id="body">
<div id="ROOT"></div>
<script src="nimcache/domEventTests.js" type="text/javascript"></script>
</body>
</html>

624
tests/domEventTests.nim Normal file
View file

@ -0,0 +1,624 @@
import times, jstrutils, strutils, kdom, karax, karaxdsl, vdom, tables
var
results: seq[cstring]
dragEventsCompleted = initTable[DragEventTypes, bool]()
testRunning: array[13, bool]
testCompleted: array[13, bool]
test2ImageDrop = false
dblClickCount = 0
test6ClickCount = 0
test8Failure = false
test10inputFocusCount = 0
test12Failure = false
proc getLogText(text: string): cstring =
result = "[$#]: $#" % [format(getLocalTime(getTime()), "HH:mm:ss"), $text]
proc log(text: string, clear: bool = false) =
if clear:
results = @[]
results.add getLogText(text)
echo text
redrawSync()
# Scroll to top after adding text using JQuery
discard window.setTimeout("$('#results').animate({ scrollTop: 0 }, 100);", 100)
proc check(cond: bool, msg: string) =
if not cond:
log "FAIL: " & msg
doAssert(cond, msg)
proc check(cond: bool, msg: string, warn: bool): bool =
if not cond:
if warn:
log "WARNING: " & msg
else:
log "FAIL: " & msg
doAssert(cond, msg)
result = cond
proc dragDivDragStart(ev: kdom.Event) =
dragEventsCompleted[DragStart] = true
var dgev = cast[DragEvent](ev)
var dragDiv = document.getElementById("dragDiv")
if dragDiv != nil:
var style = window.getComputedStyle(dgev.target)
var dataX = $(parseInt(style.left) - dgev.clientX)
var dataY = $(parseInt(style.top) - dgev.clientY)
dgev.dataTransfer.setData("text/plain", dataX & "," & dataY)
var img = (ImageElement)document.createElement("img")
img.src ="https://nim-lang.org/assets/img/logo.svg"
dgev.dataTransfer.setDragImage(img, 0, 0)
proc dragDivDragOver(ev: kdom.Event) =
dragEventsCompleted[DragOver] = true
ev.preventDefault()
proc checkAllTests() =
var allTestsPassed = true
for a in testCompleted:
if not a:
allTestsPassed = false
break
if allTestsPassed:
log "All tests completed successfully!"
else:
log "Some tests failed. Check the log."
proc completeTest13() =
testRunning[12] = false
testCompleted[12] = true
log "Test 13 completed successfully."
checkAllTests()
proc test13() =
testRunning[12] = true
log "Test 13 started."
log "This test verifies KeyboardEvent getModifierState functionality."
log "To continue, press the left CTRL key."
proc test12focus1(ev: kdom.Event) =
ev.stopImmediatePropagation()
proc test12focus2(ev: kdom.Event) =
test12Failure = true
check false, "Unexpected listener invocation."
proc test12focus3(ev: kdom.Event) =
test12Failure = true
check false, "Unexpected listener invocation."
proc completeTest12() =
if not test12Failure:
var elmt = document.getElementById("test12input")
elmt.style.visibility = "hidden"
testRunning[11] = false
testCompleted[11] = true
log "Test 12 completed successfully."
test13()
proc test12() =
testRunning[11] = true
log "Test 12 started."
log "This test verifies stopImmediatePropagation functionality."
var elmt = document.getElementById("test12input")
elmt.style.visibility = "visible"
elmt.addEventListener($Focus, test12focus1)
elmt.addEventListener($Focus, test12focus2)
elmt.addEventListener($Focus, test12focus3)
elmt.focus()
discard setTimeout(completeTest12, 500)
proc completeTest11() =
document.querySelector("h3").style.visibility = "hidden"
testRunning[10] = false
testCompleted[10] = true
log "Test 11 completed."
test12()
proc test11() =
testRunning[10] = true
log "Test 11 started."
log "This test checks querySelector and querySelectorAll."
document.getElementById("test11h3").style.visibility = "visible"
var elmt = document.querySelector("h3")
check elmt != nil, "querySelector returned nil."
log "text: " & $elmt.innerHTML
check $elmt.innerHTML == "test 11", "Unexpected h3 value."
var elmts = document.querySelectorAll("h3")
log "elmts len: " & $elmts.len
check elmts.len == 1, "Unexpected elmts len."
log "text: " & $elmts[0].innerHTML
check $elmts[0].innerHTML == "test 11", "Unexpected h3 value."
discard setTimeout(completeTest11, 500)
proc completeTest10() =
testRunning[9] = false
testCompleted[9] = true
var test10input1 = document.getElementById("test10input1")
var test10input2 = document.getElementById("test10input2")
test10input1.style.visibility = "hidden"
test10input2.style.visibility = "hidden"
log "Test 10 completed."
test11()
proc test10inputOnfocus(ev: kdom.Event) =
if testRunning[9]:
inc test10inputFocusCount
if test10inputFocusCount > 3:
discard setTimeout(completeTest10, 500)
proc test10() =
log "Test 10 started."
log "This test checks element.focus()."
testRunning[9] = true
var test10input1 = document.getElementById("test10input1")
var test10input2 = document.getElementById("test10input2")
test10input1.style.visibility = "visible"
test10input2.style.visibility = "visible"
test10input1.addEventListener($DomEvent.Focus, test10inputOnfocus)
test10input2.addEventListener($DomEvent.Focus, test10inputOnfocus)
test10input1.focus()
test10input2.focus()
test10input1.focus()
test10input2.focus()
proc completeTest9() =
var test9Value = $document.getElementById("test9value").value
doAssert(test9Value == "[test9]", "Unexpected test9 value.")
testRunning[8] = false
testCompleted[8] = true
test10()
proc test9() =
log "Test 9 started."
log "This tests the setTimeout(w: Window, code: cstring, pause: int) proc."
testRunning[8] = true
discard window.setTimeout("document.getElementById('test9value').value = '[test9]';", 500)
discard window.setTimeout(completeTest9, 1000)
proc completeTest8() =
if not test8Failure:
log "Test 8 completed successfully."
testRunning[7] = false
testCompleted[7] = true
test9()
else:
log "Test 8 failed."
proc failTest8() =
test8Failure = true
check(false, "ClearTimeout failed.")
proc test8() =
log "Test 8 started."
log "This test checks that clearTimeout() works correctly."
testRunning[7] = true
var timeout = setTimeout(failTest8, 1000)
clearTimeout(timeout)
discard setTimeout(completeTest8, 1200)
proc test7() =
log "Test 7 started."
log "This test ensures that mouse events correctly pass button and key modifier information."
log "To continue, right-click while holding SHIFT."
testRunning[6] = true
# A mouseMove handler is needed (even if empty) so mouseDown will have a value for movementX and movementY
proc mouseMove(ev: kdom.Event) =
discard
proc mouseDown(ev: kdom.Event) =
var me = (MouseEvent)ev
if testRunning[5]:
log "[ME] button: " & $me.button
log "[ME] buttons: " & $me.buttons
log "[ME] altKey: " & $me.altKey
log "[ME] ctrlKey: " & $me.ctrlKey
log "[ME] metaKey: " & $me.metaKey
log "[ME] shiftKey: " & $me.shiftKey
log "[ME] clientX: " & $me.clientX
check me.clientX > 0, "Unexpected clientX value."
log "[ME] clientY: " & $me.clientY
check me.clientY > 0, "Unexpected clientY value."
log "[ME] movementX: " & $me.movementX
check me.movementX > 0, "Unexpected movementX value."
log "[ME] movementY: " & $me.movementY
check me.movementY > 0, "Unexpected movementY value."
log "[ME] offsetX: " & $me.offsetX
check me.offsetX > 0, "Unexpected offsetX value."
log "[ME] offsetY: " & $me.offsetY
check me.offsetY > 0, "Unexpected offsetY value."
log "[ME] pageX: " & $me.pageX
check me.pageX > 0, "Unexpected pageX value."
log "[ME] pageY: " & $me.pageY
check me.pageY > 0, "Unexpected pageY value."
log "[ME] relatedTarget == nil: " & $(me.relatedTarget == nil)
log "[ME] screenX: " & $me.screenX
check me.screenX > 0, "Unexpected screenX value."
log "[ME] screenY: " & $me.screenY
check me.screenY > 0, "Unexpected screenY value."
log "[ME] x: " & $me.x
check me.x > 0, "Unexpected x value."
log "[ME] y: " & $me.y
check me.y > 0, "Unexpected y value."
if dblClickCount == 1:
inc test6ClickCount
if test6ClickCount > 1:
testRunning[5] = false
testCompleted[5] = true
log "Test 6 completed successfully."
test7()
elif testRunning[6]:
log "[ME] buttons: " & $me.buttons
var passed = check(me.buttons == (int)SecondaryButton, "Unexpected buttons value.", true)
log "[ME] shiftKey: " & $me.shiftKey
passed = passed and check(me.shiftKey, "Unexpected shiftKey value.", true)
var isShiftPressed = me.getModifierState($KeyboardEventKey.Shift)
log "[ME] getModifierState shift result: " & $isShiftPressed
passed = passed and check(isShiftPressed, "Unexpected getModifierState shift result.", true)
if passed:
log "Test 7 completed successfully."
testRunning[6] = false
testCompleted[6] = true
ev.preventDefault()
if testCompleted[6]:
test8()
proc dblClick(ev: kdom.Event) =
inc dblClickCount
check dblClickCount == 1, "Unexpected double-click event invocation."
log "Try double-clicking again."
proc test6() =
log "Test 6 started."
log "This test validates that addEventListener can be called by passing AddEventListenerOptions, and the options work correctly."
log "To continue, try double-clicking the mouse."
var options = AddEventListenerOptions(once:true)
document.addEventListener($DomEvent.DblClick, dblClick, options)
testRunning[5] = true
proc test5() =
log "Test 5 started."
log "This test validates the newly added properties: window.screen.width, window.scren.height, element.clientWidth, and element.clientHeight."
log "window.screen.width: " & $window.screen.width
check(window.screen.width > 0, "Unexpected value for window.screen.width.")
log "window.screen.height: " & $window.screen.height
check(window.screen.height > 0, "Unexpected value for window.screen.height.")
var elem = document.getElementById("results")
log "results div clientWidth: " & $elem.clientWidth
check(elem.clientWidth > 0, "Unexpected value for clientWidth.")
log "results div clientHeight: " & $elem.clientHeight
check(elem.clientHeight > 0, "Unexpected value for clientHeight.")
testRunning[4] = false
testCompleted[4] = true
log "Test 5 completed successfully."
test6()
proc keyDown(ev: kdom.Event) =
var kbev = ((KeyboardEvent)ev)
if testRunning[2]:
log "[KB] altKey: " & $kbev.altKey
log "[KB] ctrlKey: " & $kbev.ctrlKey
log "[KB] metaKey: " & $kbev.metaKey
log "[KB] shiftKey: " & $kbev.shiftKey
log "[KB] code: " & $kbev.code
log "[KB] isComposing: " & $kbev.isComposing
log "[KB] key: " & $kbev.key
log "[KB] keyCode: " & $kbev.keyCode
log "[KB] location: " & $kbev.location
log "Test 3 completed successfully."
testRunning[2] = false
testCompleted[2] = true
testRunning[3] = true
log "Test 4 started."
log "This test ensures the child events have access to base event settings."
log "[KB] event.bubbles: " & $kbev.bubbles
check kbev.bubbles, "Unexpected event.bubbles value."
log "[KB] event.cancelBubble: " & $kbev.cancelBubble
check kbev.cancelBubble == false, "Unexpected event.cancelBubble value."
log "[KB] event.cancelable: " & $kbev.cancelable
check kbev.cancelable, "Unexpected event.cancelable value."
log "[KB] event.composed: " & $kbev.composed
check kbev.composed, "Unexpected event.composed value."
log "[KB] event.currentTarget.nodeName: " & $kbev.currentTarget.nodeName
check kbev.currentTarget.nodeName == "#document", "Unexpected event.currentTarget.nodeName value."
log "[KB] event.defaultPrevented: " & $kbev.defaultPrevented
check kbev.defaultPrevented == false, "Unexpected event.defaultPrevented value."
log "[KB] event.eventPhase: " & $kbev.eventPhase
check EventPhase(kbev.eventPhase) == BubblingPhase, "Unexpected event.eventPhase value."
log "[KB] event.isTrusted: " & $kbev.isTrusted
check kbev.isTrusted, "Unexpected event.isTrusted value."
log "[UI] kbev.detail: " & $kbev.detail
log "[UI] kbev.view.outerHeight: " & $kbev.view.outerHeight
check kbev.view.outerHeight > 0, "Unexpected view.outerHeight value."
log "[UI] kbev.view.outerWidth: " & $kbev.view.outerWidth
check kbev.view.outerWidth > 0, "Unexpected view.outerWidth value."
testRunning[3] = false
testCompleted[3] = true
log "Test 4 completed."
test5()
elif testRunning[12]:
if kbev.code == "ControlLeft":
log "[KB] altKey: " & $kbev.altKey
log "[KB] ctrlKey: " & $kbev.ctrlKey
log "[KB] metaKey: " & $kbev.metaKey
log "[KB] shiftKey: " & $kbev.shiftKey
log "[KB] code: " & $kbev.code
log "[KB] isComposing: " & $kbev.isComposing
log "[KB] key: " & $kbev.key
log "[KB] keyCode: " & $kbev.keyCode
log "[KB] location: " & $kbev.location
var isControl = kbev.getModifierState($KeyboardEventKey.Control)
log "[KB] getModifierState result: " & $isControl
check isControl, "Unexpected getModifierState return value."
completeTest13()
proc test3() =
log "Test 3 started."
log "This test validates KeyboardEvent handling."
log "Click on the browser to focus, and then press any key."
testRunning[2] = true
proc dragDivDrop(ev: kdom.Event) =
dragEventsCompleted[Drop] = true
var dgev = cast[DragEvent](ev)
var dragDiv = document.getElementById("dragDiv")
var data = $dgev.dataTransfer.getData("text/plain")
var dt = dgev.dataTransfer
if not test2ImageDrop:
var offset = data.split(",")
var newLeft = dgev.clientX + parseInt(offset[0])
var newTop = dgev.clientY + parseInt(offset[1])
if newLeft < 0: newLeft = 0
if newTop < 0: newTop = 0
if newLeft + dragDiv.clientWidth > window.outerWidth: newLeft = window.outerWidth - dragDiv.clientWidth
if newTop + dragDiv.clientHeight > window.outerHeight: newTop = window.outerHeight - dragDiv.clientHeight
dragDiv.style.left = $newLeft & "px"
dragDiv.style.top = $newTop & "px"
if testRunning[0]:
log "[drop] Drop coords: $#, $#" % [$newLeft, $newTop]
if testCompleted[0] and not testCompleted[1] and not testRunning[1]:
testRunning[1] = true
log "Test 2 started."
log "This test validates the DataTransfer and DataTransferItem objects passed as part of the drag events."
var isChrome = ($navigator.userAgent).contains("Chrome")
log "[DT] effectAllowed: " & $dt.effectAllowed
var expectedEffectAllowed = $Uninitialized
if isChrome:
expectedEffectAllowed = if test2ImageDrop: $DataTransferEffectAllowed.Copy else: $DataTransferEffectAllowed.All
check(dt.effectAllowed == $expectedEffectAllowed, "Unexpected effectAllowed value.")
if not test2ImageDrop:
log "[DT] dropEffect: " & $dt.dropEffect
var expectedDropEffect = if isChrome: $DataTransferDropEffect.None else: $DataTransferDropEffect.Move
check(dt.dropEffect == $expectedDropEffect, "Unexpected dropEffect value.")
var expectedFilesLen = if test2ImageDrop: 1 else: 0
log "[DT] files len: " & $dt.files.len
check(dt.files.len == expectedFilesLen, "Unexpected files length.")
var expectedItemsLen = 1
log "[DT] items len: " & $dt.items.len
check(dt.items.len == expectedItemsLen, "Unexpected items length.")
var expectedItemKind = if test2ImageDrop: $DataTransferItemKind.File else: $DataTransferItemKind.String
log "[DT] items[0].kind: " & $dt.items[0].kind
check(dt.items[0].kind == expectedItemKind, "Unexpected item kind.")
var expectedItemType = if test2ImageDrop: "image/png" else: "text/plain"
log "[DT] items[0].type: " & $dt.items[0].`type`
check(dt.items[0].`type` == expectedItemType, "Unexpected item type.")
var expectedTypesLen = if not isChrome and test2ImageDrop: 2 else: 1
log "[DT] types len: " & $dt.types.len
check(dt.types.len == expectedTypesLen, "Unexpected types length.")
if test2ImageDrop:
log "[DT] types[0]: " & $dt.types[0]
if isChrome:
check(dt.types[0] == "Files", "Unexpected type value.")
else:
log "[DT] types[1]: " & $dt.types[1]
check(dt.types[0] == "application/x-moz-file", "Unexpected type value.")
check(dt.types[1] == "Files", "Unexpected type value.")
if test2ImageDrop:
test2ImageDrop = false
# TODO: Determine why getAsString() does invoke callback
# proc getAsString*(dti: DataTransferItem, callback: proc(data: cstring))
var jfile = dt.items[0].getAsFile()
log "[DT] file name: " & $jfile.name
check(jfile.name.len > 0, "Unexpected file name length.")
testCompleted[1] = true
testRunning[1] = false
log "Test 2 completed successfully."
test3()
ev.preventDefault()
return
document.getElementById("dragDiv").style.visibility = "hidden"
log "To continue, drag a .PNG file (file type matters) anywhere on this page."
log "NOTE: If the browser redirects to the image, then consider this test as failed."
test2ImageDrop = true
testRunning[1] = false
ev.preventDefault()
proc dragDivDrag(ev: kdom.Event) =
dragEventsCompleted[Drag] = true
ev.preventDefault()
proc dragDivDragLeave(ev: kdom.Event) =
dragEventsCompleted[DragLeave] = true
if testRunning[0]:
log "[dragLeave]"
ev.preventDefault()
proc dragDivDragExit(ev: kdom.Event) =
dragEventsCompleted[DragExit] = true
if testRunning[0]:
log "[dragExit]"
ev.preventDefault()
proc dragDivDragEnd(ev: kdom.Event) =
dragEventsCompleted[DragEnd] = true
if testRunning[0]:
log "[dragEnd]"
ev.preventDefault()
proc dragDivDragEnter(ev: kdom.Event) =
dragEventsCompleted[DragEnter] = true
if testRunning[0]:
log "[dragEnter]"
ev.preventDefault()
proc initDragEvents() =
log "Drag event initialization started."
var dragDiv = document.getElementById("dragDiv")
document.addEventListener($DragEventTypes.DragOver, dragDivDragOver, false)
document.addEventListener($DragEventTypes.Drop, dragDivDrop, false)
document.addEventListener($DragEventTypes.Drag, dragDivDrag, false)
dragDiv.addEventListener($DragEventTypes.DragStart, dragDivDragStart, false)
dragDiv.addEventListener($DragEventTypes.DragExit, dragDivDragExit, false)
dragDiv.addEventListener($DragEventTypes.DragLeave, dragDivDragLeave, false)
dragDiv.addEventListener($DragEventTypes.DragEnd, dragDivDragEnd, false)
dragDiv.addEventListener($DragEventTypes.DragEnter, dragDivDragEnter, false)
log "Drag event initialization complete."
log "Drag the div to continue the test. Make sure you drag the div over another element."
log "Then click the \"Check test 1 status\" button."
proc initMouseEvents() =
log "Mouse event initialization started."
document.addEventListener($DomEvent.MouseDown, mouseDown, false)
document.addEventListener($DomEvent.MouseMove, mouseMove, false)
log "Mouse event initialization complete."
proc initKbEvents() =
log "KB event initialization started."
document.addEventListener($DomEvent.KeyDown, keyDown, false)
log "KB event initialization complete."
proc startTests() =
log "[Disclaimer: these tests have been tested successfully on Linux with Firefox and Chromium. Your results may vary.]"
log "Note: these tests require some manual steps, which will be shown here."
log "Note: new entries appear in this text area at the top, so read in this direction."
log " | | | | | | | | | | | | | | | | | | | | | |"
log " / \\ / \\ / \\ / \\ / \\ / \\ / \\ / \\ / \\ / \\ / \\"
log "Test 1 started."
log "This test checks that drag events are fired."
testRunning[0] = true
for evt in [Drag, DragEnd, DragEnter, DragExit, DragLeave, DragOver, DragStart, Drop]:
dragEventsCompleted.add(evt, false)
initKbEvents()
initMouseEvents()
initDragEvents()
proc checkTest1Status() =
var evtsCompleted = true
# Chrome doesn't seem to send DragExit, so ignore this
if (($navigator.userAgent).contains("Chrome")):
dragEventsCompleted[DragExit] = true
for evt, completed in dragEventsCompleted:
if not completed:
evtsCompleted = false
break
if evtsCompleted:
testRunning[0] = false
log "Test 1 completed successfully. Drag the div anywhere to start the next test."
testCompleted[0] = true
document.getElementById("checkTest1").style.visibility = "hidden"
else:
log "Test 1 has not completed yet. Make sure you drag the div over another element."
log "Status:"
for evt, completed in dragEventsCompleted:
log $evt & ": " & $completed
proc createDom(): VNode =
result = buildHtml(tdiv()):
tdiv(id="dragDiv", draggable="true"):
tdiv(class="divcontent"):
text "draggable div"
tdiv(id="results"):
for i in countdown(results.len - 1, 0):
tdiv:
text $results[i]
tdiv(id="checkTest1"):
button(onclick=checkTest1Status):
text "Check test 1 status"
input(`type`="hidden", id="test9value")
input(`type`="text", id="test10input1")
input(`type`="text", id="test10input2")
h3(id="test11h3"):
text "test 11"
input(`type`="text", id="test12input")
proc onload() =
startTests()
setRenderer createDom
onload()

10253
tests/jquery-3.2.1.js vendored Normal file

File diff suppressed because it is too large Load diff