CODEWITHSUNDEEP
javascripthtmltemplating
YogaPanda
YogaPanda

Reputation: 328

HTML templating with vanilla JavaScript

I'm having a SharePoint app that retrieve page content from a library, and feeding both desktop and mobile sites. We also have links within the page, how can I render HTML templating with vanilla JavaScript?

For example, we have couple on-page links from the page content:

<a class="template" href="/3.aspx">

I want to add either http://<sitename>/pages/ or http://<sitename>/pages/m/ infront of the href depends on the screen size or devices.

How can I achieve that via vanilla JS ?

Upvotes: 2

Views: 624

Answers (2)

Benny Powers
Benny Powers

Reputation: 5846

With a lightweight library called lit-html it's straightforward:

import { html, render } from 'https://unpkg.com/lit-html/lit-html.js?module';

const linkTemplate = orientation =>
  html`<a href="https://<sitename>/pages/{orientation != null ? 'm/' : '/'}3.aspx">Link text</a>`

render(linkTemplate(window.orientation), container)

Upvotes: 2

Stranger in the Q
Stranger in the Q

Reputation: 3898

Screen size way: 

function isMobile() {
    return window.innerWidth < 800;
}

var mobileUrl = 'http://<sitename>/pages/m/1.html';
var desktopUrl = 'http://<sitename>/pages/index.html';
window.location = isMobile() ? mobileUrl : desktopUrl;

More elegant "duck type" mobile check 

function isMobile() {
    return typeof window.orientation !== 'undefined';
}

Also there is a way to analyze navigator.userAgent value

Upvotes: 1

Related Questions