Refactoring and Vuejs

ATTRIBUTION.md

@@ -1,6 +1,10 @@
 This project is [licensed](https://github.com/IITC-CE/ingress-intel-total-conversion/blob/master/LICENSE) under the permissive [ISC license](https://www.isc.org/licenses/).
 Parts imported from other projects remain under their respective licenses:
 
+### Vue.js-related components:
+- [**Vue.js**](https://vuejs.org/) © Yuxi (Evan) You: [[MIT](https://github.com/vuejs/vue/blob/dev/LICENSE)]
+- [**http-vue-loader**](https://github.com/FranckFreiburger/http-vue-loader) © Franck Freiburger: [[MIT](https://github.com/FranckFreiburger/http-vue-loader/blob/master/LICENSE)]
+
 ### jQuery-related components:
 - [**jQuery**](https://jquery.com/) © [_JS Foundation_](https://js.foundation/): [[MIT](https://jquery.org/license/)]
 - [**jQuery UI**](https://jqueryui.com/) © [_JS Foundation_](https://js.foundation/): [[MIT](https://jquery.org/license/)]

build_plugin.py

@@ -136,7 +136,7 @@ def expand_template(match, path=None):
         return """// *** included: {filename} ***
 {content}
 
-""".format(filename=filename, content=readtext(fullname))
+""".format(filename=filename, content=recursive_expand_template(readtext(fullname), path))
     elif kw == 'include_string':
         return quote % multi_line(readtext(fullname))
     elif kw == 'include_img':
@@ -146,6 +146,10 @@ def expand_template(match, path=None):
         css = re.sub(pattern, partial(imgrepl, path=fullname.parent), readtext(fullname))
         return quote % multi_line(css)
 
+def recursive_expand_template(script, path=None):
+    template = r"'@(\w+)(?::([\w./-]+))?@'"  # to find '@keyword[:path]@' patterns
+    repl = partial(expand_template, path=path)
+    return re.sub(template, repl, script)
 
 def process_file(source, out_dir, dist_path=None, deps_list=None):
     """Generate .user.js (and optionally .meta.js) from given source file.
@@ -167,12 +171,10 @@ def process_file(source, out_dir, dist_path=None, deps_list=None):
     path = source.parent  # used as root for all (relative) paths
     script = re.sub(r"'@bundle_code@';", partial(bundle_code, path=path), script)
     wrapper = get_module(settings.plugin_wrapper)
-    template = r"'@(\w+)(?::([\w./-]+))?@'"  # to find '@keyword[:path]@' patterns
-    repl = partial(expand_template, path=path)
     data = [
         meta,
-        re.sub(template, repl, wrapper.start),
-        re.sub(template, repl, script),
+        recursive_expand_template(wrapper.start, path),
+        recursive_expand_template(script, path),
         wrapper.setup,
         wrapper.end,
     ]

core/code/boot.js

@@ -274,7 +274,7 @@ window.setupMap = function() {
 
   window.layerChooser = new L.Control.Layers(baseLayers, addLayers);
 
-  // Remove the hidden layer after layerChooser built, to avoid messing up ordering of layers 
+  // Remove the hidden layer after layerChooser built, to avoid messing up ordering of layers
   $.each(hiddenLayer, function(ind, layer){
     map.removeLayer(layer);
 
@@ -850,7 +850,12 @@ try {
   '@include_raw:external/jquery-ui-1.12.1.min.js@';
   '@include_raw:external/taphold.js@';
   '@include_raw:external/jquery.qrcode.min.js@';
-
+
+  '@include_raw:external/vue.js@';
+  '@include_raw:external/httpVueLoader.js@';
+
+  '@include_raw:components/main.vue.js@';
+
 } catch (e) {
   log.error("External's js loading failed");
   throw e;

core/code/smartphone.js

@@ -26,6 +26,7 @@ window.runOnSmartphonesBeforeBoot = function() {
   style.type = 'text/css';
   style.appendChild(document.createTextNode('@include_string:smartphone.css@'));
   document.head.appendChild(style);
+  document.querySelector('body').classList.add('smartphone')
 
   // don’t need many of those
   window.setupStyles = function() {

core/components/chat.vue

@@ -0,0 +1,41 @@
+<template>
+    <div id="chat-component">
+        <div id="chatcontrols" style="display:none">
+            <a accesskey="0" title="[0]"><span class="toggle expand"></span></a>
+            <template v-for="(item, index) in controls">
+                <a v-bind:accesskey="index+1" v-bind:title="item.title" v-bind:class="{ active: item.active }">{{ item.name }}</a>
+            </template>
+        </div>
+        <div id="chat" style="display:none">
+            <div id="chatfaction"></div>
+            <div id="chatall"></div>
+            <div id="chatalerts"></div>
+        </div>
+        <form id="chatinput" style="display:none">
+            <table>
+                <tr>
+                    <td><time></time></td>
+                    <td><mark>tell faction:</mark></td>
+                    <td><input id="chattext" type="text" maxlength="256" accesskey="c" title="[c]" /></td>
+                </tr>
+            </table>
+        </form>
+    </div>
+</template>
+
+<script>
+  module.exports = {
+    data: function () {
+      return {
+        controls: [
+          {title: "[1]", name: "all"},
+          {title: "[2]", name: "faction", active: true},
+          {title: "[3]", name: "alerts"},
+        ]
+      }
+    },
+    mounted() {
+      vm.chat = this;
+    }
+  }
+</script>

core/components/main.vue.js

@@ -0,0 +1,14 @@
+window.vm = {};
+
+Vue.component("updatestatus", httpVueLoader(`'@include_raw:components/updatestatus.vue@'`));
+Vue.component("chat", httpVueLoader(`'@include_raw:components/chat.vue@'`));
+Vue.component("toolbox", httpVueLoader(`'@include_raw:components/toolbox.vue@'`));
+Vue.component("sidebar", httpVueLoader(`'@include_raw:components/sidebar.vue@'`));
+
+let app = new Vue({
+  el: '#app',
+  mounted() {
+    vm.main = this;
+  }
+})
+

core/components/sidebar.vue

@@ -0,0 +1,62 @@
+<template>
+    <div id="sidebar-component">
+        <a id="sidebartoggle" accesskey="i" title="Toggle sidebar [i]"><span class="toggle close"></span></a>
+        <div id="scrollwrapper"> {{ /* enable scrolling for small screens */ }}
+            <div id="sidebar" style="display: none">
+                <div id="playerstat">t</div>
+                <div id="gamestat">&nbsp;loading global control stats</div>
+                <div id="searchwrapper">
+                    <button title="Current location" id="buttongeolocation"><img v-bind:src="current_location_icon" alt="Current location"/></button>
+                    <input id="search" placeholder="Search location…" type="search" accesskey="f" title="Search for a place [f]"/>
+                </div>
+                <div id="portaldetails"></div>
+                <input id="redeem" placeholder="Redeem code…" type="text"/>
+                <div id="toolbox" class="toolbox legacy">
+                    <a onmouseover="setPermaLink(this)" onclick="setPermaLink(this);return androidPermalink()" title="URL link to this map view">Permalink</a>
+                    <a onclick="window.aboutIITC()" style="cursor: help">About IITC</a>
+                </div>
+                <toolbox v-bind:toolbox_items=toolbox_items></toolbox>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+  module.exports = {
+    data: function () {
+      return {
+        toolbox_items: [
+          {id: "permalink", href: "", value: "Permalink", title: "URL link to this map view", click: "this.modify_item('permalink', 'href', window.makePermalink(null,true))"},
+          {id: "about", value: "About IITC", click: "window.aboutIITC()", style: "cursor: help"}
+        ],
+        current_location_icon: '@include_img:images/current-location.png@'
+      }
+    },
+    methods: {
+      _modernize_toolbox: function(mutationsList, observer) {
+
+        for (let mutation of mutationsList) {
+          if (mutation.type === 'childList') {
+
+            if (mutation.addedNodes.length > 0) {
+              for(let item of mutation.addedNodes) {
+                if (item.id === "") {
+                  item.id = "toolbox-item-"+Math.random().toString(36).substring(2);
+                }
+                vm.sidebar.$data.toolbox_items.push({value: item.innerText, click: "$('#"+item.id+"').click()"})
+              }
+            }
+
+          }
+        }
+
+      }
+    },
+    mounted() {
+      vm.sidebar = this;
+      const toolboxNode = document.getElementById('toolbox');
+      const observer = new MutationObserver(this._modernize_toolbox);
+      observer.observe(toolboxNode, { childList: true });
+    }
+  }
+</script>

core/components/toolbox.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="toolbox">
+    <template v-for="item in toolbox_items">
+      <a v-bind:href="_tb(item, 'href')"
+         v-bind:title="_tb(item, 'title')"
+         v-bind:style="_tb(item, 'style')"
+         v-on:click="_tb(item, 'click')"
+         v-on:mouseover="_tb(item, 'mouseover')"
+         v-on:mouseout="_tb(item, 'mouseout')">{{ item.value }}</a>
+    </template>
+  </div>
+</template>
+
+<script>
+  module.exports = {
+    props: {
+      'toolbox_items': Array,
+    },
+    methods: {
+      add_item: function(obj) {
+        this.toolbox_items.push(obj);
+      },
+      modify_item: function(id, key, value) {
+        for (let i = 0; i < this.toolbox_items.length; i++) {
+          if (this.toolbox_items[i].id === id) {
+            this.toolbox_items[i][key] = value;
+          }
+        }
+      },
+      _tb: function(item, field) {
+        if (item[field] !== undefined) {
+          if (["click", "mouseover", "mouseout"].includes(field)) {
+            eval(item[field]);
+          } else {
+            return item[field]
+          }
+        }
+      }
+    },
+    mounted() {
+      vm.toolbox = this;
+    }
+  }
+</script>
+
+<style>
+  .toolbox > a {
+    margin-left: 5px;
+    margin-right: 5px;
+    white-space: nowrap;
+    display: inline-block;
+  }
+  body.smartphone > .toolbox > a {
+    padding: 5px;
+    margin-top: 3px;
+    margin-bottom: 3px;
+    border: 2px outset #20A8B1;
+  }
+</style>

core/components/updatestatus.vue

@@ -0,0 +1,11 @@
+<template>
+    <div id="updatestatus"><div id="innerstatus"></div></div>
+</template>
+
+<script>
+  module.exports = {
+    mounted() {
+      vm.updatestatus = this;
+    }
+  }
+</script>