UIrelated HTML 5 APIs Martin Kruli by Martin
UI-related HTML 5 APIs Martin Kruliš by Martin Kruliš (v 1. 1) 16. 5. 2016 1
Web Pages in Browser � Web Page Context ◦ Current browsers allow opening multiple windows or tabs (i. e. , display multiple pages) �Each page must have its own isolated context �Some pages may not be visible (only 1 tab is selected) ◦ Page visibility API �document. hidden �document. visibility. State �hidden, visible, prerender, unloaded �document. onvisibilitychange event by Martin Kruliš (v 1. 1) 16. 5. 2016 2
Embedded Web Pages � Sandboxed <iframe> ◦ The <iframe> element is used to create a nested browsing context within a page ◦ sandbox attribute activates extra restrictions �Some of these restrictions may be lifted �allow-forms (form submission) �allow-modals (opening modal windows) �allow-popups (opening windows) �allow-scripts (run scripts) �allow-top-navigation (navigate in parent context) �… by Martin Kruliš (v 1. 1) 16. 5. 2016 3
Navigation � Location Object ◦ document. location, window. location ◦ Contains parsed URL (host, pathname, hash, …) ◦ assign(), reload(), replace() �Replace is not saved in history � Window ◦ ◦ Object and Navigation window. open() window. onload window. onhashchange window. onbeforeunload, window. onunload by Martin Kruliš (v 1. 1) 16. 5. 2016 4
Navigation History � The Concept of History ◦ Inherited from original browsing concept �The user reads a page, then browses on another page ◦ Not entirely suitable for modern web applications �State (view) of the application may change, yet the browser is still on the same page ◦ window. history API �back(), forward(), go(), length �push. State(data, title, [url]), replace. State(…) �state ◦ window. onpopstate event by Martin Kruliš (v 1. 1) 16. 5. 2016 5
Web Messaging � Cross Document Messaging ◦ Relatively safe way how web applications opened in one browser can communicate ◦ The window object has onmessage event �Event object holds information about the sending window, its origin, and message data �The origin can be used to prevent undesirable crosssite data transfers ◦ A message can be sent to another window by target. Window. send. Message(msg, origin); Example 1 by Martin Kruliš (v 1. 1) 16. 5. 2016 6
Web Notifications � Web Notifications API ◦ Notifications from a web page context which are displayed outside the page at system level �New e-mail, calendar event, progress report, … ◦ Notifications must be permitted by the user �Notification. permission �default (not determined yet), granted, denied �Notification. request. Permision() �Returns Promise, which is given the decided permission �Triggers a UI query, whether the notifications are permitted for this application by Martin Kruliš (v 1. 1) 16. 5. 2016 7
Web Notifications � Notification Object ◦ new Notification(title, options) �body – text of notification �icon – URL of an icon image �vibrate – vibration pattern �noscreen – whether the screen should be activated �silent – whether a sound/vibration should be played �sound – URL to a sound file to be played �… ◦ onclick, onerror, onshow, onclose ◦ close() by Martin Kruliš (v 1. 1) Example 2 16. 5. 2016 8
Data Attributes � Data in DOM ◦ Special data attributes data-* <a href="…" data-confirm-msg="Really go to…? "> ◦ Easily accessible by Javascript �Using regular HTML 5 API Identifier is autoconverted to camel. Case confirm(mylink. dataset. confirm. Msg); mylink. dataset. clicked = true; �Using j. Query wrapper $("a[data-confirm-msg]"). click(function(e){ if (!confirm($(this). data("confirm. Msg")) e. prevent. Default(); }); by Martin Kruliš (v 1. 1) 16. 5. 2016 9
Mutation Observer � Mutation Observer ◦ Designed to replace DOM mutation events ◦ Observes selected DOM nodes for changes and triggers a callback every time a change occurs var observer = new Mutation. Observer(function(mutations) { mutations. for. Each(function(mutation) { // handle the mutation Callback gets a list of changes }); after they are completed }); observer. observe(target. Node, { attributes: true, Monitor attribute changes, child. List: true, child node add/remove and do subtree: true, it recursively on the subtree }); by Martin Kruliš (v 1. 1) 16. 5. 2016 10
Drag and Drop � Drag-and-Drop Mouse Gesture ◦ Standard gesture for moving/copying items �Strings (text, html, URLs, …) and files (binary data) ◦ Within browser, to browser, from browser ◦ Better support added with HTML 5 � HTML Attributes ◦ The draggable attribute �Makes a HTML element drag-able <img draggable="true" src="…" alt="…"> ◦ The dropzone attribute �Not well supported yet by Martin Kruliš (v 1. 1) 16. 5. 2016 11
Drag and Drop � Drag and Drop Events ◦ dragstart �Fired on dragged element when the operation begins �Usually fills the data. Transfer property ◦ dragenter, dragleave �Fired on possible drop destinations ◦ dragover �Fired on possible drop destinations �If valid, the prevent. Default() should be called ◦ dragend �Fired on dragged element when the operation finishes by Martin Kruliš (v 1. 1) 16. 5. 2016 12
Drag and Drop � Drag and Drop Events ◦ drop �Fired on destination element when the op. finishes �Should process the transferred data ◦ The data. Transfer property �drop. Effect, effect. Allowed �Copy, move, link, … �get. Data(), set. Data() �items – container with transferred items �files – a file list (if files are being dragged) Example 3 by Martin Kruliš (v 1. 1) 16. 5. 2016 13
Editable Content � Editable Content ◦ A way how to turn browser into WYSIWYG editor �Selected element or the whole document becomes interactive and the user may change the contents ◦ For selected elements �element. content. Editable (true, false, inherit) �element. is. Content. Editable ◦ For the whole document �document. design. Mode (on, off) �Particularly useful for a page inside <iframe> by Martin Kruliš (v 1. 1) 16. 5. 2016 14
Editable Content � Using Commands when Editing Content ◦ Commands modify the text selection, insert new contents, or change editing parameters �document. exec. Command(cmd, defaut. UI, value) ◦ Affects currently active (focused) editable element ◦ Additional support methods �query. Command. Supported() �query. Command. Enabled() �query. Command. Value() �query. Command. State() �query. Command. Indeterm() by Martin Kruliš (v 1. 1) 16. 5. 2016 15
Editable Content � Editing ◦ ◦ ◦ ◦ ◦ Commands copy, cut, paste delete, forward. Delete undo, redo insert. Text, insert. Paragraph, insert. Image create. Link bold, italic fore. Color, back. Color enable. Object. Resizing style. With. CSS … Example 4 by Martin Kruliš (v 1. 1) 16. 5. 2016 16
Mouse Capture � Capturing Mouse Movement ◦ Special cases of dragging mouse gesture ◦ Mouse capture provides continuous delivery of mouse events to target object �Until the drag is released (button goes up) ◦ element. set. Caputure() �The element starts capturing the mouse movement �Usually invoked in mousedown event ◦ document. release. Capture() �Releases any captures in the document by Martin Kruliš (v 1. 1) 16. 5. 2016 17
Pointer Lock � Locking the Mouse Pointer ◦ The pointer gets locked within one element �Pointer does not leave the element (nor is clamped) �The cursor is hidden �Persistent (until released) regardless buttons state ◦ API �element. request. Pointer. Lock() �document. exit. Pointer. Lock() �pointerlockchange, pointerlockerror �element. request. Fullscreen() �Mouse events are extended with relative coordinates �ev. movement. X, ev. movement. Y by Martin Kruliš (v 1. 1) 16. 5. 2016 18
Portable Devices � Screen Orientation ◦ screen. orientation – orientation object �type – text string (enum) with current orientation �angle – rotation angle in degrees �onchange event �lock(), unlock() � Device Orientation ◦ Gathered values from the accelerometer ◦ The deviceorientation event of the window �ev. alpha, ev. beta, ev. gamma – rotations in degrees by Martin Kruliš (v 1. 1) 16. 5. 2016 19
Portable Devices � Battery Information ◦ navigator. battery – battery manager object �level, charging �charging. Time, discharging. Time (seconds) �Events levelchange, chargingtimechange, dischargingtimechange � Ambient Light ◦ Notifies when the surrounding illumination changes ◦ The devicelight event of the window �ev. value – illumination level in lux by Martin Kruliš (v 1. 1) 16. 5. 2016 20
Portable Devices � Proximity Sensor ◦ Detects, when an object (user) gets close to the device (e. g. , when a phone is held by user’s ear) ◦ The deviceproximity event of the window �ev. min, ev. max – detection range in centimeters �ev. value – distance in centimeters ◦ The userproximity event of the window �ev. near – bool flag, whether an object is very close by by Martin Kruliš (v 1. 1) 16. 5. 2016 21
Portable Devices � Vibration API ◦ Controls vibrations of a portable device ◦ navigator. vibrate(length) �one number (duration in ms) �array of numbers – duration of vibrations and pauses Example 5 by Martin Kruliš (v 1. 1) 16. 5. 2016 22
Geolocation � Geolocation ◦ Means to identify user’s position in the world ◦ The script receives latitude and longitude values � Motivation ◦ Geographically specific search �Looking for objects near the user’s location ◦ Annotating contents generated by user ◦ Selecting appropriate type of service for the user �Selecting nearest server, optimal shipping of goods, … by Martin Kruliš (v 1. 1) 16. 5. 2016 23
Geolocation � How does it work? ◦ The standard defines only the API ◦ The platform uses the best means available, like �Public IP geolocation information �Wi. Fi networks in the vicinity and their signal strengths �GSM/CDMA cell identifiers �Embedded GPS locator � Server-side Client Geolocation ◦ From public IP only ◦ Can be used without browser support/cooperation by Martin Kruliš (v 1. 1) 16. 5. 2016 24
Geolocation API � Geolocation Interface Object ◦ In navigator. geolocation attribute ◦ Simple test for presence if (!"geolocation" in navigator) { // Oops, we do not have the position. . . } ◦ Provides two basis functions �One-shot request �Repetitive position update notifications by Martin Kruliš (v 1. 1) 16. 5. 2016 25
Geolocation API � One-shot Request get. Current. Position(success [, error [, opts]]) �The function initiates an asynchronous request for the geographic location (return immediately) �success – function callback that fires when the location is established �error – function callback fired in case of a failure �opts – an object with options �enable. High. Accuracy �timeout – how long to wait for the position (ms) �maximum. Age – how old positions from the cache the system can use (ms) by Martin Kruliš (v 1. 1) 16. 5. 2016 26
Geolocation API � Success Callback ◦ timestamp – DOMTime. Stamp of the position ◦ coords – object with coordinates �latitude, longitude – WGS in degrees �accuracy – precision of the location in meters �optionally altitude, altitude. Accuracy (meters) �optionally heading (azimuth) and speed (kph) � Error Callback ◦ code – indicates type of the error ◦ message – user-readable error message by Martin Kruliš (v 1. 1) 16. 5. 2016 27
Geolocation API � Watching Position Updates watch. Position(success [, error [, opts]]) �Yields watch. Id, identifier of the watch process �Same parameters as get. Current. Position �Similar semantics, but success is called every time the position significantly changes �Details are implementation specific clear. Watch(watch. Id) �Stops watching process and release resources Example 6 by Martin Kruliš (v 1. 1) 16. 5. 2016 28
Discussion by Martin Kruliš (v 1. 1) 16. 5. 2016 29
- Slides: 29