Fixed tutorial view and reimplemented API for new frontend
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 85d4d2e..ff21908 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -47,7 +47,7 @@
<!-- Todo: open tutorial - like openTutorial() -->
<a href="doc/faq" class="question"><span>Question</span></a>
- <a href="about.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
+ <a href="tutorial.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
</div>
</form>
</header>
diff --git a/dev/demo/tutorial.html b/dev/demo/tutorial.html
index c7aea38..7c4a87f 100644
--- a/dev/demo/tutorial.html
+++ b/dev/demo/tutorial.html
@@ -3,7 +3,7 @@
<head>
<title>Tutorial demo</title>
<link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
- <script data-main="all.js" src="../js/lib/require.js" async="async"></script>
+ <script data-main="alldemo.js" src="../js/lib/require.js" async="async"></script>
</head>
<body class="embedded">
<aside tabindex="0" class="active">
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index cd0adfc..cd99df1 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -108,11 +108,21 @@
/**
* Init Tutorial view
*/
- obj.tutorial = tutClass.create(
- document.getElementById('view-tutorial')
- );
+ if (document.getElementById('view-tutorial')) {
+ window.tutorial = tutClass.create(
+ document.getElementById('view-tutorial')
+ );
+ obj.tutorial = window.tutorial;
+ }
-
+ // Tutorial is in parent
+ else if (window.parent) {
+ obj.tutorial = window.parent.tutorial;
+ };
+
+ // Initialize queries for document
+ obj.tutorial.initQueries(document);
+
/**
* Init hint helper
* has to be final because of
diff --git a/dev/js/src/tutorial.js b/dev/js/src/tutorial.js
index 4f00ee1..cacbe21 100644
--- a/dev/js/src/tutorial.js
+++ b/dev/js/src/tutorial.js
@@ -27,25 +27,64 @@
_init : function (obj) {
this._session = sessionClass.create();
- this._show = obj;
- this.start = obj.getAttribute('href');
- obj.removeAttribute('href');
- var that = this;
- obj.onclick = function () {
- that.show();
+
+ if (obj) {
+ this._show = obj;
+ this.start = obj.getAttribute('href');
+ obj.removeAttribute('href');
+ var that = this;
+ obj.onclick = function () {
+ that.show();
+ };
+
+ // Injects a tutorial div to the body
+ var div = document.createElement('div');
+ div.setAttribute('id', 'tutorial');
+ div.style.display = 'none';
+ document.getElementsByTagName('body')[0].appendChild(div);
+ this._iframe = null;
+ this._element = div;
+
+ // Some fields
+ this._ql = document.getElementById("ql-field");
+ this._q = document.getElementById("q-field")
+ this._cutoff = document.getElementById("q-cutoff-field");
};
- // Injects a tutorial div to the body
- var div = document.createElement('div');
- div.setAttribute('id', 'tutorial');
- div.style.display = 'none';
- document.getElementsByTagName('body')[0].appendChild(div);
- this._iframe = null;
-
- this._element = div;
return this;
},
+ useQuery : function (e) {
+ var q = e.getAttribute("data-query");
+ var ql = e.getAttribute("data-query-language");
+ var qc = e.getAttribute("data-query-cutoff");
+ if (qc !== 0 && qc !== "0" && qc !== "off" && qc !== null) {
+ this._cutoff.checked = true;
+ };
+
+ var qlf = this._ql.options;
+ for (var i in qlf) {
+ if (qlf[i].value == ql) {
+ qlf[i].selected = true;
+ };
+ };
+
+ this._q.value = q;
+ this.setPage(e);
+ this.hide();
+ },
+
+ initQueries : function (d) {
+ var qs = d.querySelectorAll('pre.query.tutorial');
+ var that = this;
+ for (var i = 0; i < qs.length; i++) {
+ qs[i].onclick = function (e) {
+ that.useQuery(this,e);
+ };
+ };
+ },
+
+
show : function () {
var element = this._element;
if (element.style.display === 'block')
@@ -94,7 +133,7 @@
* Close tutorial window.
*/
hide : function () {
- this._element.display.style = 'none';
+ this._element.style.display = 'none';
},
/**
@@ -105,7 +144,7 @@
var page = obj;
if (typeof page != 'string') {
page = window.location.pathname + window.location.search;
- for (i = 1; i < 5; i++) {
+ for (var i = 1; i < 5; i++) {
if (obj.nodeName === 'SECTION') {
if (obj.hasAttribute('id'))
page += '#' + obj.getAttribute('id');
@@ -128,6 +167,7 @@
*/
getPage : function () {
this._session.get('tutpage');
- },
+ }
};
});
+
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 1d3d26a..ca1029e 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -37,7 +37,7 @@
color: $dark-orange;
text-decoration: none;
&:hover {
- color: $light-green; // $darkest-orange;
+ color: $darkest-orange;
@include color-transition;
}
&:active, &:visited {
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index e63283a..8b4e0a5 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -105,6 +105,10 @@
content: $fa-login;
}
}
+
+ #vc-view > div {
+ margin: 1.3em 0 .5em 0;
+ }
}
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 883f003..6411d87 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -97,13 +97,13 @@
*/
&::after {
font-family: "FontAwesome";
- content: '\f096';
+ content: $fa-check;
}
}
}
&:checked + label span {
&:after {
- content:"\f046";
+ content: $fa-checked;
}
}
-}
+}
\ No newline at end of file
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index d6650a4..12071db 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -249,3 +249,17 @@
}
}
}
+
+
+#vc-choose {
+ &::after {
+ content: $fa-down;
+ padding: {
+ left: 2pt;
+ right: 4pt;
+ }
+ }
+ &.active::after {
+ content: $fa-up;
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index f0e10de..8b91f22 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -181,4 +181,6 @@
$fa-tutorial: "\f19d";
$fa-left-align: "\f036";
$fa-right-align: "\f038";
-$fa-question: "\f128"; // "\f059";
\ No newline at end of file
+$fa-question: "\f128"; // "\f059";
+$fa-checked: "\f046";
+$fa-check: "\f096";
\ No newline at end of file