Minor bug fixes and code formatting, and limit-years style modified a little bit
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..6241a8a
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,22 @@
+#Contributing
+For the sake of safe and understandable code, we divide our JS scripts and CSS styles into multiples files. But, to make the page load faster, before committing, please run `sh concatenate.sh` so all those files are concatenated.
+
+This will concatenate the files in the following way:
+
+The file script.js will be created with the concatenation of the following files: (in this order)
+1. circle-mode.js
+2. graf.js
+3. limit-years.js
+4. search-bar.js
+5. dialog.js
+6. camera.js
+7. just-do-it.js
+8. init.js
+
+The file styles.css will be created with the concatenation of the following files: (in this order)
+1. general.css
+2. graf.css
+3. dialog.css
+4. option-buttons.css
+5. year-list.css
+6. search-bar.css
diff --git a/README.md b/README.md
index 27b3fd4..6cd7bdd 100644
--- a/README.md
+++ b/README.md
@@ -1,74 +1,10 @@
# Graf Alternatiu de la FME
## Independent interface for FME's graph
-This project is an alternative read-only user-interface for FME's graph. It is compatible and user-friendly with mobile devices.
+This project is an alternative read-only user-interface for the FME's graph. It is compatible and user-friendly with mobile devices.
## How to contibute
-For the sake of safe and understandable code, we divide our JS scripts and CSS styles into multiples files. But, to make the page load faster, before a pull request, you should concatenate these files in the following manner. <br><br>
-
-In the file script.js, concatenate: (order is important!)
-<ol>
- <li>circle-mode.js</li>
- <li>graf.js</li>
- <li>limit-years.js</li>
- <li>search-bar.js</li>
- <li>dialog.js</li>
- <li>camera.js</li>
- <li>easter-eg.js</li>
-</ol>
-<br><br>
-
-In the file styles.css, concatenate: (order is important!)
-<ol>
- <li>general.css</li>
- <li>graf.css</li>
- <li>dialog.css</li>
- <li>option-buttons.css</li>
- <li>year-list.css</li>
- <li>search-bar.css</li>
-</ol>
+Check out [CONTRIBUTING.md](CONTRIBUTING.md).
## Things to do
-<ul>
- <li>
- Make limit-years prettier and incluse/exclusive with double check-boxes
- </li>
- <li>
- Make statistics about the graph: biggest K_n, diameter, etc...
- </li>
- <li>
- Make circle-mode + year-limit = smaller-circle-mode
- </li>
- <li>
- Modify the autocomplete so that eliminated nodes don't appear
- </li>
- <li>
- Separate non-connex nodes in circle-mode
- </li>
-</ul>
-
-
-## Things done
-<ul>
- <li>
- Search bar with autocomplete
- </li>
- <li>
- Dialog for nodes
- </li>
- <li>
- Easter egg
- </li>
- <li>
- Limit years to a specific range
- </li>
- <li>
- Circle visualization
- </li>
- <li>
- Hide nodes inside erasing rectangle and very far from origin
- </li>
- <li>
- Hide zoom buttons for tactile devices
- </li>
-</ul>
+Check out [TODO.md](TODO.md).
diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..a796ab7
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,14 @@
+# TODO
+1. Make limit-years prettier and inclusive/exclusive with double check-boxes
+2. Make statistics about the graph: biggest K_n, diameter, etc...
+3. Make circle-mode + year-limit = smaller-circle-mode
+4. Modify the autocomplete so that eliminated nodes don't appear
+5. Separate non-connex nodes in circle-mode
+
+## Things done
+1. Search bar with autocomplete
+2. Dialog for nodes
+3. Limit years to a specific range
+4. Circle visualization
+5. Hide nodes inside erasing rectangle and very far from origin
+6. Hide zoom buttons for tactile devices
diff --git a/concatenate.sh b/concatenate.sh
new file mode 100644
index 0000000..e8e72c3
--- /dev/null
+++ b/concatenate.sh
@@ -0,0 +1,3 @@
+#!/bin/sh
+(cd css && rm -f styles.css && cat general.css graf.css dialog.css option-buttons.css year-list.css search-bar.css > styles.css)
+(cd js && rm -f script.js && cat circle-mode.js graf.js limit-years.js search-bar.js dialog.js camera.js just-do-it.js init.js > script.js)
diff --git a/css/dialog.css b/css/dialog.css
index 313ec29..70d7ff7 100644
--- a/css/dialog.css
+++ b/css/dialog.css
@@ -75,4 +75,4 @@
font-weight: bold;
font-size: 20px;
margin: 0;
-}
\ No newline at end of file
+}
diff --git a/css/general.css b/css/general.css
index eda32ac..27e07e1 100644
--- a/css/general.css
+++ b/css/general.css
@@ -10,4 +10,3 @@
user-select: none !important;
font-family: 'Roboto';
}
-
diff --git a/css/graf.css b/css/graf.css
index de6a5a6..d977170 100644
--- a/css/graf.css
+++ b/css/graf.css
@@ -8,4 +8,4 @@
span {
position: relative;
z-index: -1;
-}
\ No newline at end of file
+}
diff --git a/css/option-buttons.css b/css/option-buttons.css
index f23168b..2c4ddff 100644
--- a/css/option-buttons.css
+++ b/css/option-buttons.css
@@ -40,4 +40,4 @@
#zoomout.touch {
display: none;
-}
\ No newline at end of file
+}
diff --git a/css/search-bar.css b/css/search-bar.css
index 46d121e..48da607 100644
--- a/css/search-bar.css
+++ b/css/search-bar.css
@@ -102,6 +102,8 @@
color: black;
box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0
rgba(255, 255, 255, 0.156863) !important;
+ max-height: 510px;
+ overflow-y: auto;
}
.autocomplete-item {
@@ -117,7 +119,7 @@
.autocomplete-year {
position: relative;
z-index: 120;
-
+
color: #222;
}
@@ -133,4 +135,4 @@
#min-dialog {
display: block !important;
}
-}
\ No newline at end of file
+}
diff --git a/css/styles.css b/css/styles.css
index 29a342a..cb36762 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,304 +1,303 @@
-/* ********** HERE STARTS general.css ****** */
-
-html, body {
- margin: 0;
- width: 100%;
- height: 100%;
- background-color: #060606;
- color: white;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- user-select: none !important;
- font-family: 'Roboto';
-}
-
-
-/* ********** HERE STARTS graf.css ****** */
-
-#graf {
- width: 100%;
- height: 100%;
-}
-
-span {
- position: relative;
- z-index: -1;
-}
-
-
-/* ********** HERE STARTS dialog.css ****** */
-
-#dialog {
- position: absolute;
- top: 0px;
- left: 0px;
- width: 300px;
- height: 100%;
- background-color: white;
- color: black;
- z-index: 120;
- overflow-y: auto;
-}
-
-#backdrop {
- display: none;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, .5);
- z-index: 110;
-}
-
-#dialog-vertex, #dialog-edge {
- padding: 8px;
- user-select: auto;
-}
-
-#dialog h2 {
- font-weight: bold;
- font-size: 20px;
-}
-
-#dialog h3 {
- font-weight: bold;
- font-size: 16px;
- margin-bottom: 0;
-}
-
-#quit-dialog, #quit2-dialog {
- position: absolute;
- top: 8px;
- right: 8px;
-}
-
-#min-dialog, #max-dialog {
- position: absolute;
- top: 8px;
- right: 48px;
-}
-
-#min-dialog {
- display: none;
-}
-
-#summary-dialog {
- position: absolute;
- top: 0px;
- left: 0px;
- width: 100%;
- height: 100px;
- background-color: white;
- color: black;
- z-index: 120;
-}
-
-#summary-vertex {
- padding: 8px;
- user-select: auto;
-}
-
-#summary-dialog h2 {
- font-weight: bold;
- font-size: 20px;
- margin: 0;
-}
-
-/* ********** HERE STARTS search-bar.css ****** */
-#circle-mode {
- position: absolute;
- right: 10px;
- bottom: 210px;
- z-index: 100;
-}
-
-#settings {
- position: absolute;
- right: 10px;
- bottom: 160px;
- z-index: 100;
-}
-
-#search {
- position: absolute;
- right: 10px;
- bottom: 110px;
- z-index: 100;
-}
-
-#zoomin {
- position: absolute;
- right: 10px;
- bottom: 60px;
- z-index: 100;
-}
-
-#zoomout {
- position: absolute;
- right: 10px;
- bottom: 10px;
- z-index: 100;
-}
-
-#zoomin.touch {
- display: none;
-}
-
-#zoomout.touch {
- display: none;
-}
-
-/* ********** HERE STARTS year-list.css ****** */
-#year-list {
- padding: 10px;
- padding-top: 0px;
- float: right;
- position:relative;
- z-index:10;
- display:none
-}
-
-#year-list-span {
- position:relative;
- z-index:10;
-}
-
-
-/* ********** HERE STARTS search-bar.css ****** */
-.md-google-search__metacontainer {
- position: absolute;
- top: 10px;
- height: 48px;
- width: 100%;
- z-index: 100;
-}
-
-.md-google-search__container {
- display: block;
- margin-left: auto;
- margin-right: auto;
- height: 48px;
- width: Calc(100% - 66px);
- max-width: 720px;
- white-space: nowrap;
-}
-
-.md-google-search {
- height: 48px;
- background-color: rgba(245, 245, 245, 1);
- border: 1px solid rgba(0, 0, 0, 0);
- -webkit-border-radius: 4px;
- border-radius: 4px;
- max-width: 720px;
- position: relative;
- -webkit-transition: background-color 100ms ease-in, width 100ms ease-out;
- transition: background-color 100ms ease-in, width 100ms ease-out;
-}
-
-.md-google-search:focus-within {
- border: 1px solid rgba(0, 0, 0, 0.45);
- background-color: rgba(255, 255, 255, 1);
- -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
- box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
-}
-
-.md-google-search__search-btn {
- float: left;
- background: none;
- border: none;
- opacity: .54;
- outline: none;
- padding: 0 4px;
- line-height: 0;
- color: #212121;
-}
-
-.md-google-search__search-btn svg, .md-google-search__empty-btn svg {
- padding: 7px;
- margin: 4px;
-}
-
-.md-google-search__field-container {
- height: 46px;
- padding: 0 11px;
- margin-right: 48px;
-}
-
-.md-google-search__field {
- border: none;
- font: normal 16px Roboto, sans-serif;
- height: 24px;
- outline: none;
- padding: 11px 0 11px 16px;
- width: 100%;
- background: transparent;
-}
-
-.md-google-search__empty-btn {
- position: absolute;
- right: 0;
- top: 0;
- background: none;
- border: none;
- opacity: .54;
- outline: none;
- padding: 0 4px;
- line-height: 0;
- color: #212121;
- cursor: pointer;
-}
-
-/**
- * Search Box Autocomplete
- */
-.autocomplete-container {
- z-index: 110;
- position: absolute;
- top: 60px;
- width: 100%;
-}
-
-.autocomplete-items {
- display: block;
- margin-left: auto;
- margin-right: auto;
- width: Calc(100% - 66px);
- max-width: 720px;
- background-color: white;
- color: black;
- box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0
- rgba(255, 255, 255, 0.156863) !important;
- max-height: 510px;
- overflow-y: auto;
-}
-
-.autocomplete-item {
- font-size: 16px;
- padding: 12px 14px;
- cursor: pointer;
-}
-
-.autocomplete-item:hover, .autocomplete-active {
- background: #eee;
-}
-
-.autocomplete-year {
- position: relative;
- z-index: 120;
-
- color: #222;
-}
-
-@media ( max-width : 700px) {
- #dialog {
- width: Calc(100% - 32px) !important;
- height: Calc(100% - 32px) !important;
- margin: 16px;
- }
- #backdrop {
- display: block;
- }
- #min-dialog {
- display: block !important;
- }
-}
+/* ********** HERE STARTS general.css ****** */
+
+html, body {
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #060606;
+ color: white;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ user-select: none !important;
+ font-family: 'Roboto';
+}
+/* ********** HERE STARTS graf.css ****** */
+
+#graf {
+ width: 100%;
+ height: 100%;
+}
+
+span {
+ position: relative;
+ z-index: -1;
+}
+/* ********** HERE STARTS dialog.css ****** */
+
+#dialog {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 300px;
+ height: 100%;
+ background-color: white;
+ color: black;
+ z-index: 120;
+ overflow-y: auto;
+}
+
+#backdrop {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, .5);
+ z-index: 110;
+}
+
+#dialog-vertex, #dialog-edge {
+ padding: 8px;
+ user-select: auto;
+}
+
+#dialog h2 {
+ font-weight: bold;
+ font-size: 20px;
+}
+
+#dialog h3 {
+ font-weight: bold;
+ font-size: 16px;
+ margin-bottom: 0;
+}
+
+#quit-dialog, #quit2-dialog {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+}
+
+#min-dialog, #max-dialog {
+ position: absolute;
+ top: 8px;
+ right: 48px;
+}
+
+#min-dialog {
+ display: none;
+}
+
+#summary-dialog {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100px;
+ background-color: white;
+ color: black;
+ z-index: 120;
+}
+
+#summary-vertex {
+ padding: 8px;
+ user-select: auto;
+}
+
+#summary-dialog h2 {
+ font-weight: bold;
+ font-size: 20px;
+ margin: 0;
+}
+/* ********** HERE STARTS search-bar.css ****** */
+#circle-mode {
+ position: absolute;
+ right: 10px;
+ bottom: 210px;
+ z-index: 100;
+}
+
+#settings {
+ position: absolute;
+ right: 10px;
+ bottom: 160px;
+ z-index: 100;
+}
+
+#search {
+ position: absolute;
+ right: 10px;
+ bottom: 110px;
+ z-index: 100;
+}
+
+#zoomin {
+ position: absolute;
+ right: 10px;
+ bottom: 60px;
+ z-index: 100;
+}
+
+#zoomout {
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ z-index: 100;
+}
+
+#zoomin.touch {
+ display: none;
+}
+
+#zoomout.touch {
+ display: none;
+}
+/* ********** HERE STARTS year-list.css ****** */
+
+#year-list {
+ padding: 16px;
+ padding-top: 0;
+ position:absolute;
+ right: 0;
+ top: 68px;
+ z-index:10;
+ display:none
+}
+
+#year-list-span {
+ position:relative;
+ z-index:10;
+}
+
+.custom-checkbox .mdl-checkbox__box-outline {
+ border: 2px solid rgba(0,0,0,.8)!important;
+ background-color: white!important;
+}
+/* ********** HERE STARTS search-bar.css ****** */
+.md-google-search__metacontainer {
+ position: absolute;
+ top: 10px;
+ height: 48px;
+ width: 100%;
+ z-index: 100;
+}
+
+.md-google-search__container {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ height: 48px;
+ width: Calc(100% - 66px);
+ max-width: 720px;
+ white-space: nowrap;
+}
+
+.md-google-search {
+ height: 48px;
+ background-color: rgba(245, 245, 245, 1);
+ border: 1px solid rgba(0, 0, 0, 0);
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ max-width: 720px;
+ position: relative;
+ -webkit-transition: background-color 100ms ease-in, width 100ms ease-out;
+ transition: background-color 100ms ease-in, width 100ms ease-out;
+}
+
+.md-google-search:focus-within {
+ border: 1px solid rgba(0, 0, 0, 0.45);
+ background-color: rgba(255, 255, 255, 1);
+ -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
+ box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
+}
+
+.md-google-search__search-btn {
+ float: left;
+ background: none;
+ border: none;
+ opacity: .54;
+ outline: none;
+ padding: 0 4px;
+ line-height: 0;
+ color: #212121;
+}
+
+.md-google-search__search-btn svg, .md-google-search__empty-btn svg {
+ padding: 7px;
+ margin: 4px;
+}
+
+.md-google-search__field-container {
+ height: 46px;
+ padding: 0 11px;
+ margin-right: 48px;
+}
+
+.md-google-search__field {
+ border: none;
+ font: normal 16px Roboto, sans-serif;
+ height: 24px;
+ outline: none;
+ padding: 11px 0 11px 16px;
+ width: 100%;
+ background: transparent;
+}
+
+.md-google-search__empty-btn {
+ position: absolute;
+ right: 0;
+ top: 0;
+ background: none;
+ border: none;
+ opacity: .54;
+ outline: none;
+ padding: 0 4px;
+ line-height: 0;
+ color: #212121;
+ cursor: pointer;
+}
+
+/**
+ * Search Box Autocomplete
+ */
+.autocomplete-container {
+ z-index: 110;
+ position: absolute;
+ top: 60px;
+ width: 100%;
+}
+
+.autocomplete-items {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: Calc(100% - 66px);
+ max-width: 720px;
+ background-color: white;
+ color: black;
+ box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0
+ rgba(255, 255, 255, 0.156863) !important;
+ max-height: 510px;
+ overflow-y: auto;
+}
+
+.autocomplete-item {
+ font-size: 16px;
+ padding: 12px 14px;
+ cursor: pointer;
+}
+
+.autocomplete-item:hover, .autocomplete-active {
+ background: #eee;
+}
+
+.autocomplete-year {
+ position: relative;
+ z-index: 120;
+
+ color: #222;
+}
+
+@media ( max-width : 700px) {
+ #dialog {
+ width: Calc(100% - 32px) !important;
+ height: Calc(100% - 32px) !important;
+ margin: 16px;
+ }
+ #backdrop {
+ display: block;
+ }
+ #min-dialog {
+ display: block !important;
+ }
+}
diff --git a/css/year-list.css b/css/year-list.css
index 45993b2..d30f7d8 100644
--- a/css/year-list.css
+++ b/css/year-list.css
@@ -1,9 +1,11 @@
/* ********** HERE STARTS year-list.css ****** */
+
#year-list {
- padding: 10px;
- padding-top: 0px;
- float: right;
- position:relative;
+ padding: 16px;
+ padding-top: 0;
+ position:absolute;
+ right: 0;
+ top: 68px;
z-index:10;
display:none
}
@@ -11,4 +13,9 @@
#year-list-span {
position:relative;
z-index:10;
-}
\ No newline at end of file
+}
+
+.custom-checkbox .mdl-checkbox__box-outline {
+ border: 2px solid rgba(0,0,0,.8)!important;
+ background-color: white!important;
+}
diff --git a/js/autocomplete.js b/js/autocomplete.js
index 107b03a..36bfa8c 100644
--- a/js/autocomplete.js
+++ b/js/autocomplete.js
@@ -1,152 +1,152 @@
// *********** HERE STARTS autocomplete.js *************
function autocomplete(inp, obj, act) {
- /*the autocomplete function takes two arguments,
- the text field element and an objay of possible autocompleted values:*/
- var currentFocus;
- /*execute a function when someone writes in the text field:*/
- inp.addEventListener("input", function(e) {
- var a, b, i, val = this.value;
- /*close any already open lists of autocompleted values*/
- clearLists();
- document.querySelector(".md-google-search__empty-btn").style.display = (val ? "block" : "none");
- if (!val || val.length < 3) return false;
- currentFocus = -1;
- var is_empty = true;
+ /*the autocomplete function takes two arguments,
+ the text field element and an objay of possible autocompleted values:*/
+ var currentFocus;
+ /*execute a function when someone writes in the text field:*/
+ inp.addEventListener("input", function(e) {
+ var a, b, i, val = this.value;
+ /*close any already open lists of autocompleted values*/
+ clearLists();
+ document.querySelector(".md-google-search__empty-btn").style.display = (val ? "block" : "none");
+ if (!val || val.length < 3) return false;
+ currentFocus = -1;
+ var is_empty = true;
- /*for each item in the object...*/
- for (node in obj) {
- var nomNode = obj[node].name;
+ /*for each item in the object...*/
+ for (node in obj) {
+ var nomNode = obj[node].name;
- if (nomNode.toUpperCase().includes(val.toUpperCase())) {
- is_empty = false;
- var parts = nomNode.toUpperCase().split(val.toUpperCase());
-
- /*create a DIV element for each matching element:*/
- b = document.createElement("div");
- b.setAttribute("class", "autocomplete-item");
+ if (nomNode.toUpperCase().includes(val.toUpperCase())) {
+ is_empty = false;
+ var parts = nomNode.toUpperCase().split(val.toUpperCase());
- /*make the matching letters bold:*/
- if (parts[0].length == 0) b.innerHTML = "";
- else b.innerHTML = "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(0, parts[0].length) + "</span>";
-
- b.innerHTML += nomNode.substr(parts[0].length, val.length);
- b.innerHTML += "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(parts[0].length + val.length) + "</span>";
- b.innerHTML += " <span class='autocomplete-year'>(" + obj[node].year + ")</span>";
+ /*create a DIV element for each matching element:*/
+ b = document.createElement("div");
+ b.setAttribute("class", "autocomplete-item");
- /*include node id to keep track of which is it*/
- b.dataset.id = node;
+ /*make the matching letters bold:*/
+ if (parts[0].length == 0) b.innerHTML = "";
+ else b.innerHTML = "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(0, parts[0].length) + "</span>";
- /*execute a function when someone clicks on the item value (DIV element):*/
- b.addEventListener("click", function(e) {
- /*insert the value for the autocomplete text field:*/
- var n = this.dataset.id;
- inp.value = obj[n].name;
+ b.innerHTML += nomNode.substr(parts[0].length, val.length);
+ b.innerHTML += "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(parts[0].length + val.length) + "</span>";
+ b.innerHTML += " <span class='autocomplete-year'>(" + obj[node].year + ")</span>";
- var node = null;
-
- s.graph.nodes().forEach( function(nnode) {
- if(nnode.id == n) node = nnode;
- });
-
+ /*include node id to keep track of which is it*/
+ b.dataset.id = node;
- switch (act) {
- case "search":
- // Move camera to desired node
- cameraGoto(node.x, node.y);
- break;
- case "addEdge":
- // @TODO: Add an edge between A and B
- alert(obj[n].name);
- break;
- }
+ /*execute a function when someone clicks on the item value (DIV element):*/
+ b.addEventListener("click", function(e) {
+ /*insert the value for the autocomplete text field:*/
+ var n = this.dataset.id;
+ inp.value = obj[n].name;
- /*close the list of autocompleted values,
- (or any other open lists of autocompleted values:*/
- clearLists();
- });
+ var node = null;
- // Set "data-edges" attribute and compare with others
- var nEdges = Object.keys(s.graph.neighbors(node)).length;
- b.dataset.edges = nEdges;
- var inserted = false;
+ s.graph.nodes().forEach( function(nnode) {
+ if(nnode.id == n) node = nnode;
+ });
- // Sort nodes by degree
- for (i in document.querySelector("#autocomplete-list").childNodes) {
- var child = document.querySelector("#autocomplete-list").childNodes[i];
- if (!child.dataset) break;
- if (nEdges > child.dataset.edges) {
- document.querySelector("#autocomplete-list").insertBefore(b, child);
- inserted = true;
- break;
- }
- }
- if (!inserted) {
- document.querySelector("#autocomplete-list").appendChild(b);
- }
- }
- }
+ switch (act) {
+ case "search":
+ // Move camera to desired node
+ cameraGoto(node.x, node.y);
+ break;
+ case "addEdge":
+ // @TODO: Add an edge between A and B
+ alert(obj[n].name);
+ break;
+ }
- document.querySelector(".autocomplete-container").style.display = (is_empty ? "none" : "block");
- });
+ /*close the list of autocompleted values,
+ (or any other open lists of autocompleted values:*/
+ clearLists();
+ });
- document.querySelector(".md-google-search__empty-btn").addEventListener("click", function() {
- document.querySelector("#search-input").value = "";
- this.style.display = "none";
- });
+ // Set "data-edges" attribute and compare with others
+ var nEdges = Object.keys(s.graph.neighbors(node)).length;
+ b.dataset.edges = nEdges;
+ var inserted = false;
- /*execute a function presses a key on the keyboard:*/
- inp.addEventListener("keydown", function(e) {
- var x = document.getElementById("autocomplete-list");
- if (x) x = x.getElementsByTagName("div");
- if (x.length == 0) return;
- if (e.keyCode == 40) {
- /*If the objow DOWN key is pressed,
- increase the currentFocus variable:*/
- currentFocus++;
- /*and and make the current item more visible:*/
- addActive(x);
- } else if (e.keyCode == 38) { //up
- /*If the objow UP key is pressed,
- decrease the currentFocus variable:*/
- currentFocus--;
- /*and and make the current item more visible:*/
- addActive(x);
- } else if (e.keyCode == 13) {
- /*If the ENTER key is pressed, prevent the form from being submitted,*/
- e.preventDefault();
- if (currentFocus > -1) {
- /*and simulate a click on the "active" item:*/
- if (x) x[currentFocus].click();
- }
- }
- });
- function addActive(x) {
- /*a function to classify an item as "active":*/
- if (!x) return false;
- /*start by removing the "active" class on all items:*/
- removeActive(x);
- if (currentFocus >= x.length) currentFocus = 0;
- if (currentFocus < 0) currentFocus = (x.length - 1);
- /*add class "autocomplete-active":*/
- x[currentFocus].classList.add("autocomplete-active");
- }
- function removeActive(x) {
- /*a function to remove the "active" class from all autocomplete items:*/
- for (var i = 0; i < x.length; i++) {
- x[i].classList.remove("autocomplete-active");
- }
- }
- function clearLists() {
- /*close all autocomplete lists in the document,
- except the one passed as an argument:*/
- var x = document.querySelector("#autocomplete-list");
- x.innerHTML = "";
- document.querySelector(".autocomplete-container").style.display = "none";
- }
- /*execute a function when someone clicks in the document:*/
- document.addEventListener("click", function (e) {
- clearLists();
- });
+ // Sort nodes by degree
+ for (i in document.querySelector("#autocomplete-list").childNodes) {
+ var child = document.querySelector("#autocomplete-list").childNodes[i];
+ if (!child.dataset) break;
+ if (nEdges > child.dataset.edges) {
+ document.querySelector("#autocomplete-list").insertBefore(b, child);
+ inserted = true;
+ break;
+ }
+ }
+
+ if (!inserted) {
+ document.querySelector("#autocomplete-list").appendChild(b);
+ }
+ }
+ }
+
+ document.querySelector(".autocomplete-container").style.display = (is_empty ? "none" : "block");
+ });
+
+ document.querySelector(".md-google-search__empty-btn").addEventListener("click", function() {
+ document.querySelector("#search-input").value = "";
+ this.style.display = "none";
+ });
+
+ /*execute a function presses a key on the keyboard:*/
+ inp.addEventListener("keydown", function(e) {
+ var x = document.getElementById("autocomplete-list");
+ if (x) x = x.getElementsByTagName("div");
+ if (x.length == 0) return;
+ if (e.keyCode == 40) {
+ /*If the objow DOWN key is pressed,
+ increase the currentFocus variable:*/
+ currentFocus++;
+ /*and and make the current item more visible:*/
+ addActive(x);
+ } else if (e.keyCode == 38) { //up
+ /*If the objow UP key is pressed,
+ decrease the currentFocus variable:*/
+ currentFocus--;
+ /*and and make the current item more visible:*/
+ addActive(x);
+ } else if (e.keyCode == 13) {
+ /*If the ENTER key is pressed, prevent the form from being submitted,*/
+ e.preventDefault();
+ if (currentFocus > -1) {
+ /*and simulate a click on the "active" item:*/
+ if (x) x[currentFocus].click();
+ }
+ }
+ });
+ function addActive(x) {
+ /*a function to classify an item as "active":*/
+ if (!x) return false;
+ /*start by removing the "active" class on all items:*/
+ removeActive(x);
+ if (currentFocus >= x.length) currentFocus = 0;
+ if (currentFocus < 0) currentFocus = (x.length - 1);
+ /*add class "autocomplete-active":*/
+ x[currentFocus].classList.add("autocomplete-active");
+ }
+ function removeActive(x) {
+ /*a function to remove the "active" class from all autocomplete items:*/
+ for (var i = 0; i < x.length; i++) {
+ x[i].classList.remove("autocomplete-active");
+ }
+ }
+ function clearLists() {
+ /*close all autocomplete lists in the document,
+ except the one passed as an argument:*/
+ var x = document.querySelector("#autocomplete-list");
+ x.innerHTML = "";
+ document.querySelector(".autocomplete-container").style.display = "none";
+ }
+ /*execute a function when someone clicks in the document:*/
+ document.addEventListener("click", function (e) {
+ clearLists();
+ });
}
diff --git a/js/camera.js b/js/camera.js
index 44e9f5d..6c70643 100644
--- a/js/camera.js
+++ b/js/camera.js
@@ -1,8 +1,5 @@
// *********** HERE STARTS camera.js *************
-
-window.addEventListener('load', initCamera);
-
function cameraGoto(nodeX, nodeY) {
sigma.misc.animation.camera( s.camera,
{ x: nodeX, y: nodeY, ratio: 1 },
@@ -11,41 +8,38 @@
}
function is_touch_device() {
- var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
- var mq = function(query) {
- return window.matchMedia(query).matches;
- }
+ var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
+ var mq = function(query) {
+ return window.matchMedia(query).matches;
+ }
- if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
- return true;
- }
+ if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
+ return true;
+ }
- // include the 'heartz' as a way to have a non matching MQ to help terminate the join
- // https://git.io/vznFH
- var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
- return mq(query);
+ // include the 'heartz' as a way to have a non matching MQ to help terminate the join
+ // https://git.io/vznFH
+ var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
+ return mq(query);
}
function initCamera() {
-
if(!is_touch_device()) {
-
document.querySelector("#zoomin").addEventListener("click", function() {
s.camera.goTo({
ratio: Math.max(s.camera.settings("zoomMin"), s.camera.ratio / Math.sqrt(2))
});
});
-
+
document.querySelector("#zoomout").addEventListener("click", function() {
s.camera.goTo({
ratio: Math.min(s.camera.settings("zoomMax"), s.camera.ratio * Math.sqrt(2))
});
});
- }
- else{
+ } else {
document.querySelector("#zoomin").style.display = "none";
document.querySelector("#zoomout").style.display = "none";
-
+
document.querySelector("#circle-mode").style.bottom = "110px";
document.querySelector("#settings").style.bottom = "60px";
document.querySelector("#search").style.bottom = "10px";
diff --git a/js/circle-mode.js b/js/circle-mode.js
index d5ecff3..492c6c6 100644
--- a/js/circle-mode.js
+++ b/js/circle-mode.js
@@ -1,52 +1,48 @@
// *********** HERE STARTS circle-mode.js *************
-window.addEventListener("load", initCircleMode);
-
circleMode = false;
function initCircleMode() {
- document.querySelector("#circle-mode").addEventListener('click', function() {
- if(circleMode) {
- circleMode = false;
- document.querySelector("#circle-mode i").innerText = "trip_origin";
+ document.querySelector("#circle-mode").addEventListener('click', function() {
+ if(circleMode) {
+ circleMode = false;
+ document.querySelector("#circle-mode i").innerText = "trip_origin";
- s.graph.nodes().forEach(function(n) {
- n.x = n.originalX;
- n.y = n.originalY;
- n.size = 10;
- });
-
- s.refresh();
-
- }
- else {
- circleMode = true;
- document.querySelector("#circle-mode i").innerText = "shuffle";
-
- s.graph.nodes().forEach(function(n) {
- n.x = n.circleX;
- n.y = n.circleY;
- });
-
- s.refresh();
- }
- });
+ s.graph.nodes().forEach(function(n) {
+ n.x = n.originalX;
+ n.y = n.originalY;
+ n.size = 10;
+ });
+
+ s.refresh();
+ } else {
+ circleMode = true;
+ document.querySelector("#circle-mode i").innerText = "scatter_plot";
+
+ s.graph.nodes().forEach(function(n) {
+ n.x = n.circleX;
+ n.y = n.circleY;
+ });
+
+ s.refresh();
+ }
+ });
}
-function isInRect (x, y, rect) {
- if (x < -10000 || x > 10000) return true;
- if (y < -10000 || y > 10000) return true;
-
- var ans = true;
- var c = crossProd (rect[0], rect[1], x, y);
-
- for(var i=1; i<4; i++) {
- var temp = crossProd (rect[i], rect[(i+1)%4], x, y);
- if (c*temp < 0) ans = false;
- }
- return ans;
+function isInRect(x, y, rect) {
+ if (x < -10000 || x > 10000) return true;
+ if (y < -10000 || y > 10000) return true;
+
+ var ans = true;
+ var c = crossProd (rect[0], rect[1], x, y);
+
+ for(var i = 1; i < 4; i++) {
+ var temp = crossProd (rect[i], rect[(i+1)%4], x, y);
+ if (c*temp < 0) ans = false;
+ }
+ return ans;
}
function crossProd(r1, r2, x, y) {
- return r1[0]*r2[1] + r2[0]*y + x*r1[1] - r1[0]*y - r2[0]*r1[1] - x*r2[1];
-}
\ No newline at end of file
+ return r1[0]*r2[1] + r2[0]*y + x*r1[1] - r1[0]*y - r2[0]*r1[1] - x*r2[1];
+}
diff --git a/js/dialog.js b/js/dialog.js
index ff3268f..6e1c3f8 100644
--- a/js/dialog.js
+++ b/js/dialog.js
@@ -1,7 +1,5 @@
// *********** HERE STARTS dialog.js *************
-window.addEventListener("load", initDialog);
-
var dialog = {
fill: function(data, text, html=false) {
var el = document.querySelectorAll("*[data-fill=\""+data+"\"]");
diff --git a/js/graf.js b/js/graf.js
index 155ce2d..16f8645 100644
--- a/js/graf.js
+++ b/js/graf.js
@@ -1,203 +1,202 @@
// *********** HERE STARTS graf.js *************
-window.addEventListener("load", initGraf);
-
// s is the sigma graph
// graf is the JSON graph
var s, graf;
// query dario JSON for the graph information
function xhr(method, url, params, callback) {
- var http = new XMLHttpRequest();
- if (method == "POST") {
- http.open(method, url, true);
- } else {
- if (params != "") {
- http.open(method, url+"?"+params, true);
- } else {
- http.open(method, url, true);
- }
- }
- http.onload = function() {
- if(this.status != 200) {
- console.warn("Attention, status code "+this.status+" when loading via xhr url "+url);
- }
- callback(this.responseText, this.status);
- };
- if (method == "POST") {
- http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- http.send(params);
- } else {
- http.send();
- }
+ var http = new XMLHttpRequest();
+ if (method == "POST") {
+ http.open(method, url, true);
+ } else {
+ if (params != "") {
+ http.open(method, url+"?"+params, true);
+ } else {
+ http.open(method, url, true);
+ }
+ }
+ http.onload = function() {
+ if(this.status != 200) {
+ console.warn("Attention, status code "+this.status+" when loading via xhr url "+url);
+ }
+ callback(this.responseText, this.status);
+ };
+ if (method == "POST") {
+ http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
+ http.send(params);
+ } else {
+ http.send();
+ }
}
function initGraf() {
- // create new methods for sigma library
- updateSigma();
-
- // create graf, s is the sigma graf
- s = new sigma({
- renderers: [{
- container: "graf",
- type: "webgl"
- }],
- settings: {
- defaultEdgeColor: "#fff",
- edgeColor: "default",
- defaultLabelColor: "#fff",
- autoRescale: false,
- zoomMax: 30,
- // enableEdgeHovering: true,
- font: "Roboto",
- labelThreshold: 5
- }
- });
+ // create new methods for sigma library
+ updateSigma();
-
- // query for JSON for graph data
- xhr("GET", "api.php", "action=getgraf", function(responseText, status) {
- // graf is the JSON data
- graf = JSON.parse(responseText);
-
- // does graf.nodes have a size attribute?
- var rectBorrar = [[0,0], [0,0], [0,0], [0,0]];
- for (var i in graf.nodes) {
- if (graf.nodes[i].name == "Erase") rectBorrar[0] = [ graf.nodes[i].x , graf.nodes[i].y ];
- if (graf.nodes[i].name == "Borrar") rectBorrar[1] = [ graf.nodes[i].x , graf.nodes[i].y ];
- if (graf.nodes[i].name == "Esborrar") rectBorrar[2] = [ graf.nodes[i].x , graf.nodes[i].y ];
- if (graf.nodes[i].name == "Delete") rectBorrar[3] = [ graf.nodes[i].x , graf.nodes[i].y ];
- }
-
- var sizegraf = 0;
- for (var i in graf.nodes) {
- if ( isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;
- sizegraf++;
- }
- var nnode = 0;
- for (var i in graf.nodes) {
- var ncolor = null;
-
- if(graf.nodes[i].sex =="F") ncolor = "#d61c08";
- else if(graf.nodes[i].sex == "M") ncolor = "#0159aa";
- else ncolor = "#0ca80a";
-
- // post-processing for year corrections
- if(1970 < graf.nodes[i].year && graf.nodes[i].year < 2004) graf.nodes[i].year += 18;
-
- var newX = 5000*Math.cos( 2*Math.PI*nnode/sizegraf );
- var newY = 5000*Math.sin( 2*Math.PI*nnode/sizegraf );
-
- if (isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;
-
- s.graph.addNode({
- // we add color, originalColor, size, originalX..Y, circleX..Y atributes
- id: graf.nodes[i].id,
- year: graf.nodes[i].year,
- sex: graf.nodes[i].sex,
- label: graf.nodes[i].name,
- x: graf.nodes[i].x,
- y: graf.nodes[i].y,
- circleX: newX,
- circleY: newY,
- originalX: graf.nodes[i].x,
- originalY: graf.nodes[i].y,
- size: 10,
- color: ncolor,
- originalColor: ncolor
- });
- nnode++;
-
- }
-
- for (var i in graf.edges) {
- if (isInRect(graf.nodes[graf.edges[i].a].x, graf.nodes[graf.edges[i].a].y, rectBorrar)) continue;
- if (isInRect(graf.nodes[graf.edges[i].b].x, graf.nodes[graf.edges[i].b].y, rectBorrar)) continue;
-
- s.graph.addEdge({
- id: i,
- source: graf.edges[i].a,
- target: graf.edges[i].b,
- size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5))
- });
-
- }
-
- s.bind('clickNode', function(e) {
- var nodeId = e.data.node.id,
- toKeep = s.graph.neighbors(nodeId);
- // toKeep[nodeId] = e.data.node;
-
-
- s.graph.nodes().forEach(function(n) {
- if (toKeep[n.id] || n.id == nodeId) {
- n.color = n.originalColor;
- } else {
- n.color = '#333';
- }
- });
-
- s.graph.edges().forEach(function(e) {
- if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
- e.color = '#fff';
- } else {
- e.color = '#333';
- }
- });
-
- if (circleMode) {
- s.graph.nodes().forEach(function (n) {
- n.x = n.circleX;
- n.y = n.circleY;
- n.size = 10;
- });
-
- e.data.node.x = 0;
- e.data.node.y = 0;
- e.data.node.size = 30;
- }
-
- s.refresh();
-
- dialog.show(nodeId, toKeep);
- });
+ // create graf, s is the sigma graf
+ s = new sigma({
+ renderers: [{
+ container: "graf",
+ type: "webgl"
+ }],
+ settings: {
+ defaultEdgeColor: "#fff",
+ edgeColor: "default",
+ defaultLabelColor: "#fff",
+ autoRescale: false,
+ zoomMax: 30,
+ // enableEdgeHovering: true,
+ font: "Roboto",
+ labelThreshold: 5
+ }
+ });
- s.refresh();
- initSearchBar();
+ // query for JSON for graph data
+ xhr("GET", "api.php", "action=getgraf", function(responseText, status) {
+ // graf is the JSON data
+ graf = JSON.parse(responseText);
- autocomplete(document.querySelector("#search-input"), graf.nodes, "search");
- });
+ // does graf.nodes have a size attribute?
+ var rectBorrar = [[0,0], [0,0], [0,0], [0,0]];
+ for (var i in graf.nodes) {
+ if (graf.nodes[i].name == "Erase") rectBorrar[0] = [ graf.nodes[i].x , graf.nodes[i].y ];
+ if (graf.nodes[i].name == "Borrar") rectBorrar[1] = [ graf.nodes[i].x , graf.nodes[i].y ];
+ if (graf.nodes[i].name == "Esborrar") rectBorrar[2] = [ graf.nodes[i].x , graf.nodes[i].y ];
+ if (graf.nodes[i].name == "Delete") rectBorrar[3] = [ graf.nodes[i].x , graf.nodes[i].y ];
+ }
+
+ var sizegraf = 0;
+ for (var i in graf.nodes) {
+ if ( isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;
+ sizegraf++;
+ }
+ var nnode = 0;
+ for (var i in graf.nodes) {
+ var ncolor = null;
+
+ if(graf.nodes[i].sex =="F") ncolor = "#d61c08";
+ else if(graf.nodes[i].sex == "M") ncolor = "#0159aa";
+ else ncolor = "#0ca80a";
+
+ // post-processing for year corrections
+ if(1970 < graf.nodes[i].year && graf.nodes[i].year < 2004) graf.nodes[i].year += 18;
+
+ var newX = 5000*Math.cos( 2*Math.PI*nnode/sizegraf );
+ var newY = 5000*Math.sin( 2*Math.PI*nnode/sizegraf );
+
+ if (isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;
+
+ s.graph.addNode({
+ // we add color, originalColor, size, originalX..Y, circleX..Y atributes
+ id: graf.nodes[i].id,
+ year: graf.nodes[i].year,
+ sex: graf.nodes[i].sex,
+ label: graf.nodes[i].name,
+ x: graf.nodes[i].x,
+ y: graf.nodes[i].y,
+ circleX: newX,
+ circleY: newY,
+ originalX: graf.nodes[i].x,
+ originalY: graf.nodes[i].y,
+ size: 10,
+ color: ncolor,
+ originalColor: ncolor
+ });
+ nnode++;
+
+ }
+
+ for (var i in graf.edges) {
+ if (isInRect(graf.nodes[graf.edges[i].a].x, graf.nodes[graf.edges[i].a].y, rectBorrar)) continue;
+ if (isInRect(graf.nodes[graf.edges[i].b].x, graf.nodes[graf.edges[i].b].y, rectBorrar)) continue;
+
+ s.graph.addEdge({
+ id: i,
+ source: graf.edges[i].a,
+ target: graf.edges[i].b,
+ size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5))
+ });
+
+ }
+
+ s.bind('clickNode', function(e) {
+ var nodeId = e.data.node.id,
+ toKeep = s.graph.neighbors(nodeId);
+ // toKeep[nodeId] = e.data.node;
+
+
+ s.graph.nodes().forEach(function(n) {
+ if (toKeep[n.id] || n.id == nodeId) {
+ n.color = n.originalColor;
+ } else {
+ n.color = '#333';
+ }
+ });
+
+ s.graph.edges().forEach(function(e) {
+ if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
+ e.color = '#fff';
+ } else {
+ e.color = '#333';
+ }
+ });
+
+ if (circleMode) {
+ s.graph.nodes().forEach(function (n) {
+ n.x = n.circleX;
+ n.y = n.circleY;
+ n.size = 10;
+ });
+
+ e.data.node.x = 0;
+ e.data.node.y = 0;
+ e.data.node.size = 30;
+ }
+
+ s.refresh();
+
+ dialog.show(nodeId, toKeep);
+ });
+
+ initDialog();
+ initCamera();
+ initSearchBar();
+
+ s.refresh();
+ autocomplete(document.querySelector("#search-input"), graf.nodes, "search");
+ });
}
function updateSigma() {
- // returns set of neighouts
- sigma.classes.graph.addMethod("neighbors", function(nodeId) {
- var k,
- neighbors = {},
- index = this.allNeighborsIndex[nodeId] || [];
+ // returns set of neighouts
+ sigma.classes.graph.addMethod("neighbors", function(nodeId) {
+ var k,
+ neighbors = {},
+ index = this.allNeighborsIndex[nodeId] || [];
- for (k in index) {
- neighbors[k] = this.nodesIndex[k];
- }
+ for (k in index) {
+ neighbors[k] = this.nodesIndex[k];
+ }
- return neighbors;
- });
-
- // returns number of neighbours from a set of years
- sigma.classes.graph.addMethod("numNeighborsFromYears", function(nodeId, showYearsCopy) {
- var k,
- neighbors = 0,
- index = this.allNeighborsIndex[nodeId] || [];
+ return neighbors;
+ });
- for (k in index) {
- if(this.nodesIndex){
- if (showYearsCopy.has("" + this.nodesIndex[k].year)) neighbors++;
- else if (this.nodesIndex[k].year == 0) neighbors++;
- }
- }
-
- return neighbors;
- });
-}
\ No newline at end of file
+ // returns number of neighbours from a set of years
+ sigma.classes.graph.addMethod("numNeighborsFromYears", function(nodeId, showYearsCopy) {
+ var k,
+ neighbors = 0,
+ index = this.allNeighborsIndex[nodeId] || [];
+
+ for (k in index) {
+ if(this.nodesIndex){
+ if (showYearsCopy.has("" + this.nodesIndex[k].year)) neighbors++;
+ else if (this.nodesIndex[k].year == 0) neighbors++;
+ }
+ }
+
+ return neighbors;
+ });
+}
diff --git a/js/init.js b/js/init.js
new file mode 100644
index 0000000..a07389c
--- /dev/null
+++ b/js/init.js
@@ -0,0 +1,10 @@
+// *********** HERE STARTS init.js *************
+
+function init() {
+ initGraf();
+ addYearList();
+ initCircleMode();
+ initJustDoIt();
+}
+
+window.addEventListener("load", init);
diff --git a/js/easter-egg.js b/js/just-do-it.js
similarity index 83%
rename from js/easter-egg.js
rename to js/just-do-it.js
index 35dce24..cba9600 100644
--- a/js/easter-egg.js
+++ b/js/just-do-it.js
@@ -1,6 +1,4 @@
-// *********** HERE STARTS easter-egg.js *************
-
-window.addEventListener("load", initEasterEgg);
+// *********** HERE STARTS just-do-it.js *************
var seq = [38, 38, 40, 40, 37, 39, 37, 39, 65, 66, 13];
var cur = 0;
@@ -27,7 +25,7 @@
}
-function initEasterEgg() {
+function initJustDoIt() {
document.addEventListener("keydown", function() {
if (event.key == "f" && event.target.getAttribute("id") != "search-input") altSearchBar();
if (event.which == seq[cur]) {
diff --git a/js/limit-years.js b/js/limit-years.js
index cbbef95..41647f7 100644
--- a/js/limit-years.js
+++ b/js/limit-years.js
@@ -1,7 +1,5 @@
// *********** HERE STARTS limit-years.js *************
-window.addEventListener("load", addYearList);
-
var limitYears = false;
var showYears = new Set();
@@ -9,10 +7,10 @@
//targetYear: graf.nodes[e.source].year,
if(limitYears) {
var added = new Set();
-
+
s.graph.nodes().forEach(function(n) {
var numNeig = s.graph.numNeighborsFromYears(n.id, showYears);
-
+
if ((n.year == 0 && (n.sex == 'F' || n.sex == 'M') )
|| numNeig == 0
|| (!showYears.has("" + n.year) && (n.year != 0) )) {
@@ -23,19 +21,19 @@
added.add(n.id);
}
});
-
+
s.graph.edges().forEach(function(e) {
if(!added.has(e.source) && !added.has(e.target)){
e.hidden = true;
}
else e.hidden = false;
- });
+ });
}
else {
s.graph.nodes().forEach(function(n) {
n.hidden = false;
});
-
+
s.graph.edges().forEach(function(e) {
e.hidden = false;
});
@@ -44,7 +42,7 @@
function altYearList() {
var yearlist = document.querySelector("#year-list");
-
+
if(yearlist.style.display == "none"){
yearlist.style.display = "block";
document.querySelector("#settings i").innerText = "close";
@@ -57,37 +55,42 @@
}
}
-function addYearList() {
+function addYearList() {
var ylistspan = document.querySelector("#year-list-span")
- for(var year=2006; year<2019; year++) {
+ for(var year = 2006; year < 2019; year++) {
+ var lab = document.createElement("label");
+ lab.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect custom-checkbox");
+ lab.setAttribute("for", "checkbox-"+year);
var yin = document.createElement("input");
yin.type = "checkbox";
- yin.class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored";
- yin.name = "" + year;
- yin.addEventListener("change", function(){
+ yin.setAttribute("class", "mdl-checkbox__input");
+ yin.name = year;
+ yin.id = "checkbox-"+year;
+ yin.addEventListener("change", function() {
limitYears = true;
-
+
if(this.checked) {
showYears.add(this.name);
- }
- else {
+ } else {
showYears.delete(this.name);
}
-
- if(showYears.size == 0) limitYears = false;
-
+
+ if (showYears.size == 0) limitYears = false;
+
repaint();
-
+
s.refresh();
});
-
- var lab = document.createElement("label");
- lab.innerHTML = "" + year + "<br>";
-
- ylistspan.appendChild(yin);
+
+ var span = document.createElement("span");
+ span.innerText = year;
+ span.setAttribute("class", "mdl-checkbox__label");
+
+ lab.appendChild(yin);
+ lab.appendChild(span);
ylistspan.appendChild(lab);
+ ylistspan.insertAdjacentHTML("beforeend", "<br>");
}
-
+
document.querySelector("#settings").addEventListener("click", altYearList);
}
-
diff --git a/js/script.js b/js/script.js
index 1493ae1..3548234 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,266 +1,255 @@
// *********** HERE STARTS circle-mode.js *************
-window.addEventListener("load", initCircleMode);
-
circleMode = false;
function initCircleMode() {
- document.querySelector("#circle-mode").addEventListener('click', function() {
- if(circleMode) {
- circleMode = false;
- document.querySelector("#circle-mode i").innerText = "trip_origin";
+ document.querySelector("#circle-mode").addEventListener('click', function() {
+ if(circleMode) {
+ circleMode = false;
+ document.querySelector("#circle-mode i").innerText = "trip_origin";
- s.graph.nodes().forEach(function(n) {
- n.x = n.originalX;
- n.y = n.originalY;
- n.size = 10;
- });
-
- s.refresh();
-
- }
- else {
- circleMode = true;
- document.querySelector("#circle-mode i").innerText = "shuffle";
-
- s.graph.nodes().forEach(function(n) {
- n.x = n.circleX;
- n.y = n.circleY;
- });
-
- s.refresh();
- }
- });
+ s.graph.nodes().forEach(function(n) {
+ n.x = n.originalX;
+ n.y = n.originalY;
+ n.size = 10;
+ });
+
+ s.refresh();
+ } else {
+ circleMode = true;
+ document.querySelector("#circle-mode i").innerText = "scatter_plot";
+
+ s.graph.nodes().forEach(function(n) {
+ n.x = n.circleX;
+ n.y = n.circleY;
+ });
+
+ s.refresh();
+ }
+ });
}
-function isInRect (x, y, rect) {
- if (x < -10000 || x > 10000) return true;
- if (y < -10000 || y > 10000) return true;
-
- var ans = true;
- var c = crossProd (rect[0], rect[1], x, y);
-
- for(var i=1; i<4; i++) {
- var temp = crossProd (rect[i], rect[(i+1)%4], x, y);
- if (c*temp < 0) ans = false;
- }
- return ans;
+function isInRect(x, y, rect) {
+ if (x < -10000 || x > 10000) return true;
+ if (y < -10000 || y > 10000) return true;
+
+ var ans = true;
+ var c = crossProd (rect[0], rect[1], x, y);
+
+ for(var i = 1; i < 4; i++) {
+ var temp = crossProd (rect[i], rect[(i+1)%4], x, y);
+ if (c*temp < 0) ans = false;
+ }
+ return ans;
}
function crossProd(r1, r2, x, y) {
- return r1[0]*r2[1] + r2[0]*y + x*r1[1] - r1[0]*y - r2[0]*r1[1] - x*r2[1];
+ return r1[0]*r2[1] + r2[0]*y + x*r1[1] - r1[0]*y - r2[0]*r1[1] - x*r2[1];
}
-
-
// *********** HERE STARTS graf.js *************
-window.addEventListener("load", initGraf);
-
// s is the sigma graph
// graf is the JSON graph
var s, graf;
// query dario JSON for the graph information
function xhr(method, url, params, callback) {
- var http = new XMLHttpRequest();
- if (method == "POST") {
- http.open(method, url, true);
- } else {
- if (params != "") {
- http.open(method, url+"?"+params, true);
- } else {
- http.open(method, url, true);
- }
- }
- http.onload = function() {
- if(this.status != 200) {
- console.warn("Attention, status code "+this.status+" when loading via xhr url "+url);
- }
- callback(this.responseText, this.status);
- };
- if (method == "POST") {
- http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- http.send(params);
- } else {
- http.send();
- }
+ var http = new XMLHttpRequest();
+ if (method == "POST") {
+ http.open(method, url, true);
+ } else {
+ if (params != "") {
+ http.open(method, url+"?"+params, true);
+ } else {
+ http.open(method, url, true);
+ }
+ }
+ http.onload = function() {
+ if(this.status != 200) {
+ console.warn("Attention, status code "+this.status+" when loading via xhr url "+url);
+ }
+ callback(this.responseText, this.status);
+ };
+ if (method == "POST") {
+ http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
+ http.send(params);
+ } else {
+ http.send();
+ }
}
function initGraf() {
- // create new methods for sigma library
- updateSigma();
-
- // create graf, s is the sigma graf
- s = new sigma({
- renderers: [{
- container: "graf",
- type: "webgl"
- }],
- settings: {
- defaultEdgeColor: "#fff",
- edgeColor: "default",
- defaultLabelColor: "#fff",
- autoRescale: false,
- zoomMax: 30,
- // enableEdgeHovering: true,
- font: "Roboto",
- labelThreshold: 5
- }
- });
+ // create new methods for sigma library
+ updateSigma();
-
- // query for JSON for graph data
- xhr("GET", "api.php", "action=getgraf", function(responseText, status) {
- // graf is the JSON data
- graf = JSON.parse(responseText);
-
- // does graf.nodes have a size attribute?
- var rectBorrar = [[0,0], [0,0], [0,0], [0,0]];
- for (var i in graf.nodes) {
- if (graf.nodes[i].name == "Erase") rectBorrar[0] = [ graf.nodes[i].x , graf.nodes[i].y ];
- if (graf.nodes[i].name == "Borrar") rectBorrar[1] = [ graf.nodes[i].x , graf.nodes[i].y ];
- if (graf.nodes[i].name == "Esborrar") rectBorrar[2] = [ graf.nodes[i].x , graf.nodes[i].y ];
- if (graf.nodes[i].name == "Delete") rectBorrar[3] = [ graf.nodes[i].x , graf.nodes[i].y ];
- }
-
- var sizegraf = 0;
- for (var i in graf.nodes) {
- if ( isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;
- sizegraf++;
- }
- var nnode = 0;
- for (var i in graf.nodes) {
- var ncolor = null;
-
- if(graf.nodes[i].sex =="F") ncolor = "#d61c08";
- else if(graf.nodes[i].sex == "M") ncolor = "#0159aa";
- else ncolor = "#0ca80a";
-
- // post-processing for year corrections
- if(1970 < graf.nodes[i].year && graf.nodes[i].year < 2004) graf.nodes[i].year += 18;
-
- var newX = 5000*Math.cos( 2*Math.PI*nnode/sizegraf );
- var newY = 5000*Math.sin( 2*Math.PI*nnode/sizegraf );
-
- if (isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;
-
- s.graph.addNode({
- // we add color, originalColor, size, originalX..Y, circleX..Y atributes
- id: graf.nodes[i].id,
- year: graf.nodes[i].year,
- sex: graf.nodes[i].sex,
- label: graf.nodes[i].name,
- x: graf.nodes[i].x,
- y: graf.nodes[i].y,
- circleX: newX,
- circleY: newY,
- originalX: graf.nodes[i].x,
- originalY: graf.nodes[i].y,
- size: 10,
- color: ncolor,
- originalColor: ncolor
- });
- nnode++;
-
- }
-
- for (var i in graf.edges) {
- if (isInRect(graf.nodes[graf.edges[i].a].x, graf.nodes[graf.edges[i].a].y, rectBorrar)) continue;
- if (isInRect(graf.nodes[graf.edges[i].b].x, graf.nodes[graf.edges[i].b].y, rectBorrar)) continue;
-
- s.graph.addEdge({
- id: i,
- source: graf.edges[i].a,
- target: graf.edges[i].b,
- size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5))
- });
-
- }
-
- s.bind('clickNode', function(e) {
- var nodeId = e.data.node.id,
- toKeep = s.graph.neighbors(nodeId);
- // toKeep[nodeId] = e.data.node;
-
-
- s.graph.nodes().forEach(function(n) {
- if (toKeep[n.id] || n.id == nodeId) {
- n.color = n.originalColor;
- } else {
- n.color = '#333';
- }
- });
-
- s.graph.edges().forEach(function(e) {
- if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
- e.color = '#fff';
- } else {
- e.color = '#333';
- }
- });
-
- if (circleMode) {
- s.graph.nodes().forEach(function (n) {
- n.x = n.circleX;
- n.y = n.circleY;
- n.size = 10;
- });
-
- e.data.node.x = 0;
- e.data.node.y = 0;
- e.data.node.size = 30;
- }
-
- s.refresh();
-
- dialog.show(nodeId, toKeep);
- });
+ // create graf, s is the sigma graf
+ s = new sigma({
+ renderers: [{
+ container: "graf",
+ type: "webgl"
+ }],
+ settings: {
+ defaultEdgeColor: "#fff",
+ edgeColor: "default",
+ defaultLabelColor: "#fff",
+ autoRescale: false,
+ zoomMax: 30,
+ // enableEdgeHovering: true,
+ font: "Roboto",
+ labelThreshold: 5
+ }
+ });
- s.refresh();
- initSearchBar();
+ // query for JSON for graph data
+ xhr("GET", "api.php", "action=getgraf", function(responseText, status) {
+ // graf is the JSON data
+ graf = JSON.parse(responseText);
- autocomplete(document.querySelector("#search-input"), graf.nodes, "search");
- });
+ // does graf.nodes have a size attribute?
+ var rectBorrar = [[0,0], [0,0], [0,0], [0,0]];
+ for (var i in graf.nodes) {
+ if (graf.nodes[i].name == "Erase") rectBorrar[0] = [ graf.nodes[i].x , graf.nodes[i].y ];
+ if (graf.nodes[i].name == "Borrar") rectBorrar[1] = [ graf.nodes[i].x , graf.nodes[i].y ];
+ if (graf.nodes[i].name == "Esborrar") rectBorrar[2] = [ graf.nodes[i].x , graf.nodes[i].y ];
+ if (graf.nodes[i].name == "Delete") rectBorrar[3] = [ graf.nodes[i].x , graf.nodes[i].y ];
+ }
+
+ var sizegraf = 0;
+ for (var i in graf.nodes) {
+ if ( isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;
+ sizegraf++;
+ }
+ var nnode = 0;
+ for (var i in graf.nodes) {
+ var ncolor = null;
+
+ if(graf.nodes[i].sex =="F") ncolor = "#d61c08";
+ else if(graf.nodes[i].sex == "M") ncolor = "#0159aa";
+ else ncolor = "#0ca80a";
+
+ // post-processing for year corrections
+ if(1970 < graf.nodes[i].year && graf.nodes[i].year < 2004) graf.nodes[i].year += 18;
+
+ var newX = 5000*Math.cos( 2*Math.PI*nnode/sizegraf );
+ var newY = 5000*Math.sin( 2*Math.PI*nnode/sizegraf );
+
+ if (isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;
+
+ s.graph.addNode({
+ // we add color, originalColor, size, originalX..Y, circleX..Y atributes
+ id: graf.nodes[i].id,
+ year: graf.nodes[i].year,
+ sex: graf.nodes[i].sex,
+ label: graf.nodes[i].name,
+ x: graf.nodes[i].x,
+ y: graf.nodes[i].y,
+ circleX: newX,
+ circleY: newY,
+ originalX: graf.nodes[i].x,
+ originalY: graf.nodes[i].y,
+ size: 10,
+ color: ncolor,
+ originalColor: ncolor
+ });
+ nnode++;
+
+ }
+
+ for (var i in graf.edges) {
+ if (isInRect(graf.nodes[graf.edges[i].a].x, graf.nodes[graf.edges[i].a].y, rectBorrar)) continue;
+ if (isInRect(graf.nodes[graf.edges[i].b].x, graf.nodes[graf.edges[i].b].y, rectBorrar)) continue;
+
+ s.graph.addEdge({
+ id: i,
+ source: graf.edges[i].a,
+ target: graf.edges[i].b,
+ size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5))
+ });
+
+ }
+
+ s.bind('clickNode', function(e) {
+ var nodeId = e.data.node.id,
+ toKeep = s.graph.neighbors(nodeId);
+ // toKeep[nodeId] = e.data.node;
+
+
+ s.graph.nodes().forEach(function(n) {
+ if (toKeep[n.id] || n.id == nodeId) {
+ n.color = n.originalColor;
+ } else {
+ n.color = '#333';
+ }
+ });
+
+ s.graph.edges().forEach(function(e) {
+ if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
+ e.color = '#fff';
+ } else {
+ e.color = '#333';
+ }
+ });
+
+ if (circleMode) {
+ s.graph.nodes().forEach(function (n) {
+ n.x = n.circleX;
+ n.y = n.circleY;
+ n.size = 10;
+ });
+
+ e.data.node.x = 0;
+ e.data.node.y = 0;
+ e.data.node.size = 30;
+ }
+
+ s.refresh();
+
+ dialog.show(nodeId, toKeep);
+ });
+
+ initDialog();
+ initCamera();
+ initSearchBar();
+
+ s.refresh();
+ autocomplete(document.querySelector("#search-input"), graf.nodes, "search");
+ });
}
function updateSigma() {
- // returns set of neighouts
- sigma.classes.graph.addMethod("neighbors", function(nodeId) {
- var k,
- neighbors = {},
- index = this.allNeighborsIndex[nodeId] || [];
+ // returns set of neighouts
+ sigma.classes.graph.addMethod("neighbors", function(nodeId) {
+ var k,
+ neighbors = {},
+ index = this.allNeighborsIndex[nodeId] || [];
- for (k in index) {
- neighbors[k] = this.nodesIndex[k];
- }
+ for (k in index) {
+ neighbors[k] = this.nodesIndex[k];
+ }
- return neighbors;
- });
-
- // returns number of neighbours from a set of years
- sigma.classes.graph.addMethod("numNeighborsFromYears", function(nodeId, showYearsCopy) {
- var k,
- neighbors = 0,
- index = this.allNeighborsIndex[nodeId] || [];
+ return neighbors;
+ });
- for (k in index) {
- if(this.nodesIndex){
- if (showYearsCopy.has("" + this.nodesIndex[k].year)) neighbors++;
- else if (this.nodesIndex[k].year == 0) neighbors++;
- }
- }
-
- return neighbors;
- });
+ // returns number of neighbours from a set of years
+ sigma.classes.graph.addMethod("numNeighborsFromYears", function(nodeId, showYearsCopy) {
+ var k,
+ neighbors = 0,
+ index = this.allNeighborsIndex[nodeId] || [];
+
+ for (k in index) {
+ if(this.nodesIndex){
+ if (showYearsCopy.has("" + this.nodesIndex[k].year)) neighbors++;
+ else if (this.nodesIndex[k].year == 0) neighbors++;
+ }
+ }
+
+ return neighbors;
+ });
}
-
-
// *********** HERE STARTS limit-years.js *************
-window.addEventListener("load", addYearList);
-
var limitYears = false;
var showYears = new Set();
@@ -268,10 +257,10 @@
//targetYear: graf.nodes[e.source].year,
if(limitYears) {
var added = new Set();
-
+
s.graph.nodes().forEach(function(n) {
var numNeig = s.graph.numNeighborsFromYears(n.id, showYears);
-
+
if ((n.year == 0 && (n.sex == 'F' || n.sex == 'M') )
|| numNeig == 0
|| (!showYears.has("" + n.year) && (n.year != 0) )) {
@@ -282,19 +271,19 @@
added.add(n.id);
}
});
-
+
s.graph.edges().forEach(function(e) {
if(!added.has(e.source) && !added.has(e.target)){
e.hidden = true;
}
else e.hidden = false;
- });
+ });
}
else {
s.graph.nodes().forEach(function(n) {
n.hidden = false;
});
-
+
s.graph.edges().forEach(function(e) {
e.hidden = false;
});
@@ -303,7 +292,7 @@
function altYearList() {
var yearlist = document.querySelector("#year-list");
-
+
if(yearlist.style.display == "none"){
yearlist.style.display = "block";
document.querySelector("#settings i").innerText = "close";
@@ -316,43 +305,47 @@
}
}
-function addYearList() {
+function addYearList() {
var ylistspan = document.querySelector("#year-list-span")
- for(var year=2006; year<2019; year++) {
+ for(var year = 2006; year < 2019; year++) {
+ var lab = document.createElement("label");
+ lab.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect custom-checkbox");
+ lab.setAttribute("for", "checkbox-"+year);
var yin = document.createElement("input");
yin.type = "checkbox";
- yin.class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored";
- yin.name = "" + year;
- yin.addEventListener("change", function(){
+ yin.setAttribute("class", "mdl-checkbox__input");
+ yin.name = year;
+ yin.id = "checkbox-"+year;
+ yin.addEventListener("change", function() {
limitYears = true;
-
+
if(this.checked) {
showYears.add(this.name);
- }
- else {
+ } else {
showYears.delete(this.name);
}
-
- if(showYears.size == 0) limitYears = false;
-
+
+ if (showYears.size == 0) limitYears = false;
+
repaint();
-
+
s.refresh();
});
-
- var lab = document.createElement("label");
- lab.innerHTML = "" + year + "<br>";
-
- ylistspan.appendChild(yin);
+
+ var span = document.createElement("span");
+ span.innerText = year;
+ span.setAttribute("class", "mdl-checkbox__label");
+
+ lab.appendChild(yin);
+ lab.appendChild(span);
ylistspan.appendChild(lab);
+ ylistspan.insertAdjacentHTML("beforeend", "<br>");
}
-
+
document.querySelector("#settings").addEventListener("click", altYearList);
}
-
// *********** HERE STARTS search-bar.js *************
-
function altSearchBar() {
if (document.querySelector(".md-google-search__metacontainer").style.display == "none") {
document.querySelector(".md-google-search__metacontainer").style.display = "block";
@@ -370,8 +363,6 @@
}
// *********** HERE STARTS dialog.js *************
-window.addEventListener("load", initDialog);
-
var dialog = {
fill: function(data, text, html=false) {
var el = document.querySelectorAll("*[data-fill=\""+data+"\"]");
@@ -452,12 +443,8 @@
document.querySelector("#max-dialog").addEventListener("click", dialog.max);
document.querySelector("#min-dialog").addEventListener("click", dialog.min);
}
-
// *********** HERE STARTS camera.js *************
-
-window.addEventListener('load', initCamera);
-
function cameraGoto(nodeX, nodeY) {
sigma.misc.animation.camera( s.camera,
{ x: nodeX, y: nodeY, ratio: 1 },
@@ -466,50 +453,44 @@
}
function is_touch_device() {
- var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
- var mq = function(query) {
- return window.matchMedia(query).matches;
- }
+ var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
+ var mq = function(query) {
+ return window.matchMedia(query).matches;
+ }
- if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
- return true;
- }
+ if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
+ return true;
+ }
- // include the 'heartz' as a way to have a non matching MQ to help terminate the join
- // https://git.io/vznFH
- var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
- return mq(query);
+ // include the 'heartz' as a way to have a non matching MQ to help terminate the join
+ // https://git.io/vznFH
+ var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
+ return mq(query);
}
function initCamera() {
-
if(!is_touch_device()) {
-
document.querySelector("#zoomin").addEventListener("click", function() {
s.camera.goTo({
ratio: Math.max(s.camera.settings("zoomMin"), s.camera.ratio / Math.sqrt(2))
});
});
-
+
document.querySelector("#zoomout").addEventListener("click", function() {
s.camera.goTo({
ratio: Math.min(s.camera.settings("zoomMax"), s.camera.ratio * Math.sqrt(2))
});
});
- }
- else{
+ } else {
document.querySelector("#zoomin").style.display = "none";
document.querySelector("#zoomout").style.display = "none";
-
+
document.querySelector("#circle-mode").style.bottom = "110px";
document.querySelector("#settings").style.bottom = "60px";
document.querySelector("#search").style.bottom = "10px";
}
}
-
-// *********** HERE STARTS easter-egg.js *************
-
-window.addEventListener("load", initEasterEgg);
+// *********** HERE STARTS just-do-it.js *************
var seq = [38, 38, 40, 40, 37, 39, 37, 39, 65, 66, 13];
var cur = 0;
@@ -536,7 +517,7 @@
}
-function initEasterEgg() {
+function initJustDoIt() {
document.addEventListener("keydown", function() {
if (event.key == "f" && event.target.getAttribute("id") != "search-input") altSearchBar();
if (event.which == seq[cur]) {
@@ -549,3 +530,13 @@
} else cur = 0;
});
}
+// *********** HERE STARTS init.js *************
+
+function init() {
+ initGraf();
+ addYearList();
+ initCircleMode();
+ initJustDoIt();
+}
+
+window.addEventListener("load", init);
diff --git a/js/search-bar.js b/js/search-bar.js
index e5c8846..ef32e5e 100644
--- a/js/search-bar.js
+++ b/js/search-bar.js
@@ -1,6 +1,5 @@
// *********** HERE STARTS search-bar.js *************
-
function altSearchBar() {
if (document.querySelector(".md-google-search__metacontainer").style.display == "none") {
document.querySelector(".md-google-search__metacontainer").style.display = "block";