hexglobus/settings.js at master · VSharapov/hexglobus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
function Setting(
  displayNameAndId="Unnamed setting",
  inputType="text",
  value="",
  size="",
  suffix=""
){
  this.displayNameAndId=displayNameAndId,
  this.inputType=inputType,
  this.value=value,
  this.size=size,
  this.suffix=suffix
}

function makeSettingsInterface(defaultSettings) {
  for(var i = 0; i < defaultSettings.length; i++){
    var htmlText = "<label for=\"" + defaultSettings[i].displayNameAndId +
      "\">" + defaultSettings[i].displayNameAndId +
      ': </label><input type="' + defaultSettings[i].inputType + '" ';
    ;
    if(defaultSettings[i].displayNameAndId != ""){
      htmlText += 'id="' + defaultSettings[i].displayNameAndId + '" ';
    }
    var initialValue = findGetParameter(defaultSettings[i].displayNameAndId);
    if(initialValue != null && defaultSettings[i].inputType == "checkbox"){
      htmlText += "checked ";
    }
    if(initialValue == null){initialValue = defaultSettings[i].value;}
    if(defaultSettings[i].value != ""){
      htmlText += 'value="' + initialValue + '" ';
    }
    if(defaultSettings[i].size != ""){
      htmlText += 'style=\"width:' + defaultSettings[i].size + 'em\" ';
    }
    htmlText += '/>';
    htmlText += defaultSettings[i].suffix + '<br />\n';
    if(defaultSettings[i].inputType == "number"){
      htmlText += '<input class="LogSlider" ' +
        'type="range" min="-11" max="11" id="' +
        defaultSettings[i].displayNameAndId +
        'Logslider" onchange="settingsLogslider(\'' +
        defaultSettings[i].displayNameAndId +
        '\')" oninput="document.getElementById(\'' +
        defaultSettings[i].displayNameAndId +
        'LogsliderMoveAmount\').value=signedString(' +
        'logSliderTransform(document.getElementById(\'' +
        defaultSettings[i].displayNameAndId +
        'Logslider\').value))"><output id="' +
        defaultSettings[i].displayNameAndId +
        'LogsliderMoveAmount" for="' +
        defaultSettings[i].displayNameAndId +
        '">0</output><br />';
    }
    document.getElementById('settings').innerHTML += htmlText;
  }
  var htmlText = "<input class=\"LogSlider\" type=\"text\" id=\"viewURL\" " +
    "disabled=\"disabled\" value=\"" + document.location +
    "\" /><button onclick=\"copyURL()\">&#x1F4CB</button><br />";
  document.getElementById('settings').innerHTML += htmlText;
}

function copyURL() {
  var placeholderText = "Copied to clipboard";
  var copyText = document.getElementById("viewURL");
  copyText.select();
  navigator.clipboard.writeText(copyText.value);
  var oldText = copyText.value;
  copyText.value = placeholderText;
  setTimeout(function() {
    if(copyText.value == placeholderText){
      copyText.value = oldText;
    }
  }, 1200);
}

function signedString(number) {
  sign = '';
  if(number > 0){sign = '+';}
  return sign + number;
}

function settingsLogslider(inputID, amount) {
  amount = document.getElementById(inputID + 'Logslider').value;
  document.getElementById(inputID).value =
    parseInt(document.getElementById(inputID).value) +
    logSliderTransform(amount);
  document.getElementById(inputID + 'Logslider').value = 0;
  document.getElementById(inputID + 'LogsliderMoveAmount').value = 0;
  document.getElementById(inputID).dispatchEvent(new Event('change'));
}

function logSliderTransform(x) {
  // Turns   -11  -10 ... -3 -2 -1 0 1 ... 11
  // Into  -1024 -512 ... -4 -2 -1 0 1 ... 1024
  if(x==0){
    return x;
  }else{
    return Math.sign(x)*Math.pow(2, Math.abs(x)-1);
  }
}


function loadSetting(displayNameAndId){
  var field = document.getElementById(displayNameAndId);
  if(field.type == "number"){
    return parseFloat(field.value);
  }
  if(field.type == "checkbox"){
    return field.checked;
  }
}