UTIL functions
目前为
此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.greasyfork.icu/scripts/370113/611023/WME%20Norway%20-%20Utils.js
// ==UserScript==
// @name WME Norway - Utils
// @namespace WazeNOR
// @version 1.0
// @description UTIL functions
// @author MtsAssen
// @include /^https:\/\/(www|beta)\.waze\.com\/(?!user\/)(.{2,6}\/)?editor\/?.*$/
// @require https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
// @license MIT
// ==/UserScript==
/* global $ */
/* global W */
var Nor = {};
(function () {
Nor.TabBuilder = class TabBuilder {
/**
* Creates a new tab builder and returns it self.
* @param {string} html
*/
constructor(html = "") {
this.html = html;
return this;
}
/**
* Creates a new header (h4)
* @param {string} header The header text
* @param {string} id The header element id (not required)
*/
header(header, id = "") {
this.html += "<h4 style='margin-bottom: 10px;'" + (id == "" ? "" : " id='" + id + "'") + ">" + header + "</h4>";
return this;
}
/**
* Adds text or custom html to the page.
* @param {string} text Text or HTML tags to include.
*/
text(text) {
this.html += text;
return this;
}
/**
* Adds a span with bold weight.
* @param {string} text The bold text
*/
bold(text) {
this.html += "<span style='font-weight: bold;'>" + text + "</span>";
return this;
}
/**
* Adds a 25px break.
*/
break () {
this.html += "<br style='line-height: 25px;' />";
return this;
}
/**
* Adds a form element. Use TabForm builder object to create elements.
* @param {Nor.TabForm} form
*/
form(form) {
this.html += form.html.join("");
return this;
}
}
Nor.TabForm = class TabForm {
/**
* Creates a new form element.
* @param {string} html
*/
constructor(html = "") {
if (html == "") {
html = new Array();
html.push("<form class='attributes-form side-panel-section'>");
html.push("</form>");
}
this.html = html;
return this;
}
/**
* Util function to add new elements to the second last array position
* @private
* @param {string} html
*/
add(html) {
this.html.splice(this.html.length - 1, 0, html);
return this;
}
/**
* Create a form group element using the Nor.FormGroup builder.
* @param {Nor.FormGroup} form
*/
formGroup(formGroup) {
return this.add(formGroup.html.join(""));
}
}
Nor.FormGroup = class FormGroup {
/**
* Creates new form group element.
* @param {string} html
*/
constructor(html = "") {
if (html == "") {
html = new Array();
html.push("<div class='form-group'>");
html.push("</div>");
}
this.html = html;
return this;
}
/**
* Adds an element to the html array at the second last position.
* @param {string} html
*/
add(html) {
this.html.splice(this.html.length - 1, 0, html);
return this;
}
/**
* Adds a label to the form group
* @param {string} text label text
*/
label(text) {
return this.add("<label class='control-label' style='margin-bottom: none;'>" + text + "</label>");
}
/**
* Adds a checkbox to the form group
* @param {string} text checkbox label text
* @param {string} id checkbox element id
* @param {boolean} checked checked?
* @param {boolean} removeTopPadding removes the top padding on the element, used to make labels above look better.
*/
checkbox(text, id, checked = false, removeTopPadding = false) {
return this.add("<div class='controls-container'" + (removeTopPadding ? "style='padding-top: 0 !important;'" : "") + "><div class='controls-container' style='padding-top: 2px;'><input type='checkbox' id='" + id + "'" + (checked ? "checked" : "") + "><label for='" + id + "' style='white-space: pre-line;'>" + text + "</label></div></div>");
}
/**
*
* @param {string} text button text
* @param {string} id button element id
* @param {string} color button color. Available: green, red, blue, gray and white (default)
*/
button(text, id, color = "white") {
return this.add("<div class='controls-container'><button class='waze-btn waze-btn-smaller waze-btn-" + color + "' id='" + id + "'>" + text + "</button></div>");
}
/**
*
* @param {string} label the label above the dropdown
* @param {string} id dropdown element id
* @param {Array} list list of elements that should be added to dropdown
* @param {string} displayPropName the property name of the element that is visible
* @param {string} valuePropName the property name of the element that is the value
* @param {string} selectedValue the value of the default selected element
*/
dropdown(label, id, list, displayPropName, valuePropName, selectedValue) {
this.add('<label class="control-label">' + label + '</label>');
this.add('<div class="controls"><div><select class="form-control" id="' + id + '">')
list.forEach(item => {
this.add('<option value="' + item[valuePropName] + '" ' + (item[valuePropName] == selectedValue ? 'selected=""' : '') + '>' + item[displayPropName] + '</option>')
});
this.add('</select></div></div>');
return this;
}
}
// Util functions
/**
* Calls an GET ajax function to a specified URL.
*
* @param url URL to call
* @param onSuccess Callback function
*/
Nor.callAjax = function (url, onSuccess) {
$.ajax({
type: "GET",
url: url,
jsonp: "callback",
data: {
alt: "json-in-script"
},
dataType: "jsonp",
success: onSuccess
});
}
/**
* Parses a google spreadsheet table into a object array.
*
* @param url The spreadsheet URL (list feed)
* @param result Callback function - returns array list with table rows.
*/
Nor.parseSpreadsheetTable = function (url, result) {
// Get JSON formatted data
Nor.callAjax(url, response => {
// Create array list to store the lines in the table. Then - loop the response feed.
var DATA = [];
for (var i = 0; i < response.feed.entry.length; i++) {
// Create object to store list item. Then - loop the entry nodes.
var obj = {}
for (var key in response.feed.entry[i]) {
// If the property node is called something like "gsx$" we know that it's a nested cell value.
if (response.feed.entry[i].hasOwnProperty(key) && key.substr(0, 4) === "gsx$") {
obj[key.substr(4)] = response.feed.entry[i][key].$t;
}
}
DATA.push(obj);
}
// Callback function
result(DATA);
});
}
})();