jumpingGrendel/sample_in_app_template.html

## sample_in_app_template.html
<!DOCTYPE html>
<html><head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, user-scalable=no" />
    <title>Moveable Ink / Airship</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        main,
        menu,
        nav,
        section,
        summary {
            display: block
        }

        img {
            border: 0
        }

        html {
            box-sizing: border-box
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit
        }

        .row:after,
        .container:after,
        .item a:after {
            clear: both;
            content: " ";
            display: table
        }

        .hidden {
            display: none
        }

        .row {
            margin: 0 auto 16px;
            width: 100%
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            line-height: 1;
            text-rendering: optimizeLegibility;
            word-wrap: break-word
        }

        h1 {
            font-size: 18px;
            line-height: 22px;
            margin: 0 0 16px;
            font-family: Helvetica, Arial, sans-serif;
            letter-spacing: .025px;
        }

        h2 {
            font-size: 1.25em;
            margin: 0 0 1em
        }

        h3 {
            font-size: 1.125em
        }

        h4 {
            font-size: 1em
        }

        h5 {
            font-size: .875em
        }

        h6 {
            font-size: .75em
        }

        p,
        ul,
        ol,
        dl,
        table,
        label,
        figcaption {
            font-size: 11px;
            margin: 0 0 16px
        }

        ul p,
        ol p,
        table p,
        ul ul,
        ol ol,
        ul ol,
        ol ul {
            font-size: 11px
        }

        strong {
            font-weight: bold
        }

        em {
            font-style: italic
        }

        small {
            font-size: .85714285714286em
        }

        .container {
            padding: 20px
        }

        .banner {
            margin: -20px -20px 16px
        }

        .banner img,
        .banner video {
            display: block;
            width: 100%
        }

        .inline-image {
            margin: 0 0 1.25em
        }

        .inline-image img {
            display: block;
            width: 100%
        }

        .meta {
            font-size: 1em;
            margin: 0
        }

        .meta+.meta {
            margin: 0 0 1.42857142857143em
        }

        .btn {
            display: block;
            margin: 0 auto 16px
        }

        .btn>a {
            background: #000;
            color: #fff;
            display: block;
            font-family: "AvenirNext-Medium", Helvetica, Arial, sans-serif;
            font-size: 12px;
            border-radius: 5px;
            line-height: 20px;
            margin: 0 auto;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            white-space: normal;
            width: auto;
            word-wrap: break-word;
            text-transform: uppercase
        }

        .btn.secondary>a {
            background: #fff;
            border: #000 2px solid;
            color: #000
        }

        .btn-group {
            display: table;
            width: 100%;
            table-layout: fixed
        }

        .btn-group .btn {
            display: table-cell
        }

        .btn-group .btn:first-child {
            padding: 0 10px 0 0
        }

        .btn-group .btn:last-child {
            padding: 0 0 0 10px
        }

        html {
            height: 100%
        }

        body {
            background: #fff;
            color: #000;
            font: 100%/1.5 "AvenirNext-Medium", Helvetica, Arial, sans-serif;
            letter-spacing: 0.5px;
            height: 100%;
            -webkit-font-smoothing: antialiased
        }

        a {
            color: #000;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent
        }

        a a:hover,
        a a:active {
            color: #1a1a1a
        }

        figure>img {
            display: block;
            margin: 0 auto;
            max-width: 100%
        }

        .exclusions {
            font-family: "AvenirNext-Regular", Helvetica, Arial, sans-serif;
        }
    </style>

</head><body class="">
    <div class="container">
        <figure class="banner" id="banner_image"><img alt="This img element will get replaced dynamically" /></figure>
        <section class="row">
            <h1>Some Content</h1>
            <div class="btn custom_click" id="Button1"><a href="#">A Call To Action!</a></div>
            <p class="exclusions">A longer description of the content!</p>
        </section>
    </div>
<script>
    /* UAirship object below is for doing localhost development.
    Be sure to comment out the UAirship object between top mark
    and bottom mark to deploy! */
    /* top mark ******************************************************* */
    // UAirship = {}
    // UAirship.getChannelId = function() {
    //     return "560772b0-35de-11e7-b8f7-02420febf961"
    // }
    // UAirship.getNamedUser = function() {
    //     return "ca740248e1d65edcae7ce17cf1dcf93f"
    // }
    // UAirship.getDeviceModel = function() {
    //     return "iPhone"
    // }
    // UAirship.runAction = function(thing1, thing2) {
    //     console.log(thing1, thing2);
    //     return true
    // }
    // UAirship.close = function() {
    //     console.log("closing");
    //     return true
    // }
    /* bottom mark **************************************************** */

    var movable_ink_url = "https://airship.mi-content.com/p/cp/6b7723c5aed03343/r?url=https%3A%2F%2Fairship.mi-content.com%2Fp%2Frp%2Fdb18b54cc3a2985a%2Furl"
    var movable_ink_image = "https://airship.mi-content.com/p/rp/ae952556bd4cebde.png"

    function capture() {
        // This creates a Custom Event object and sets it in the SDK
        var custom_event_object = {};
        custom_event_object.event_name = "open_movable";
        custom_event_object.event_value = 1;
        custom_event_object.properties = {};
        custom_event_object.properties.customer_id = "" + UAirship.getNamedUser();
        UAirship.runAction("add_custom_event_action", custom_event_object, true);
        return;
    }

    function get_deep_link() {
        var named = UAirship.getNamedUser();
        // var url = movable_ink_url + '&mi_u=' + encodeURI(named);
        var url = movable_ink_url
        url = url.replace(/\/\/.+?\.com/g, '//airship.mi-content.com');
        url = url.replace(/\%2F\%2F.*?.com/g, '\%2F\%2Fairship.mi-content.com');
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.setRequestHeader("Accept", "application/json");
        xhr.send();
        xhr.onload = function () {
            if (xhr.status != 200) {
                console.log(`Error ${xhr.status}: ${xhr.statusText}`);
            } else {
                var json_response = JSON.parse(xhr.responseText);
                deep_link = json_response['location'];
                var action = "^d";
                if (deep_link.startsWith("http")) {
                    action = "^u";
                }
                UAirship.runAction(
                    action,
                    deep_link,
                    UAirship.close()
                );
                return;
            }
        }
        xhr.onerror = function () {
            console.log("Request failed");
        };
    }

    function onUAReady() {
        var custom_event_object = {};
        var named = UAirship.getNamedUser();
        custom_event_object.event_name = "open_movable";
        custom_event_object.event_value = 1;
        custom_event_object.properties = {};
        custom_event_object.properties.customer_id = "" + encodeURI(named);
        UAirship.runAction("add_custom_event_action", custom_event_object, function() {return true});

        var elements = document.getElementsByClassName("custom_click")
        for (var i = 0; i < elements.length; i++) {
            elements[i].addEventListener("click", capture, true);
            elements[i].addEventListener("click", get_deep_link, true);
        }

        if(named !== null && named !== "") {
            var replaceElement = document.getElementById("banner_image");
            var newImageElement = document.createElement("img");
            newImageElement.src = movable_ink_image + "?mi_u=" + encodeURI(named);
            newImageElement.addEventListener("click", capture, true);
            newImageElement.addEventListener("click", get_deep_link, true);
            replaceElement.firstChild.replaceWith(newImageElement);
        }
    }

    if(typeof UAirship === 'object' && UAirship.runAction) {
        onUAReady();
    } else {
        document.addEventListener('ualibraryready', onUAReady, false);
    }

</script>

</body></html>
	<!DOCTYPE html>
	<html><head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1, user-scalable=no" />
	<title>Moveable Ink / Airship</title>
	<style>
	* {
	margin: 0;
	padding: 0
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	main,
	menu,
	nav,
	section,
	summary {
	display: block
	}

	img {
	border: 0
	}

	html {
	box-sizing: border-box
	}

	*,
	*:before,
	*:after {
	box-sizing: inherit
	}

	.row:after,
	.container:after,
	.item a:after {
	clear: both;
	content: " ";
	display: table
	}

	.hidden {
	display: none
	}

	.row {
	margin: 0 auto 16px;
	width: 100%
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	line-height: 1;
	text-rendering: optimizeLegibility;
	word-wrap: break-word
	}

	h1 {
	font-size: 18px;
	line-height: 22px;
	margin: 0 0 16px;
	font-family: Helvetica, Arial, sans-serif;
	letter-spacing: .025px;
	}

	h2 {
	font-size: 1.25em;
	margin: 0 0 1em
	}

	h3 {
	font-size: 1.125em
	}

	h4 {
	font-size: 1em
	}

	h5 {
	font-size: .875em
	}

	h6 {
	font-size: .75em
	}

	p,
	ul,
	ol,
	dl,
	table,
	label,
	figcaption {
	font-size: 11px;
	margin: 0 0 16px
	}

	ul p,
	ol p,
	table p,
	ul ul,
	ol ol,
	ul ol,
	ol ul {
	font-size: 11px
	}

	strong {
	font-weight: bold
	}

	em {
	font-style: italic
	}

	small {
	font-size: .85714285714286em
	}

	.container {
	padding: 20px
	}

	.banner {
	margin: -20px -20px 16px
	}

	.banner img,
	.banner video {
	display: block;
	width: 100%
	}

	.inline-image {
	margin: 0 0 1.25em
	}

	.inline-image img {
	display: block;
	width: 100%
	}

	.meta {
	font-size: 1em;
	margin: 0
	}

	.meta+.meta {
	margin: 0 0 1.42857142857143em
	}

	.btn {
	display: block;
	margin: 0 auto 16px
	}

	.btn>a {
	background: #000;
	color: #fff;
	display: block;
	font-family: "AvenirNext-Medium", Helvetica, Arial, sans-serif;
	font-size: 12px;
	border-radius: 5px;
	line-height: 20px;
	margin: 0 auto;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	width: auto;
	word-wrap: break-word;
	text-transform: uppercase
	}

	.btn.secondary>a {
	background: #fff;
	border: #000 2px solid;
	color: #000
	}

	.btn-group {
	display: table;
	width: 100%;
	table-layout: fixed
	}

	.btn-group .btn {
	display: table-cell
	}

	.btn-group .btn:first-child {
	padding: 0 10px 0 0
	}

	.btn-group .btn:last-child {
	padding: 0 0 0 10px
	}

	html {
	height: 100%
	}

	body {
	background: #fff;
	color: #000;
	font: 100%/1.5 "AvenirNext-Medium", Helvetica, Arial, sans-serif;
	letter-spacing: 0.5px;
	height: 100%;
	-webkit-font-smoothing: antialiased
	}

	a {
	color: #000;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent
	}

	a a:hover,
	a a:active {
	color: #1a1a1a
	}

	figure>img {
	display: block;
	margin: 0 auto;
	max-width: 100%
	}

	.exclusions {
	font-family: "AvenirNext-Regular", Helvetica, Arial, sans-serif;
	}
	</style>

	</head><body class="">
	<div class="container">
	<figure class="banner" id="banner_image"><img alt="This img element will get replaced dynamically" /></figure>
	<section class="row">
	<h1>Some Content</h1>
	<div class="btn custom_click" id="Button1"><a href="#">A Call To Action!</a></div>
	<p class="exclusions">A longer description of the content!</p>
	</section>
	</div>
	<script>
	/* UAirship object below is for doing localhost development.
	Be sure to comment out the UAirship object between top mark
	and bottom mark to deploy! */
	/* top mark ******************************************************* */
	// UAirship = {}
	// UAirship.getChannelId = function() {
	// return "560772b0-35de-11e7-b8f7-02420febf961"
	// }
	// UAirship.getNamedUser = function() {
	// return "ca740248e1d65edcae7ce17cf1dcf93f"
	// }
	// UAirship.getDeviceModel = function() {
	// return "iPhone"
	// }
	// UAirship.runAction = function(thing1, thing2) {
	// console.log(thing1, thing2);
	// return true
	// }
	// UAirship.close = function() {
	// console.log("closing");
	// return true
	// }
	/* bottom mark **************************************************** */

	var movable_ink_url = "https://airship.mi-content.com/p/cp/6b7723c5aed03343/r?url=https%3A%2F%2Fairship.mi-content.com%2Fp%2Frp%2Fdb18b54cc3a2985a%2Furl"
	var movable_ink_image = "https://airship.mi-content.com/p/rp/ae952556bd4cebde.png"

	function capture() {
	// This creates a Custom Event object and sets it in the SDK
	var custom_event_object = {};
	custom_event_object.event_name = "open_movable";
	custom_event_object.event_value = 1;
	custom_event_object.properties = {};
	custom_event_object.properties.customer_id = "" + UAirship.getNamedUser();
	UAirship.runAction("add_custom_event_action", custom_event_object, true);
	return;
	}

	function get_deep_link() {
	var named = UAirship.getNamedUser();
	// var url = movable_ink_url + '&mi_u=' + encodeURI(named);
	var url = movable_ink_url
	url = url.replace(/\/\/.+?\.com/g, '//airship.mi-content.com');
	url = url.replace(/\%2F\%2F.*?.com/g, '\%2F\%2Fairship.mi-content.com');
	let xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.setRequestHeader("Accept", "application/json");
	xhr.send();
	xhr.onload = function () {
	if (xhr.status != 200) {
	console.log(`Error ${xhr.status}: ${xhr.statusText}`);
	} else {
	var json_response = JSON.parse(xhr.responseText);
	deep_link = json_response['location'];
	var action = "^d";
	if (deep_link.startsWith("http")) {
	action = "^u";
	}
	UAirship.runAction(
	action,
	deep_link,
	UAirship.close()
	);
	return;
	}
	}
	xhr.onerror = function () {
	console.log("Request failed");
	};
	}

	function onUAReady() {
	var custom_event_object = {};
	var named = UAirship.getNamedUser();
	custom_event_object.event_name = "open_movable";
	custom_event_object.event_value = 1;
	custom_event_object.properties = {};
	custom_event_object.properties.customer_id = "" + encodeURI(named);
	UAirship.runAction("add_custom_event_action", custom_event_object, function() {return true});

	var elements = document.getElementsByClassName("custom_click")
	for (var i = 0; i < elements.length; i++) {
	elements[i].addEventListener("click", capture, true);
	elements[i].addEventListener("click", get_deep_link, true);
	}

	if(named !== null && named !== "") {
	var replaceElement = document.getElementById("banner_image");
	var newImageElement = document.createElement("img");
	newImageElement.src = movable_ink_image + "?mi_u=" + encodeURI(named);
	newImageElement.addEventListener("click", capture, true);
	newImageElement.addEventListener("click", get_deep_link, true);
	replaceElement.firstChild.replaceWith(newImageElement);
	}
	}

	if(typeof UAirship === 'object' && UAirship.runAction) {
	onUAReady();
	} else {
	document.addEventListener('ualibraryready', onUAReady, false);
	}

	</script>

	</body></html>