Commit bc5d922e authored by Cédric Le Ninivin's avatar Cédric Le Ninivin

Add Basic App List

parent d97694d2
[
{
"int_index": "11",
"application_image_type": "image",
"application_image_url": "img/vifib-logo.png",
"application_toc_accept": false,
"application_description":"Hello World",
"application_url":"hello-world/",
"application_edit_page":"hello-world/index.html",
"application_title":"Hello World",
"application_category":"Development"
},
{
"int_index": "41",
"application_image_type": "image",
"application_image_url": "pdf_viewer_app_logo.svg",
"application_description":"Read and manage you PDF Offline",
"application_url":"",
"application_edit_page":"gadget/gadget_cribjs_page_cribjs_home.html",
"application_title":"Editor",
"application_category":"Documents"
}
]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>CribJS Header</title>
<!-- renderjs -->
<script src="../lib/rsvp.js" type="text/javascript"></script>
<script src="../lib/renderjs.js" type="text/javascript"></script>
<script src="../lib/domsugar.js" type="text/javascript"></script>
<script src="../lib/jio-latest.js" type="text/javascript"></script>
<script src="./gadget_global.js" type="text/javascript"></script>
<!-- Custom -->
<script src="./gadget_cribjs_page_app_list.js" type="text/javascript"></script>
</head>
<body>
<div class="nav_content test">
<div class="row">
</div>
</div>
</body>
</html>
\ No newline at end of file
/*jslint nomen: true, indent: 2, maxerr: 3 */
/*global window, rJS, document, jIO, RSVP, domsugar, JSON */
(function (window, rJS, domsugar, jIO) {
"use strict";
var DEFAULT_APP_LIST_DOC = "app-list.json";
function displayAppList(gadget) {
var app_list = [];
return gadget.crib_sw_get(DEFAULT_APP_LIST_DOC)
.push(function (data) {
return jIO.util.readBlobAsText(data, data.type);
})
.push(function (data) {
var promise_list = [];
app_list = JSON.parse(data.target.result);
for (var i = 0; i < app_list.length; i += 1) {
promise_list.push(gadget.getUrlFor({
page: "editor",
url: app_list[i].application_edit_page
}));
}
return RSVP.all(promise_list);
})
.push(function (url_list) {
var app_list_html = [],
base_url = window.location.origin,
current_path = window.location.pathname,
tmp_url;
for (var i = 0; i < app_list.length; i += 1) {
// XXX Ugly Hack
tmp_url = window.location.pathname + "/" + app_list[i].application_url;
while (tmp_url.indexOf("//") !== -1) {
tmp_url = tmp_url.replace("//", "/");
}
app_list_html.push(domsugar("div", {class: "col-sm-3 col-md-4"}, [
domsugar("div", {class: "thumbnail"}, [
domsugar("img"),
domsugar("div", {class: "caption"}, [
domsugar("h3", {text: app_list[i].application_title}),
domsugar("a", {href: url_list[i], class:"btn btn-default", role:"button", text:"Edit"}),
domsugar("a", {href: base_url + tmp_url , class:"btn btn-primary", role:"button", text:"GO"})
])
])
]))
}
domsugar(gadget.element.querySelector('div.row'), app_list_html)
});
}
rJS(window)
/////////////////////////////////////////////////////////////////
// ready
/////////////////////////////////////////////////////////////////
// Assign the element to a variable
.ready(function (g) {
g.props = {};
return g.getElement()
.push(function (element) {
g.element = element;
});
})
//////////////////////////////////////////////
// acquired methods
//////////////////////////////////////////////
.declareAcquiredMethod("getUrlFor", "getUrlFor")
.declareAcquiredMethod("crib_sw_get", "crib_sw_get")
.declareAcquiredMethod("crib_sw_put", "crib_sw_put")
.declareMethod('render', function (options) {
return displayAppList(this);
});
}(window, rJS, domsugar, jIO));
\ No newline at end of file
......@@ -34,6 +34,12 @@
<div data-gadget-url="./gadget_landing_cribjs.html"
data-gadget-scope="jio_cribjs"
data-gadget-sandbox="public"></div>
<div class="nav_content container">
<h1>App List</h1>
<div data-gadget-url="./gadget_cribjs_page_app_list.html"
data-gadget-scope="app_list"
data-gadget-sandbox="public"></div>
</div>
<div class="nav_content container">
<h1>CribJS Loader</h1>
<p>Load your Crib from here</p>
......
......@@ -82,6 +82,13 @@
// acquired methods
//////////////////////////////////////////////
.declareAcquiredMethod("getUrlFor", "getUrlFor")
.allowPublicAcquisition("getUrlFor", function (argument_list) {
return this.getUrlFor(argument_list[0]);
})
.declareAcquiredMethod("crib_sw_get", "crib_sw_get")
.allowPublicAcquisition("crib_sw_get", function (argument_list) {
return this.crib_sw_get(argument_list[0]);
})
.declareAcquiredMethod("crib_sw_put", "crib_sw_put")
.allowPublicAcquisition("crib_sw_put", function (argument_list) {
return this.crib_sw_put.apply(this, arguments);
......@@ -129,6 +136,12 @@
for (var i = 0; i < link_list.length; i++) {
gadget.props.element.querySelector("." + page_list[i]).href = link_list[i];
}
return gadget.getDeclaredGadget("app_list");
})
.push(function (app_list_gadget) {
return app_list_gadget.render();
})
.push(function () {
return gadget.props.start_deferred.resolve();
});
})
......
<!doctype html>
<html lang="en-us">
<head>
<title>Hello World.</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="wave.png">
<meta name="description" content="A simple hello world HTML example.">
<style>
body {
font-size: 3em;
max-width: 600px;
margin: auto;
font-family: Arial, sans-serif;
margin-top: 1em;
text-align: center;
background-color: #bbff99;
background-image: linear-gradient(319deg, #99ecff 0%, #bbff99 25%, #ffec99 75%, #ff9999 100%);
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
button {
margin-top: 3em;
font-size: 0.5em;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
padding: 0.25em 1.5em;
}
</style>
</head>
<body>
<div id="app">
Hello world!
</div>
<button onclick="javascript:alert('Bonjour!');">Press me</button>
</body>
<script>
// put your code here.
</script>
</html>
\ No newline at end of file
// DOM sugar
// ==================================================================
// Modified version of "Sugared DOM" https://gist.github.com/jacobrask/3524145
//
// Usage
// ------------------------------------------------------------------
// var make = domsugar(document);
//
// make( 'p.foo#bar', { hidden: true }, [ make( 'span' ) ] );
// => <p class="foo" id="bar" hidden><span></span></p>
//
// make( '.bar', [ '<b></b>' ] );
// make( '.bar', { text: '<b></b>' } );
// => <div class="bar">&lt;b&gt;&lt/b&gt;</div>
//
// make( 'div', [ make( 'b', [ 'Foo', make( 'i' ) ] ) ] );
// make( 'div', { html: '<b>Foo<i></i></b>' } );
// => <div><b>Foo<i></i></b></div>
//
// var myDiv = document.createElement( 'div' );
// make( myDiv, { id: 'foo' } );
// => <div id="foo"></div>
(function (window, document) {
'use strict';
// Some properties need to be direct, other are common ones and setting
// them directly is faster than setAttribute.
var direct_property_dict = {
'class': 'className',
className: 'className',
defaultValue: 'defaultValue',
'for': 'htmlFor',
html: 'innerHTML',
id: 'id',
name: 'name',
src: 'src',
text: 'textContent',
title: 'title',
value: 'value'
},
// Object lookup is faster than indexOf.
boolean_property_dict = {
checked: 1,
defaultChecked: 1,
disabled: 1,
hidden: 1,
multiple: 1,
selected: 1,
required: 1,
readonly: 1,
autofocus: 1,
spellcheck: 1
};
// splitter = /(#|\.)/;
function setProperty(el, key, value) {
var prop = direct_property_dict[key];
if (prop) {
el[prop] = (value === null ? '' : String(value));
} else if (boolean_property_dict[key]) {
el[key] = !!value;
} else if (value === null) {
el.removeAttribute(key);
} else {
el.setAttribute(key, String(value));
}
}
function appendChildren(el, children) {
var i, l, node;
for (i = 0, l = children.length; i < l; i += 1) {
node = children[i];
if (node) {
if (node instanceof Array) {
appendChildren(el, node);
} else {
if (typeof node === 'string') {
node = document.createTextNode(node);
}
el.appendChild(node);
}
}
}
}
window.domsugar = function (tag, props, children) {
if (props instanceof Array) {
children = props;
props = null;
}
var el,
prop;
/*
if ( !tag ) { tag = 'div'; createDocumentFragment }
var parts, name, el,
i, j, l, node, prop;
if ( typeof tag === 'string' && splitter.test( tag ) ) {
parts = tag.split( splitter );
tag = parts[0];
if ( !props ) { props = {}; }
for ( i = 1, j = 2, l = parts.length; j < l; i += 2, j += 2 ) {
name = parts[j];
if ( parts[i] === '#' ) {
props.id = name;
} else {
props.className = props.className ?
props.className + ' ' + name : name;
}
}
}
el = typeof tag === 'string' ? doc.createElement( tag ) : tag;
*/
if (typeof tag === 'string') {
el = document.createElement(tag);
} else if (tag) {
el = tag;
// Empty the element
while (el.firstChild) {
el.firstChild.remove();
}
} else {
el = document.createDocumentFragment();
}
if (props) {
for (prop in props) {
if (props.hasOwnProperty(prop) && (props[prop] !== undefined)) {
setProperty(el, prop, props[prop]);
}
}
}
if (children) {
appendChildren(el, children);
}
return el;
};
/*global document, window*/
}(window, document));
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment