Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Template: add webclip template engine #1680

Open
wants to merge 1 commit into
base: tau_1.2
Choose a base branch
from
Open

Template: add webclip template engine #1680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions cSpell.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
"ylabel",
"xinit",
"yinit",
"remoteui",

//jslint specific words
"nomen",
Expand Down
10 changes: 10 additions & 0 deletions examples/mobile/UIComponents/components/card/link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta content="width=device-width, user-scalable=no" name="viewport" />
<link href="../../lib/tau/mobile/theme/changeable/tau.css" rel="stylesheet" />
<link href="../../css/style.css" rel="stylesheet" />
<script src="https://unpkg.com/mustache@latest"></script>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For using the webclip in the device home, is it also included <script src="https://unpkg.com/mustache@latest"></script>?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but it is the first working version. This library can me merge with tau or included to tau/libs.

<script data-build-remove="false" src="../../lib/tau/mobile/js/tau.js">
</script>
</head>
Expand All @@ -26,6 +27,15 @@ <h1>
<div class="ui-card" data-src="../../webclip/link-favorite/webclip.html"></div>
<div class="ui-card" data-src="../../webclip/link-container/webclip.html"></div>
<div class="ui-card" data-src="../../webclip/link-list/webclip.html"></div>
<div class="ui-card" data-src="../../webclip/link-video-template/webclip.html"
data-template-data='{"title":"Title","description":"description","video":"https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4","actionText":"Action"}'></div>
<div class="ui-card" data-src="../../webclip/link-tab-template/webclip.html"
data-template-data='{"title":"Title template","images":[{"img":"images/tw_list_icon_connections.svg"},{"img":"images/thumbnail_013.jpg"},{"img":"images/thumbnail_013.jpg"}],"action":{"play":1}}' data-template-html=""></div>
<div class="ui-card"
data-src="../../webclip/link-tab-template/webclip.html"
data-template-data='{"title":"Template base path","images":[{"img":"images/tw_list_icon_connections.svg"},{"img":"images/thumbnail_013.jpg"},{"img":"images/thumbnail_013.jpg"}],"action":{"play":1}}'
data-template-base-path="../../webclip/template-base-path">
</div>
</div>
</div>
</body>
Expand Down
4 changes: 2 additions & 2 deletions examples/mobile/UIComponents/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
</title>
<link href="lib/tau/mobile/theme/changeable/tau.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script data-build-remove="false" src="lib/tau/mobile/js/tau.js">
</script>
<script src="https://unpkg.com/mustache@latest"></script>
<script data-build-remove="false" src="lib/tau/mobile/js/tau.js"></script>
</head>

<body>
Expand Down
3 changes: 3 additions & 0 deletions examples/mobile/UIComponents/webclip/link-tab-template/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.test {
font-size: 10px;
}
Binary file added examples/mobile/UIComponents/webclip/link-tab-template/images/thumbnail_013.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions ...bile/UIComponents/webclip/link-tab-template/images/tw_list_icon_connections.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions examples/mobile/UIComponents/webclip/link-tab-template/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/*global tau */
(function () {
tau.log("app.js: template script");
})();
101 changes: 101 additions & 0 deletions examples/mobile/UIComponents/webclip/link-tab-template/webclip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<div class="ui-card ui-card-service">
<link data-template-rel="origin" href="css/style.css" rel="stylesheet" />
<script data-template-rel="origin" src="js/app.js"></script>
<div class="ui-header">
<div class="ui-title">{{title}}</div>
<div class="ui-icon app-icon"></div>
<div class="ui-controls">
<button data-icon="down"></button>
<button data-icon="reorder"></button>
</div>
</div>
<div class="ui-content ui-tabs" style="height: 215px;">
<div class="ui-sub-tab ui-sub-tab-static">
<ul>
<li class="ui-li-anchor">
<a class="ui-tab-active" href="#">
One
</a>
</li>
<li class="ui-li-anchor">
<a href="#">
Two
</a>
</li>
<li class="ui-li-anchor">
<a href="#">
Three
</a>
</li>
</ul>
</div>
<div class="ui-section-changer">
<div>
<section class="ui-content ui-section-active">
<ul class="ui-listview ui-content-area">
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 01
</span>
<span class="ui-li-text-sub ui-li-text-value">
Value text
</span>
</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 02
</span>
</div>
</li>
</ul>
</section>
<section class="ui-content">
<ul class="ui-listview ui-content-area">
{{#images}}
<li class="ui-li-has-icon ui-li-divider">
<div class="ui-li-icon">
<img data-template-rel="origin" src="{{img}}"/>
</div>
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 01
</span>
<span class="ui-li-text-sub">
Subtitle on list item
</span>
</div>
</li>
{{/images}}
</ul>
</section>
<section class="ui-content">
<ul class="ui-listview ui-content-area">
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 03
</span>
<span class="ui-li-text-sub">
Subtitle on list item
</span>
</div>
</li>
<li>
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 04
</span>
</div>
</li>
</ul>
</section>
</div>
</div>
</div>
<div class="ui-footer">
<button data-inline="true" data-action={{action}}>View more</button>
</div>
</div>
3 changes: 3 additions & 0 deletions examples/mobile/UIComponents/webclip/link-video-template/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.test {
font-size: 10px;
}
6 changes: 6 additions & 0 deletions examples/mobile/UIComponents/webclip/link-video-template/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"video": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4",
"actionText": "View More",
"title": "Title",
"description": "description"
}
4 changes: 4 additions & 0 deletions examples/mobile/UIComponents/webclip/link-video-template/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/*global tau */
(function () {
tau.log("app.js: template script");
})();
17 changes: 17 additions & 0 deletions examples/mobile/UIComponents/webclip/link-video-template/webclip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
`<div class="ui-card ui-card-ads">
<link href="css/style.css" rel="stylesheet" />
<div class="ui-content">
<script src="js/app.js"></script>
<video src="{{video}}" id="video" style="width: 100%;"></video>
<div class="ui-title">{{title}}</div>
<div class="ui-subtitle">{{description}}</div>
<script>
document.getElementById("video").addEventListener("click", function () {
this.play();
});
</script>
</div>
<div class="ui-footer">
<button data-inline="true">{{actionText}}</button>
</div>
</div>`
3 changes: 3 additions & 0 deletions examples/mobile/UIComponents/webclip/link-video/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.test {
font-size: 10px;
}
4 changes: 4 additions & 0 deletions examples/mobile/UIComponents/webclip/link-video/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/*global tau */
(function () {
tau.log("app.js: template script");
})();
2 changes: 2 additions & 0 deletions examples/mobile/UIComponents/webclip/link-video/webclip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<div class="ui-card ui-card-service">
<link href="css/style.css" rel="stylesheet" />
<script src="js/app.js"></script>
<div class="ui-header">
<div class="ui-title">Card Video</div>
<div class="ui-icon app-icon"></div>
Expand Down
Binary file added examples/mobile/UIComponents/webclip/template-base-path/images/thumbnail_013.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions ...ile/UIComponents/webclip/template-base-path/images/tw_list_icon_connections.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/js/core/router/Router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* global define, HTMLElement, ns */
/* global define, ns */
/**
* #Router
*
Expand Down Expand Up @@ -1069,7 +1069,7 @@
} else {
self._loadError(status.absUrl, options, deferred);
}
});
}, options.templateEngine);
}
}
};
Expand Down
8 changes: 5 additions & 3 deletions src/js/core/router/route/card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@
DOM = ns.util.DOM,
defaults = {
volatileRecord: true,
orderNumber: 2
orderNumber: 2,
templateEngine: "webclip"
},
CardRoute = function () {
this.filter = ".ui-card";
Expand Down Expand Up @@ -85,8 +86,8 @@
card,
dataUrl = self._createDataUrl(absUrl);

// Finding matching page inside created element
card = html.querySelector(self.filter);
// Finding matching card inside created element
card = ns.util.selectors.getClosestBySelector(html, self.filter) || html.querySelector(self.filter);

// If a card exists...
if (card) {
Expand Down Expand Up @@ -122,6 +123,7 @@
}

if (card) {
card._url = url;
card.changeContent(content, options);
}

Expand Down
2 changes: 1 addition & 1 deletion src/js/core/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
templateFunctions = {},
globalOptions = {
"pathPrefix": "",
"default": ""
"default": "html"
};

/**
Expand Down
Loading