Refactor web-API access

Use data-newpipe-api attribute instead of class name to register for web-API data.
TeamNewPipe · Jun 20, 2020 · 79e79af · 79e79af
1 parent 1327349
commit 79e79af
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -149,3 +149,20 @@ Writing short FAQs is quite easy and there are only few things to consider.
 2. To separate parts of your article with a thin line, use `<hr/>` tags. 
 3. To insert images, use the `<img/>` tag inside of a `<figure>` tag. Additionally, each image needs a caption (`<figcaption>`).
 4. Please keep your sentences as shorts as possible. This makes it easier to follow you and your instructions.
+
+#### Usage of WEB-API
+We have an API which provides data for running the website to circumvent contacting other servers when visiting our website.
+You can find its source code [at GitHub](https://github.com/TeamNewPipe/web-api) and the served data [here](https://newpipe.schabi.org/api/data.json).
+
+To use API data, you need to add the `data-newpipe-api` attribute to a HTML tag containing the JSON identifier of the value you want to access:
+
+``` HTML
+<p>NewPipe has <span data-newpipe-api="stats.stargazers></span> stars on GitHub.</p>"
+```
+
+By default, the inner HTML of tags which have the `data-newpipe-api` attribute will be replaced with the requested value.
+It is also possible to not replace the HTML, but store the API data in an referred attribute by adding the `ata-newpipe-api-attribute` attribute:
+
+``` HTML
+<a data-newpipe-api="flavors.fdroid.stable.apk" data-newpipe-api-attribute="href">download NewPipe</a>
+```
diff --git a/index.html b/index.html
@@ -596,15 +596,15 @@ <h4>NewPipe is free and open source</h4>
                         <p><strong>Your advantages</strong></p>
                         <ul class="check">
                             <li>Quick help when you have a problem (nobody's ever had one)</li>
-                            <li>Dozens of people bring NewPipe forward and translate it into <a href="https://hosted.weblate.org/engage/NewPipe/"><span class="api-translations">60+</span>&nbsp;languages</a>.</li>
+                            <li>Dozens of people bring NewPipe forward and translate it into <a href="https://hosted.weblate.org/engage/NewPipe/"><span data-newpipe-api="stats.translations">60+</span>&nbsp;languages</a>.</li>
                             <li>You can check the source code on <a href="https://github.com/TeamNewPipe/NewPipe">GitHub</a> and contribute to NewPipe.</li>
                             <li>NewPipe is covered by the <a href="https://github.com/TeamNewPipe/NewPipe/blob/master/LICENSE">GPL&nbsp;3.0&nbsp;license</a>.</li>
                             <li>Get NewPipe from <a href="https://f-droid.org/packages/org.schabi.newpipe/">F-Droid</a> and we guarantee that it is generated from the source code.</li>
                             <li class="text-success">NewPipe is available for free</li>
                         </ul>
                         <p class="button-wrapper">
                             <a href="https://github.com/TeamNewPipe/NewPipe/blob/dev/.github/CONTRIBUTING.md#newpipe-contribution-guidelines" class="button action">Contribute</a>
-                            <a href="https://github.com/TeamNewPipe/NewPipe/" class="button action"><i class="fa fa-star"></i> <span class="api-stargazers">8000+</span></a>
+                            <a href="https://github.com/TeamNewPipe/NewPipe/" class="button action"><i class="fa fa-star"></i> <span data-newpipe-api="stats.stargazers">8000+</span></a>
                             <a href="https://hosted.weblate.org/engage/NewPipe/" class="button action">Translate</a>
                             <a href="https://github.com/TeamNewPipe/website/" class="button action black" >Improve this site</a>
                         </p>

diff --git a/js/web-api.js b/js/web-api.js
@@ -4,52 +4,73 @@
  * the NewPipe web-api {@link https://gtihub.com/TeamNewPipe/web-api}.
  *
  * Elements which expect to receive information from the web-api
- * automatically, need to have a class of the following scheme:
- *      api-stable-version
- *      api-stars
- * and so on. The "stats" are unambiguous, therefore they got dropped.
+ * automatically, need to have an attribute of the following scheme:
+ *      data-newpipe-api="JSON_IDENTIFIER_OF_THE_REQUESTED_VALUE"
+ *
+ * By default, the inner HTML of the elements having the above's attribute is replaced.
+ * You can also specify an attribute to store the API data instead:
+ *      data-newpipe-api-attribute="ATTRIBUTE_NAME"
+ *
+ *  Example:
+ *  {@code <a href="https:example.com" data-newpipe-api="flavors.fdroid.stable.apk" data-newpipe-api-attribute="href">
+ *      download APK</a> }
  */
 
-var api = null;
+/**
+ * Stores the web-api data
+ * @type {null | JSON}
+ */
+let api = null;
 
 function getAPIData() {
     return api;
 }
 
 /**
- * Updates all elements having a specific class with web-api information
- * @param className of the elements which will contain the information
- * @param apiData information to display
- * @param attribute (optional) attribute to add api data to instead of content
+ * Recursive function to update elements with API data
+ * @param {Object | string} object - Object or value from the api object
+ * @param {string} key - key of the object
+ * @param {null | string} oldIdentifier
+ * @return {void}
  */
-function updateWithAPIData(className, apiData, attribute) {
-    attribute = attribute || -1;
-    var data = apiData.toString();
-    var els = document.getElementsByClassName(className);
-    if (els == null) return;
-    for (var i = 0; i < els.length; i++) {
-        if (attribute != -1)
-            els.item(i).setAttribute(attribute, data);
-        else
-            els.item(i).innerHTML = data;
+function updateWithAPIData(object, key, oldIdentifier) {
+    let newIdentifier = (oldIdentifier === null) ? key : oldIdentifier + '.' + key;
+    if (object instanceof Object) {
+        // this is a JSON object with more objects inside
+        // iterate through them
+        Object.keys(object).forEach(function (name) {
+            updateWithAPIData(object[name], name, newIdentifier);
+        });
+    } else {
+        if (object === -1) return; // invalid value, something went wrong when building the API data
+        // this object is a value
+        // get all elements listening for it
+        let elementsToUpdate = document.querySelectorAll('[data-newpipe-api="' + newIdentifier + '"]');
+        if (elementsToUpdate == null) return;
+
+        let data = object.toString();
+        for (let i = 0; i < elementsToUpdate.length; i++) {
+            if (elementsToUpdate.item(i).hasAttribute("data-newpipe-api-attribute")) {
+                // the element requests to set an attribute to the api value
+                let attr = elementsToUpdate.item(i).getAttribute("data-newpipe-api-attribute");
+                elementsToUpdate.item(i).setAttribute(attr, data);
+            } else {
+                // default: set the inner HTML of the element to the api value
+                elementsToUpdate.item(i).innerHTML = data;
+            }
+        }
     }
 }
 
 /**
  * Updates every element which expects to receive information
  * from the web-api
+ * @return {void}
  */
 function updateAllWithAPIData() {
-    updateWithAPIData("api-github-stable-version", api.flavors.github.stable.version.replace("v",""));
-    updateWithAPIData("api-github-stable-apk", api.flavors.github.stable.apk, "href");
-    updateWithAPIData("api-f-droid-stable-version", api.flavors.fdroid.stable.version.replace("v",""));
-    updateWithAPIData("api-f-droid-stable-apk", api.flavors.fdroid.stable.apk, "href");
-
-    updateWithAPIData("api-translations", api.stats.translations);
-    updateWithAPIData("api-forks", api.stats.forks);
-    updateWithAPIData("api-contributors", api.stats.contributors);
-    updateWithAPIData("api-stargazers", api.stats.stargazers);
-    updateWithAPIData("api-watchers", api.stats.watchers);
+    Object.keys(api).forEach(function (name) {
+        updateWithAPIData(api[name], name, null);
+    })
 }
 
 /**

diff --git a/press/index.html b/press/index.html
@@ -16,11 +16,11 @@ <h4>About NewPipe</h4>
             <p style="margin-bottom: 15px;">A good user experience is important to the developers of NewPipe. Therefore the app offers many solutions for all possible situations. In this way, the resolution and codecs of the video and audio can be set to save data volume in mobile networks. Likewise, NewPipe's video popup and background players make it possible to seamlessly integrate videos and music into daily mobile phone use.</p>
             <p><strong>Quick information:</strong></p>
             <ul>
-                <li>Current stable version: <span class="api-github-stable-version">0.11.5 (Effective 11th February 2018)</span></li>
+                <li>Current stable version: <span data-newpipe-api="flavors.fdroid.stable.version">0.19.5 (Effective 20th June 2019)</span></li>
                 <li>Initial release: 4. September 2015</li>
                 <li>Founder: Christian Schabesberger</li>
-                <li class="linebreak">Available translations: <span class="api-translations">43</span><br>You can find a list with all current supported languages at <a href="https://hosted.weblate.org/projects/newpipe/#languages" target="_blank">Weblate</a>.</li>
-                <li>Contributors: <span class="api-contributors">178</span></li>
+                <li class="linebreak">Available translations: <span data-newpipe-api="stats.translations">60</span><br>You can find a list with all current supported languages at <a href="https://hosted.weblate.org/projects/newpipe/#languages" target="_blank">Weblate</a>.</li>
+                <li>Contributors: <span data-newpipe-api="stats.contributors">440</span></li>
                 <li>App store: <a href="https://f-droid.org/packages/org.schabi.newpipe/" target="_blank">F-Droid</a></li>
             </ul>
             <p>Because NewPipe and F-Droid guarantee high privacy standards to their users, we cannot give you any information about the number of downloads, active installations or the countries where our users come from, because we do not collect it.</p><!-- But there is a little information about these common indicators for an app popularity: ... -->
@@ -35,7 +35,7 @@ <h4>About NewPipe Extractor</h4>
             <h4>About Team NewPipe</h4>
             <p>Team NewPipe are the main developers of the NewPipe app and the NewPipe Extractor. At April 2020 they counted twelve developers who work voluntarily on this Open Source project. All work of NewPipe's developers is independent and is not funded by any company or governmental institution but by single donations of private persons.</p>
 
-            <p id="last-modified">Last modified: April 2020</p>
+            <p id="last-modified">Last modified: June 2020</p>
 
         </div>
     </div>