Skip to content

Commit f90aed4

Browse files
danimesqdanimesq
committed
VueJS, UmbrellaJS, get rid of jQuery, detect ZeroNet theme, improved typography
Signed-off-by: Daniell Mesquita <[email protected]>
1 parent 0eb1b4d commit f90aed4

File tree

9 files changed

+131
-3340
lines changed

9 files changed

+131
-3340
lines changed

‎content.json

Lines changed: 33 additions & 3268 deletions
Large diffs are not rendered by default.

‎css/page-common.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ h1 .badge{font-size:40px;top:-14px}h2 .badge{font-size:35px;top:-12px}h3 .badge{
5555
.badge.blue{background-color:#5b6ed6}.badge.green{background-color:#53a93f}.badge.color{background-color:#00A185;color:#fff}
5656
.badge.mini{font-size:7px;-webkit-user-select:none;-moz-user-select:none;user-select:none}
5757

58-
.p,p{color:#585b55;font-size:14px;user-select:text!important}
58+
.p,p{color:#585b55;font-size:16px;user-select:text!important}
5959
p.color{color:#00A185}
6060

6161
.span,span{color:#888;font-size:12px}

‎elements.html

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
<title color="#fff">Elements - Framework.js</title>
55
<meta charset="utf-8">
66
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
7+
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
78
<link rel="icon" href="icon.png" />
89
<link rel="logo" href="icon.svg" border="true" />
910
<base href="" target="_top" id="base">
1011

1112
<script>base.href = document.location.href.replace("/media", "").replace("index.html", "").replace(/[&?]wrapper=False/, "").replace(/[&?]wrapper_nonce=[A-Za-z0-9]+/, "")</script>
12-
<script type="text/javascript" src="js/jquery.min.js"></script>
13+
<link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
14+
<link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/theme/default.css">
1315
<zeronet><script type="text/javascript" src="js/ZeroFrame.js"></script>
1416
<script type="text/javascript" src="plugins/ZeroDevLib/ZeroPage.js"></script></zeronet>
1517
<script type="text/javascript" src="js/page-common.js"></script>
@@ -19,19 +21,19 @@
1921
<link href="Fonts/Material Icons/font.css" rel="stylesheet">
2022
<zeronet><link href="Fonts/Text Me One/font.css" rel="stylesheet"></zeronet>
2123
<meta name="pehtml" content="true">
22-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
2324
<meta name="directory" content="css, js, img, snd">
2425
<meta name="description" content="Its a modern and responsive framework/template/theme thinked for apps and sites of the future. A unique framework with the same code, both for apps and sites.">
2526
<meta name="keywords" content="HTML5 Framework, Web Framework, Web UI Framework, Site Framework, App Framework">
2627
</head>
2728
<body id="body">
29+
<div id="app">
2830
<header><a href="./"><logo>Framework.js <span class="badge">r1</span></logo></a> <nav>
2931
<ul style="
3032
overflow: hidden!important;
3133
">
3234
<zeronet><a><li onclick="clone()"><div><i class="material-icons">add_circle</i></div><p>Create your own zite!</p></li></a>
3335
<a href="http://127.0.0.1:43110/14AYuS7E5gtiAaJKo1HMXnZnGUtiymb6Rt/" target="blank"><li><div><i class="material-icons">book</i></div><p>Blog</p></li></a>
34-
<a href="http://127.0.0.1:43110/1DS3W1EqALVYyyWoKxFPezffx2V6e8gzTU" target="blank"><li><div><i class="material-icons">comment</i></div><p>Forum</p></li></a>
36+
<a href="http://127.0.0.1:43110/1FMWKFweT5ADXajRJatNdyrdchGqyZzKeD/" target="blank"><li><div><i class="material-icons">comment</i></div><p>Forum</p></li></a>
3537
<a href="http://127.0.0.1:43110/Talk.ZeroNetwork.bit/?Topic:1536113472_15hL2gR4oCSgKBbndn3MxY8Hc5xoy1vqCe/FrameworkJS+Discussion+topic" target="blank"><li><div><i class="material-icons">comment</i></div><p>Discussion topic</p></li></a>
3638
<a href="http://127.0.0.1:43110/Mail.ZeroNetwork.bit/?to=daniell" target="blank"><li><div><i class="material-icons">mail</i></div><p>Contact</p></li></a></zeronet>
3739
</ul>
@@ -409,5 +411,17 @@ <h1 id="comments"><i class="material-icons">comment</i> Comments <span class="ba
409411
</comments>
410412
</div>
411413
<clearnet><script id="dsq-count-scr" src="//framework-js.disqus.com/count.js" async></script></clearnet>
414+
</div>
415+
416+
<script type="text/javascript" src="plugins/UmbrellaJS/umbrella.min.js"></script>
417+
<script type="text/javascript" src="plugins/VueJS/vue.js"></script>
418+
<script src="https://unpkg.com/vue-material@beta"></script>
419+
<script>
420+
Vue.use(VueMaterial.default)
421+
422+
new Vue({
423+
el: '#app'
424+
})
425+
</script>
412426
</body>
413427
</html>

‎index-default.html

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@
44
<title color="">New Framework.js project</title>
55
<meta charset="utf-8">
66
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
7+
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
78
<link rel="icon" href="icon.png" />
89
<link rel="logo" href="icon.svg" border="true" />
910
<base href="" target="_top" id="base">
1011

1112
<script>base.href = document.location.href.replace("/media", "").replace("index.html", "").replace(/[&?]wrapper=False/, "").replace(/[&?]wrapper_nonce=[A-Za-z0-9]+/, "")</script>
12-
<script type="text/javascript" src="js/jquery.min.js"></script>
13+
<link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
14+
<link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/theme/default.css">
1315
<zeronet><script type="text/javascript" src="js/ZeroFrame.js"></script>
1416
<script type="text/javascript" src="plugins/ZeroDevLib/ZeroPage.js"></script></zeronet>
15-
<script type="text/javascript" src="js/app-common.js"></script>
17+
<script type="text/javascript" src="js/page-common.js"></script>
1618
<link rel="stylesheet" type="text/css" href="css/page-common.css">
1719
<link rel="stylesheet" type="text/css" href="css/app-common.css">
1820
<link rel="stylesheet" type="text/css" href="css/page-custom.css">
@@ -21,12 +23,12 @@
2123
<link href="Fonts/Material Icons/font.css" rel="stylesheet">
2224
<zeronet><link href="Fonts/Text Me One/font.css" rel="stylesheet"></zeronet>
2325
<meta name="pehtml" content="true">
24-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
2526
<meta name="directory" content="css, js, img, snd">
2627
<meta name="description" content="">
2728
<meta name="keywords" content="">
2829
</head>
2930
<body id="body">
31+
<div id="app">
3032
<header><logo>New Framework.js project</logo></header>
3133
<div class="content">
3234
<article>
@@ -99,5 +101,17 @@ <h1 id="comments"><i class="material-icons">comment</i> Comments <span class="ba
99101
</footer>
100102
</div>
101103
<zeronet><script type="text/javascript" src="js/ZeroFrame.js"></script></zeronet>
104+
</div>
105+
106+
<script type="text/javascript" src="plugins/UmbrellaJS/umbrella.min.js"></script>
107+
<script type="text/javascript" src="plugins/VueJS/vue.js"></script>
108+
<script src="https://unpkg.com/vue-material@beta"></script>
109+
<script>
110+
Vue.use(VueMaterial.default)
111+
112+
new Vue({
113+
el: '#app'
114+
})
115+
</script>
102116
</body>
103117
</html>

‎index.html

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
<title color="#fff">Framework.js</title>
55
<meta charset="utf-8">
66
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
7+
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
78
<link rel="icon" href="icon.png" />
89
<link rel="logo" href="icon.svg" border="true" />
910
<base href="" target="_top" id="base">
1011

1112
<script>base.href = document.location.href.replace("/media", "").replace("index.html", "").replace(/[&?]wrapper=False/, "").replace(/[&?]wrapper_nonce=[A-Za-z0-9]+/, "")</script>
12-
<script type="text/javascript" src="js/jquery.min.js"></script>
13+
<link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
14+
<link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/theme/default.css">
1315
<zeronet><script type="text/javascript" src="js/ZeroFrame.js"></script>
1416
<script type="text/javascript" src="plugins/ZeroDevLib/ZeroPage.js"></script></zeronet>
1517
<script type="text/javascript" src="js/page-common.js"></script>
@@ -19,13 +21,12 @@
1921
<link href="Fonts/Material Icons/font.css" rel="stylesheet">
2022
<zeronet><link href="Fonts/Text Me One/font.css" rel="stylesheet"></zeronet>
2123
<meta name="pehtml" content="true">
22-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
2324
<meta name="directory" content="css, js, img, snd">
2425
<meta name="description" content="Its a modern and responsive framework/template/theme thinked for apps and sites of the future. A unique framework with the same code, both for apps and sites.">
25-
<meta name="keywords" content="HTML5, Framework, Web Framework, Web UI Framework, Site Framework, App Framework">
26+
<meta name="keywords" content="HTML5 Framework, Web Framework, Web UI Framework, Site Framework, App Framework">
2627
</head>
2728
<body id="body">
28-
29+
<div id="app">
2930
<header><logo>Framework.js <span class="badge">r1</span></logo> <nav>
3031
<ul style="
3132
overflow: hidden!important;
@@ -34,7 +35,7 @@
3435

3536
<zeronet><a><li onclick="clone()"><div><i class="material-icons">add_circle</i></div><p>Create your own zite!</p></li></a>
3637
<a href="http://127.0.0.1:43110/14AYuS7E5gtiAaJKo1HMXnZnGUtiymb6Rt/" target="blank"><li><div><i class="material-icons">book</i></div><p>Blog</p></li></a>
37-
<a href="http://127.0.0.1:43110/1DS3W1EqALVYyyWoKxFPezffx2V6e8gzTU" target="blank"><li><div><i class="material-icons">comment</i></div><p>Forum</p></li></a>
38+
<a href="http://127.0.0.1:43110/1FMWKFweT5ADXajRJatNdyrdchGqyZzKeD/" target="blank"><li><div><i class="material-icons">comment</i></div><p>Forum</p></li></a>
3839
<a href="http://127.0.0.1:43110/Talk.ZeroNetwork.bit/?Topic:1536113472_15hL2gR4oCSgKBbndn3MxY8Hc5xoy1vqCe/FrameworkJS+Discussion+topic" target="blank"><li><div><i class="material-icons">comment</i></div><p>Discussion topic</p></li></a>
3940
<a href="http://127.0.0.1:43110/Mail.ZeroNetwork.bit/?to=daniell" target="blank"><li><div><i class="material-icons">mail</i></div><p>Contact</p></li></a></zeronet>
4041
</ul>
@@ -57,6 +58,8 @@
5758
<li>ZeroDevLib (thanks to Imachug)</li>
5859
<li>Can prompt user to clone your site (thanks to Daniell and Imachug)</li>
5960
<li>Supports hashes on the URL (thanks to Krixano and Daniell)</li>
61+
<li>Get rid of jQuery (thanks to ZeroLSTN)</li>
62+
<li>Detect if ZeroNet theme is dark or light (thanks to ZeroLSTN)</li>
6063
</ul>
6164
<p style="color:#8e9194">Proxies are on clearnet, but we consider as ZeroNet when detecting the platform.</p>
6265
<p style="font-family:'Text Me One';color:#8e9194">Likes this font? Just put <code>&lt;link href="Fonts/Text Me One/font.css" rel="stylesheet"&gt;</code> on your HTML and <code>font-family: 'Text Me One';</code> in your CSS.</p></div></zeronet>
@@ -268,5 +271,17 @@ <h1 id="comments"><i class="material-icons">comment</i> Comments <span class="ba
268271
</footer>
269272
</div>
270273
<clearnet><script id="dsq-count-scr" src="//framework-js.disqus.com/count.js" async></script></clearnet>
274+
</div>
275+
276+
<script type="text/javascript" src="plugins/UmbrellaJS/umbrella.min.js"></script>
277+
<script type="text/javascript" src="plugins/VueJS/vue.js"></script>
278+
<script src="https://unpkg.com/vue-material@beta"></script>
279+
<script>
280+
Vue.use(VueMaterial.default)
281+
282+
new Vue({
283+
el: '#app'
284+
})
285+
</script>
271286
</body>
272287
</html>

‎js/jquery.min.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎js/page-common.js

Lines changed: 34 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,74 +2,25 @@
22
Framework.js r1 | (c) 2014 - 2018 Plasmmer | https://plasnerd.github.io/Framework.js/LICENSE.md
33
*/
44

5-
jQuery(document).ready(function($){
6-
75
if(!window.zeroPage) {
86
zeroFrame = new ZeroFrame();
97
zeroPage = new ZeroPage(zeroFrame);
108
}
119

12-
/*Show features only for ZeroNet or only for clearnet.*/
10+
var body = document.getElementsByTagName("BODY")[0];
1311

12+
/*Show features only for ZeroNet or only for clearnet*/
1413
if (document.location.href.indexOf("wrapper_nonce") > 0) zeronet();
1514
else clearnet();
1615

1716
function clearnet() {
18-
$("body").prepend("<style>zeronet{display:none}</style>");
17+
body.innerHTML = '<style>zeronet{display:none}</style>' + body.innerHTML;
1918
}
2019

2120
function zeronet() {
22-
$("body").prepend("<style>clearnet{display:none}</style>");
21+
body.innerHTML = '<style>clearnet{display:none}</style>' + body.innerHTML;
2322
}
2423

25-
/*Tabs menu from kickstart.js, which is part of 99Lime.com HTML KickStart by Joshua Gatcke.*/
26-
27-
/*---------------------------------
28-
Tabs
29-
-----------------------------------*/
30-
// tab setup
31-
$('.tab-content').addClass('clearfix').not(':first').hide();
32-
$('ul.tabs').each(function(){
33-
var current = $(this).find('li.current');
34-
if(current.length < 1) { $(this).find('li:first').addClass('current'); }
35-
current = $(this).find('li.current a').attr('href');
36-
$(current).show();
37-
});
38-
39-
// tab click
40-
$(document).on('click', 'ul.tabs a[href^="#"]', function(e){
41-
/*body = document.createElement('audio');
42-
body.innerHTML = '<audio id="sound" src="' + 'System/Resources/snd/Navigation.flac'+ '" autoplay></audio>';*/
43-
e.preventDefault();
44-
var tabs = $(this).parents('ul.tabs').find('li');
45-
var tab_next = $(this).attr('href');
46-
var tab_current = tabs.filter('.current').find('a').attr('href');
47-
$(tab_current).hide();
48-
tabs.removeClass('current');
49-
$(this).parent().addClass('current');
50-
$(tab_next).show();
51-
return false;
52-
});
53-
54-
// tab hashtag identification and auto-focus
55-
var wantedTag = window.location.hash;
56-
if (wantedTag != "")
57-
{
58-
// This code can and does fail, hard, killing the entire app.
59-
// Esp. when used with the jQuery.Address project.
60-
try {
61-
var allTabs = $("ul.tabs a[href^=" + wantedTag + "]").parents('ul.tabs').find('li');
62-
var defaultTab = allTabs.filter('.current').find('a').attr('href');
63-
$(defaultTab).hide();
64-
allTabs.removeClass('current');
65-
$("ul.tabs a[href^=" + wantedTag + "]").parent().addClass('current');
66-
$("#" + wantedTag.replace('#','')).show();
67-
} catch(e) {
68-
// I have no idea what to do here, so I'm leaving this for the maintainer.
69-
};
70-
}
71-
});
72-
7324
/*Get hash links working (for endnotes, etc.)*/
7425
var elements = document.querySelectorAll('a[href^="#"]');
7526
for (var i = 0; i < elements.length; i++) {
@@ -79,10 +30,37 @@ for (var i = 0; i < elements.length; i++) {
7930

8031
/*Clones FrameworkJS and opens your own project*/
8132
function clone() {
82-
return zeroPage.getSiteInfo().then(siteInfo => zeroPage.cmd("siteClone", [siteInfo.address]));
33+
return zeroPage.getSiteInfo().then(function(siteInfo){zeroPage.cmd("siteClone", [siteInfo.address])});
8334
}
8435

85-
/*Clones the zite you want. You can use this as model to create your own clonning functions.*/
36+
/*Clones the zite you want. You can use this as model to create your own clonning functions*/
8637
function cloneselect() {
8738
return zeroPage.cmd("siteClone", ["1Fmwk685eaX7GjoQ7JKo3QvywizGfnYRCB"]);
88-
}
39+
}
40+
41+
/*Detect ZeroNet theme and apply the style according to it*/
42+
zeroFrame.cmd("serverInfo", {}, (server_info) => {
43+
// Print server_info to the console
44+
console.log("Server info:", server_info)
45+
46+
// Retrieve the document body
47+
const body = document.body
48+
49+
// Check user_settings exists
50+
if (!server_info.user_settings) {
51+
// Exit this function if it doesn't
52+
return
53+
}
54+
55+
// Depending on user theme settings, set the theme
56+
switch(server_info.user_settings.theme) {
57+
case "light":
58+
body.innerHTML = '<style>lighttheme</style>' + body.innerHTML
59+
break
60+
case "dark":
61+
body.innerHTML = '<style>darktheme</style>' + body.innerHTML
62+
break
63+
default:
64+
console.log("Theming not supported. Please upgrade your ZeroNet version.")
65+
}
66+
})

0 commit comments

Comments
 (0)