Skip to content

Commit 9d4ab8a

Browse files
roboncoderoboncode
committed
added standalone widget example
1 parent 3cee923 commit 9d4ab8a

File tree

3 files changed

+93
-164
lines changed

3 files changed

+93
-164
lines changed

‎realworld-standalone-widget/components/countdown.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="countdown">{{display}}</div>
3+
</template>
4+
5+
<script>
6+
let timer;
7+
8+
module.exports = {
9+
props: {
10+
time: {
11+
type: Number,
12+
default: 5
13+
},
14+
autoplay: {
15+
type: Boolean,
16+
default: false
17+
}
18+
},
19+
data: function() {
20+
return {
21+
timeRemaining: 0
22+
};
23+
},
24+
computed: {
25+
display: function() {
26+
if (this.timeRemaining) {
27+
if (this.timeRemaining == 1) {
28+
return `${this.timeRemaining} second remaining`;
29+
}
30+
return `${this.timeRemaining} seconds remaining`;
31+
}
32+
return `Out of time`;
33+
}
34+
},
35+
methods: {
36+
start: function() {
37+
timer = setInterval(() => {
38+
if (this.timeRemaining) {
39+
this.timeRemaining--;
40+
} else {
41+
this.stop();
42+
}
43+
}, 1000);
44+
},
45+
stop: function() {
46+
clearInterval(timer);
47+
},
48+
reset: function() {
49+
this.timeRemaining = this.time || 10;
50+
this.stop();
51+
if(this.autoplay) {
52+
this.start();
53+
}
54+
}
55+
},
56+
created: function() {
57+
this.reset();
58+
},
59+
destroyed: function() {
60+
this.stop();
61+
}
62+
};
63+
</script>

‎realworld-standalone-widget/vue-widget.js

Lines changed: 29 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,35 @@
11
(function() {
22
//https://github.com/malko/l.js
3-
;(function(window, undefined){
4-
/*
5-
* script for js/css parallel loading with dependancies management
6-
* @author Jonathan Gotti < jgotti at jgotti dot net >
7-
* @licence dual licence mit / gpl
8-
* @since 2012-04-12
9-
* @todo add prefetching using text/cache for js files
10-
* @changelog
11-
* - 2016-08-22 - remove global eval and fix issue #13
12-
* - 2014-06-26 - bugfix in css loaded check when hashbang is used
13-
* - 2014-05-25 - fallback support rewrite + null id bug correction + minification work
14-
* - 2014-05-21 - add cdn fallback support with hashbang url
15-
* - 2014-05-22 - add support for relative paths for stylesheets in checkLoaded
16-
* - 2014-05-21 - add support for relative paths for scripts in checkLoaded
17-
* - 2013-01-25 - add parrallel loading inside single load call
18-
* - 2012-06-29 - some minifier optimisations
19-
* - 2012-04-20 - now sharp part of url will be used as tag id
20-
* - add options for checking already loaded scripts at load time
21-
* - 2012-04-19 - add addAliases method
22-
* @note coding style is implied by the target usage of this script not my habbits
23-
*/
24-
var isA = function(a,b){ return a instanceof (b || Array);}
25-
//-- some minifier optimisation
26-
, D = document
27-
, getElementsByTagName = 'getElementsByTagName'
28-
, length = 'length'
29-
, readyState = 'readyState'
30-
, onreadystatechange = 'onreadystatechange'
31-
//-- get the current script tag for further evaluation of it's eventual content
32-
, scripts = D[getElementsByTagName]("script")
33-
, scriptTag = scripts[scripts[length]-1]
34-
, script = scriptTag.innerHTML.replace(/^\s+|\s+$/g,'')
35-
;
36-
//avoid multiple inclusion to override current loader but allow tag content evaluation
37-
if( ! window.ljs ){
38-
var checkLoaded = scriptTag.src.match(/checkLoaded/)?1:0
39-
//-- keep trace of header as we will make multiple access to it
40-
,header = D[getElementsByTagName]("head")[0] || D.documentElement
41-
, urlParse = function(url){
42-
var parts={}; // u => url, i => id, f = fallback
43-
parts.u = url.replace(/#(=)?([^#]*)?/g,function(m,a,b){ parts[a?'f':'i'] = b; return '';});
44-
return parts;
45-
}
46-
,appendElmt = function(type,attrs,cb){
47-
var e = D.createElement(type), i;
48-
if( cb ){ //-- this is not intended to be used for link
49-
if(e[readyState]){
50-
e[onreadystatechange] = function(){
51-
if (e[readyState] === "loaded" || e[readyState] === "complete"){
52-
e[onreadystatechange] = null;
53-
cb();
54-
}
55-
};
56-
}else{
57-
e.onload = cb;
58-
}
59-
}
60-
for( i in attrs ){ attrs[i] && (e[i]=attrs[i]); }
61-
header.appendChild(e);
62-
// return e; // unused at this time so drop it
63-
}
64-
,load = function(url,cb){
65-
if( this.aliases && this.aliases[url] ){
66-
var args = this.aliases[url].slice(0);
67-
isA(args) || (args=[args]);
68-
cb && args.push(cb);
69-
return this.load.apply(this,args);
70-
}
71-
if( isA(url) ){ // parallelized request
72-
for( var l=url[length]; l--;){
73-
this.load(url[l]);
74-
}
75-
cb && url.push(cb); // relaunch the dependancie queue
76-
return this.load.apply(this,url);
77-
}
78-
if( url.match(/\.css\b/) ){
79-
return this.loadcss(url,cb);
80-
}
81-
return this.loadjs(url,cb);
82-
}
83-
,loaded = {} // will handle already loaded urls
84-
,loader = {
85-
aliases:{}
86-
,loadjs: function(url,cb){
87-
var parts = urlParse(url);
88-
url = parts.u;
89-
if( loaded[url] === true ){ // already loaded exec cb if any
90-
cb && cb();
91-
return this;
92-
}else if( loaded[url]!== undefined ){ // already asked for loading we append callback if any else return
93-
if( cb ){
94-
loaded[url] = (function(ocb,cb){ return function(){ ocb && ocb(); cb && cb(); }; })(loaded[url],cb);
95-
}
96-
return this;
97-
}
98-
// first time we ask this script
99-
loaded[url] = (function(cb){ return function(){loaded[url]=true; cb && cb();};})(cb);
100-
cb = function(){ loaded[url](); };
101-
appendElmt('script',{type:'text/javascript',src:url,id:parts.i,onerror:function(error){
102-
if( parts.f ){
103-
var c = error.currentTarget;
104-
c.parentNode.removeChild(c);
105-
appendElmt('script',{type:'text/javascript',src:parts.f,id:parts.i},cb);
106-
}
107-
}},cb);
108-
return this;
109-
}
110-
,loadcss: function(url,cb){
111-
var parts = urlParse(url);
112-
url = parts.u;
113-
loaded[url] || appendElmt('link',{type:'text/css',rel:'stylesheet',href:url,id:parts.i});
114-
loaded[url] = true;
115-
cb && cb();
116-
return this;
117-
}
118-
,load: function(){
119-
var argv=arguments,argc = argv[length];
120-
if( argc === 1 && isA(argv[0],Function) ){
121-
argv[0]();
122-
return this;
123-
}
124-
load.call(this,argv[0], argc <= 1 ? undefined : function(){ loader.load.apply(loader,[].slice.call(argv,1));} );
125-
return this;
126-
}
127-
,addAliases:function(aliases){
128-
for(var i in aliases ){
129-
this.aliases[i]= isA(aliases[i]) ? aliases[i].slice(0) : aliases[i];
130-
}
131-
return this;
132-
}
133-
}
134-
;
135-
if( checkLoaded ){
136-
var i,l,links,url;
137-
for(i=0,l=scripts[length];i<l;i++){
138-
(url = scripts[i].getAttribute('src')) && (loaded[url.replace(/#.*$/,'')] = true);
139-
}
140-
links = D[getElementsByTagName]('link');
141-
for(i=0,l=links[length];i<l;i++){
142-
(links[i].rel==='stylesheet' || links[i].type==='text/css') && (loaded[links[i].getAttribute('href').replace(/#.*$/,'')]=true);
143-
}
144-
}
145-
//export ljs
146-
window.ljs = loader;
147-
// eval inside tag code if any
148-
}
149-
// eval script tag content if needed
150-
scriptTag.src && script && appendElmt('script', {innerHTML: script});
151-
})(this);
3+
!function(t,e){var r=function(t,e){return t instanceof(e||Array)},i=document,n="getElementsByTagName",s="length",a="readyState",c="onreadystatechange",l=i[n]("script"),o=l[l[s]-1],u=o.innerHTML.replace(/^\s+|\s+$/g,"");if(!t.ljs){var f=o.src.match(/checkLoaded/)?1:0,h=i[n]("head")[0]||i.documentElement,d=function(t){var e={};return e.u=t.replace(/#(=)?([^#]*)?/g,function(t,r,i){return e[r?"f":"i"]=i,""}),e},p=function(t,e,r){var n,s=i.createElement(t);r&&(s[a]?s[c]=function(){("loaded"===s[a]||"complete"===s[a])&&(s[c]=null,r())}:s.onload=r);for(n in e)e[n]&&(s[n]=e[n]);h.appendChild(s)},v=function(t,e){if(this.aliases&&this.aliases[t]){var i=this.aliases[t].slice(0);return r(i)||(i=[i]),e&&i.push(e),this.load.apply(this,i)}if(r(t)){for(var n=t[s];n--;)this.load(t[n]);return e&&t.push(e),this.load.apply(this,t)}return t.match(/\.css\b/)?this.loadcss(t,e):this.loadjs(t,e)},y={},m={aliases:{},loadjs:function(t,r){var i=d(t);return t=i.u,y[t]===!0?(r&&r(),this):y[t]!==e?(r&&(y[t]=function(t,e){return function(){t&&t(),e&&e()}}(y[t],r)),this):(y[t]=function(e){return function(){y[t]=!0,e&&e()}}(r),r=function(){y[t]()},p("script",{type:"text/javascript",src:t,id:i.i,onerror:function(t){if(i.f){var e=t.currentTarget;e.parentNode.removeChild(e),p("script",{type:"text/javascript",src:i.f,id:i.i},r)}}},r),this)},loadcss:function(t,e){var r=d(t);return t=r.u,y[t]||p("link",{type:"text/css",rel:"stylesheet",href:t,id:r.i}),y[t]=!0,e&&e(),this},load:function(){var t=arguments,i=t[s];return 1===i&&r(t[0],Function)?(t[0](),this):(v.call(this,t[0],1>=i?e:function(){m.load.apply(m,[].slice.call(t,1))}),this)},addAliases:function(t){for(var e in t)this.aliases[e]=r(t[e])?t[e].slice(0):t[e];return this}};if(f){var g,j,x,A;for(g=0,j=l[s];j>g;g++)(A=l[g].getAttribute("src"))&&(y[A.replace(/#.*$/,"")]=!0);for(x=i[n]("link"),g=0,j=x[s];j>g;g++)("stylesheet"===x[g].rel||"text/css"===x[g].type)&&(y[x[g].getAttribute("href").replace(/#.*$/,"")]=!0)}t.ljs=m}o.src&&u&&p("script",{innerHTML:u})}(window);
1524

153-
ljs.load('https://unpkg.com/vue', 'https://unpkg.com/vue-custom-element', function(){
5+
ljs.load(
6+
'https://unpkg.com/vue',
7+
'https://unpkg.com/vue-custom-element',
8+
'https://unpkg.com/http-vue-loader',
9+
function () {
15410

155-
Vue.customElement('widget-vue', {
156-
props: [
157-
'prop1',
158-
'prop2',
159-
'prop3'
160-
],
161-
data: function () {
162-
return {
163-
message: 'Hello Vue!'
164-
}
165-
},
166-
template: '<p>{{ message }}, {{ prop1 }}, {{prop2}}, {{prop3}}</p>'
167-
});
11+
const countdown = httpVueLoader('./components/countdown.vue');
16812

169-
});
13+
Vue.customElement('widget-vue', {
14+
props: [
15+
'prop1',
16+
'prop2',
17+
'prop3'
18+
],
19+
components: {
20+
countdown
21+
},
22+
data: function () {
23+
return {
24+
message: 'Hello Vue!'
25+
}
26+
},
27+
template: '<div>' +
28+
'<div>{{ message }}, {{ prop1 }}, {{prop2}}, {{prop3}}</div>' +
29+
'<p>The countdown component is loaded from a .vue file</p>' +
30+
'<countdown :time="10" :autoplay="true"></countdown>' +
31+
'</div>'
32+
});
33+
34+
});
17035
}());

‎toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ <h3>Extras</h3>
5858

5959
<h3>Real-world examples</h3>
6060
<li><a href="realworld-todo-app/">Todo Application</a></li>
61+
<li><a href="realworld-standalone-widget/">Standalone Widget</a></li>
6162
<li><a href="realworld-chat-app/">Chat Application</a></li>
6263

6364
</ul>

0 commit comments

Comments
 (0)