Browser Component-Can we have detailed documentation?

Here’s an updated list with a few more options and examples:

    <ul class="list-group mt-4 mb-3">
    	<main>
    		<div class="contentArea">
    			<p><b>Browser component options</b></p>
    			<p dmx-show="{{browser1.userAgent.contains(&quot;iPhone&quot;)}}">I'm an iPhone!</p>
    		</div>
    	</main>
    	<li class="list-group-item list-group-item-primary">Browser Info</li>
    	<li class="list-group-item">Online: {{browser1.online}}</li>
    	<li class="list-group-item">Do not track: {{browser1.doNotTrack}}</li>
    	<li class="list-group-item">User Agent: {{browser1.userAgent}}</li>
    	<li class="list-group-item">Language: {{browser1.language}}</li>
    	<li class="list-group-item">Cookies enabled: {{browser1.cookieEnabled}}</li>
    	<li class="list-group-item">Referrer: {{browser1.referrer}}</li>

    	<li class="list-group-item list-group-item-primary">Location: </li>
    	<li class="list-group-item">Hash: {{browser1.location.hash}}</li>
    	<li class="list-group-item">Host: {{browser1.location.host}}</li>
    	<li class="list-group-item">Host Name: {{browser1.location.hostname}}</li>
    	<li class="list-group-item">Href: {{browser1.location.href}}</li>
    	<li class="list-group-item">Origin: {{browser1.location.origin}}</li>
    	<li class="list-group-item">Pathname: {{browser1.location.pathname}}</li>
    	<li class="list-group-item">Port: {{browser1.location.port}}</li>
    	<li class="list-group-item">Protocol: {{browser1.location.protocol}}</li>
    	<li class="list-group-item">Search: {{browser1.location.search}}</li>
    	<li class="list-group-item"><i>PathParts (array) examples -</i></li>
    	<li class="list-group-item">PathParts 1: {{browser1.location.pathparts[0]}}</li>
    	<li class="list-group-item">PathParts 2: {{browser1.location.pathparts[1]}}</li>
    	<li class="list-group-item">PathParts 3:</li>
    	<li class="list-group-item">PathParts - count: {{browser1.location.pathparts.count()}}</li>
    	<li class="list-group-item">PathParts - last: {{browser1.location.pathparts.last(1)}}</li>
    	<li class="list-group-item">PathParts - join: {{browser1.location.pathparts.join("|")}}</li>
    	<li class="list-group-item">PathParts - slice: {{browser1.location.pathparts.slice(1, 3)}}</li>
    	<li class="list-group-item">PathParts - reverse: {{browser1.location.pathparts.reverse()}}</li>
    	<li class="list-group-item">PathParts - reverse,last: {{browser1.location.pathparts.reverse().last(1)}}</li>
    	<li class="list-group-item">PathParts - top, 1: {{browser1.location.pathparts.reverse().top(1)}}</li>

    	<li class="list-group-item list-group-item-primary">ScrollX: </li>
    	<li class="list-group-item">Offset: {{browser1.scrollX.offset}}</li>
    	<li class="list-group-item">direction: {{browser1.scrollX.direction}}</li>
    	<li class="list-group-item">Position: {{browser1.scrollX.position}}</li>

    	<li class="list-group-item list-group-item-primary">ScrollY: </li>
    	<li class="list-group-item">Offset: {{browser1.scrollY.offset}}</li>
    	<li class="list-group-item">direction: {{browser1.scrollY.direction}}</li>
    	<li class="list-group-item">Position: {{browser1.scrollY.position}}</li>

    	<li class="list-group-item list-group-item-primary">Viewport: </li>
    	<li class="list-group-item">Viewport Width: {{browser1.viewport.width}}</li>
    	<li class="list-group-item">Viewport Height: {{browser1.viewport.height}}</li>

    	<li class="list-group-item list-group-item-primary">Device: </li>
    	<li class="list-group-item">Width: {{browser1.device.width}}</li>
    	<li class="list-group-item">Height: {{browser1.device.height}}</li>
    	<li class="list-group-item">Pixel-ratio: {{browser1.device.pixelRatio}}</li>
    	<li class="list-group-item">Orientation: {{browser1.device.orientation}}</li>

        <li class="list-group-item list-group-item-primary">Document: </li>
        <li class="list-group-item">Width: {{browser1.document.width}}</li>
        <li class="list-group-item">Height: {{browser1.document.height}}</li>
        <li class="list-group-item">Hidden: {{browser1.document.hidden}}</li>
        <li class="list-group-item">Visibility: {{browser1.document.visibility}}</li>
    </ul>
14 Likes