script.js

   1 /**
   2  *
   3  * @source: https://codeberg.org/Tuxilio/forgejo-buttons/src/branch/pages/script.js
   4  *
   5  * @licstart  The following is the entire license notice for the
   6  *  JavaScript code in this page.
   7  *
   8  * Copyright (C) 2024  Tuxilio <tuxilio@mailbox.org>
   9  *
  10  *
  11  * The JavaScript code in this page is free software: you can
  12  * redistribute it and/or modify it under the terms of the GNU
  13  * General Public License (GNU GPL) as published by the Free Software
  14  * Foundation, either version 3 of the License, or (at your option)
  15  * any later version.  The code is distributed WITHOUT ANY WARRANTY;
  16  * without even the implied warranty of MERCHANTABILITY or FITNESS
  17  * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
  18  *
  19  * As additional permission under GNU GPL version 3 section 7, you
  20  * may distribute non-source (e.g., minimized or compacted) forms of
  21  * that code without the copy of the GNU GPL normally required by
  22  * section 4, provided you include this license notice and a URL
  23  * through which recipients can access the Corresponding Source.
  24  *
  25  * @licend  The above is the entire license notice
  26  * for the JavaScript code in this page.
  27  *
  28  */
  29
  30 document.addEventListener("DOMContentLoaded", function() {
  31   const INSTANCE_URL = "https://tuxilio.codeberg.page/forgejo-buttons/buttons"
  32
  33   var buttons = document.querySelectorAll('.forgejo-button');
  34   var inputs = document.querySelectorAll('.input-container')
  35   var afterSelect = document.getElementById("after-select");
  36   var custom = document.getElementById("custom");
  37   var serverUrlInput = document.getElementById("server-url");
  38   var repoNameInput = document.getElementById("repo-name");
  39   var usernameInput = document.getElementById("username");
  40   var customIconInput = document.getElementById("icon-url");
  41   var outputCodeTextarea = document.getElementById("output-code");
  42   var outputPreview = document.getElementById("preview");
  43   var userServerInputDiv = document.getElementById("user-server-input-div");
  44   var useDefaultIconDiv = document.getElementById("default-icon-div");
  45
  46   // Custom
  47   var customTypeDropdown = document.getElementById("ctype");
  48   var advancedCustomSettings = document.getElementById("advanced-custom-settings");
  49   var customTextCheckboxDiv = document.getElementById("custom-text-div");
  50   var customTextInputDiv = document.getElementById("custom-text-input-div");
  51   var customTextCheckbox = document.getElementById("custom-text");
  52   // Custom inputs
  53   var customInputButtonText = document.getElementById('custom-text-input');
  54   var customInputApiEndpoint = document.getElementById('count-url');
  55   var customInputApiEndpointName = document.getElementById('count-name');
  56   var customInputButtonHref = document.getElementById('button-href');
  57   var customInputCounterHref = document.getElementById('count-href');
  58
  59   let useDefaultIcon = false;
  60   let useLightMode = false;
  61   let hideCount = false;
  62   let smallButton = false;
  63
  64   let iframewidth = 170;
  65   let iframeheight = 30;
  66
  67   const useDefaultIconCheckbox = document.getElementById('default-icon');
  68   const useLightModeCheckbox = document.getElementById('light-mode');
  69   const hideCountCheckbox = document.getElementById('show-count');
  70   const smallButtonCheckbox = document.getElementById('small-button')
  71
  72   useDefaultIconCheckbox.addEventListener('change', () => {
  73     useDefaultIcon = useDefaultIconCheckbox.checked;
  74     generateCode(document.querySelector('.forgejo-button.active').getAttribute("data-type"));
  75   });
  76
  77   useLightModeCheckbox.addEventListener('change', () => {
  78     useLightMode = useLightModeCheckbox.checked;
  79     generateCode(document.querySelector('.forgejo-button.active').getAttribute("data-type"));
  80   });
  81
  82   hideCountCheckbox.addEventListener('change', () => {
  83     hideCount = hideCountCheckbox.checked;
  84     generateCode(document.querySelector('.forgejo-button.active').getAttribute("data-type"));
  85   });
  86
  87   smallButtonCheckbox.addEventListener('change', () => {
  88     smallButton = smallButtonCheckbox.checked;
  89     generateCode(document.querySelector('.forgejo-button.active').getAttribute("data-type"));
  90   });
  91
  92   customTypeDropdown.addEventListener('change', () => {
  93     generateCode(document.querySelector('.forgejo-button.active').getAttribute("data-type"));
  94   });
  95
  96   customTextCheckbox.addEventListener('change', () => {
  97     generateCode(document.querySelector('.forgejo-button.active').getAttribute("data-type"));
  98   });
  99
 100   function generateCode(buttonType) {
 101     afterSelect.style.display = "block";
 102
 103     var serverUrl = serverUrlInput.value;
 104     var repoName = repoNameInput.value;
 105     var username = usernameInput.value;
 106     var customIcon = customIconInput.value;
 107
 108     var code = `<iframe src="${INSTANCE_URL}/?url=${serverUrl}&user=${username}&repo=${repoName}`;
 109     var preview = `<iframe src="buttons/?url=${serverUrl}&user=${username}&repo=${repoName}`;
 110
 111     if (smallButton) {
 112       code += `&size=small`;
 113       preview += `&size=small`;
 114       iframewidth = 150;
 115       iframeheight = 20;
 116     } else {
 117       code += `&size=large`;
 118       preview += `&size=large`;
 119       iframewidth = 170;
 120       iframeheight = 30;
 121     }
 122
 123     function setIcon(icon) {
 124       code += `&ico=${icon}`;
 125       preview += `&ico=${icon}`;
 126     }
 127
 128     if (hideCount) {
 129       code += `&count=false`;
 130       preview += `&count=false`;
 131     } else {
 132       code += `&count=true`;
 133       preview += `&count=true`;
 134     }
 135
 136     if (useLightMode) {
 137       code += '&dark=true';
 138       preview += '&dark=true';
 139     } else {
 140       code += '&dark=false';
 141       preview += '&dark=false';
 142     }
 143
 144     if (useDefaultIcon) {
 145       if (useLightMode) {
 146         setIcon('img/forgejo-light.svg');
 147       } else {
 148         setIcon('img/forgejo-dark.svg');
 149       }
 150     } else {
 151       switch(buttonType) {
 152         case 'follow':
 153           setIcon(useLightMode ? 'img/forgejo-light.svg' : 'img/forgejo-dark.svg');
 154           break;
 155         case 'watch':
 156           setIcon(useLightMode ? 'img/eye-light.svg' : 'img/eye-dark.svg');
 157           break;
 158         case 'star':
 159           setIcon(useLightMode ? 'img/star-light.svg' : 'img/star-dark.svg');
 160           break;
 161         case 'fork':
 162           setIcon(useLightMode ? 'img/repo-forked-light.svg' : 'img/repo-forked-dark.svg');
 163           break;
 164         case 'issue':
 165           setIcon(useLightMode ? 'img/issue-opened-light.svg' : 'img/issue-opened-dark.svg');
 166           break;
 167         case 'pr':
 168           setIcon(useLightMode ? 'img/git-pull-request-light.svg' : 'img/git-pull-request-dark.svg');
 169           break;
 170         case 'release':
 171           setIcon(useLightMode ? 'img/tag-light.svg' : 'img/tag-dark.svg');
 172           break;
 173         case 'template':
 174           setIcon(useLightMode ? 'img/repo-template-light.svg' : 'img/repo-template-dark.svg');
 175           break;
 176         case 'download':
 177           setIcon(useLightMode ? 'img/download-light.svg' : 'img/download-dark.svg');
 178           break;
 179         case 'custom':
 180           setIcon(customIcon);
 181       }
 182     }
 183
 184     if (buttonType == "custom") {
 185       custom.style.display = "block";
 186       buttonType = customTypeDropdown.value;
 187       useDefaultIconDiv.style.display = "none";
 188       if (buttonType == "custom") {
 189         advancedCustomSettings.style.display = "block";
 190         customTextCheckboxDiv.style.display = "none";
 191         userServerInputDiv.style.display = "none";
 192         customTextInputDiv.style.display = "block";
 193       } else {
 194         advancedCustomSettings.style.display = "none";
 195         customTextCheckboxDiv.style.display = "block"
 196         userServerInputDiv.style.display = "block";
 197         if (customTextCheckbox.checked) {
 198           customTextInputDiv.style.display = "block";
 199         } else {
 200           customTextInputDiv.style.display = "none";
 201         }
 202       }
 203     } else {
 204       custom.style.display = "none";
 205       userServerInputDiv.style.display = "block";
 206       useDefaultIconDiv.style.display = "block";
 207     }
 208
 209     switch(buttonType) {
 210       case 'follow':
 211         code += '&type=follow';
 212         preview += '&type=follow';
 213         break;
 214       case 'watch':
 215         code += '&type=watch';
 216         preview += '&type=watch';
 217         break;
 218       case 'star':
 219         code += '&type=star';
 220         preview += '&type=star';
 221         break;
 222       case 'fork':
 223         code += '&type=fork';
 224         preview += '&type=fork';
 225         break;
 226       case 'issue':
 227         code += '&type=issue';
 228         preview += '&type=issue';
 229         break;
 230       case 'pr':
 231         code += '&type=pr';
 232         preview += '&type=pr';
 233         break;
 234       case 'release':
 235         code += '&type=release';
 236         preview += '&type=release';
 237         break;
 238       case 'template':
 239         code += '&type=template';
 240         preview += '&type=template';
 241         break;
 242       case 'download':
 243         code += '&type=download';
 244         preview += '&type=download';
 245         break;
 246       case 'custom':
 247         code += `&type=custom&customapi=${customInputApiEndpoint.value}&customapiname=${customInputApiEndpointName.value}&custombuttonurl=${customInputButtonHref.value}&customcounterurl=${customInputCounterHref.value}`;
 248         preview += `&type=custom&customapi=${customInputApiEndpoint.value}&customapiname=${customInputApiEndpointName.value}&custombuttonurl=${customInputButtonHref.value}&customcounterurl=${customInputCounterHref.value}`;
 249         break;
 250     }
 251
 252     if (customTextCheckbox.checked) {
 253       code += `&customtext=${customInputButtonText.value}`
 254       preview += `&customtext=${customInputButtonText.value}`
 255     }
 256
 257     code += `" style="all: initial; background-color: transparent; width: ${iframewidth}px; height: ${iframeheight}px;" frameborder="0" scrolling="0" width="${iframewidth}px" height="${iframeheight}px" allowtransparency="true" title="forgejo:buttons"></iframe>`;
 258     preview += `" style="all: initial; background-color: transparent; width: ${iframewidth}px; height: ${iframeheight}px;" frameborder="0" scrolling="0" width="${iframewidth}px" height="${iframeheight}px" allowtransparency="true" title="forgejo:buttons"></iframe>`;
 259
 260     outputCodeTextarea.value = code;
 261     outputPreview.innerHTML = preview;
 262   }
 263
 264   buttons.forEach(function(button) {
 265     button.addEventListener("click", function() {
 266       buttons.forEach(function(btn) {
 267         btn.classList.remove('active');
 268       });
 269       this.classList.add('active');
 270       generateCode(this.getAttribute("data-type"));
 271     });
 272   });
 273
 274   inputs.forEach(function(input) {
 275     input.addEventListener("input", function() {
 276       generateCode(document.querySelector('.forgejo-button.active').getAttribute("data-type"));
 277     });
 278   });
 279 });