1/** 2 * Button functions 3 */ 4class ButtonFunctions { 5 6 /** 7 * HTML of a download button 8 * 9 * @param {string} ext 10 * @param {string} identifier 11 * @param {string} media 12 * @returns {HTMLAnchorElement} 13 */ 14 static getDownloadButton(ext, identifier, media = '') { 15 16 const button = document.createElement('button'); 17 button.className = 'diagrams-btn'; 18 19 const icon = ButtonFunctions.getButtonIcon('download'); 20 button.prepend(icon); 21 22 const link = document.createElement('a'); 23 24 if (ext === 'png') { 25 button.append(LANG.plugins.diagrams.downloadPNGButtonShort); 26 button.title = LANG.plugins.diagrams.downloadPNGButton; 27 28 let href = DOKU_BASE + 'lib/exe/ajax.php?call=plugin_diagrams_pngdownload' + 29 '&pngcache=' + encodeURIComponent(identifier); 30 31 let param; 32 if (media.length) { 33 param = '&media=' + encodeURIComponent(media); 34 } else { 35 param = '&id=' + JSINFO.id; 36 } 37 link.href = href + param; 38 } else { 39 link.href = identifier; 40 41 let downloadName; 42 if (media.length) { 43 downloadName = media; 44 } else { 45 downloadName = JSINFO.id.split(':').pop() + `.${ext}`; 46 } 47 link.setAttribute('download', downloadName); 48 button.append(LANG.plugins.diagrams.downloadSVGButtonShort); 49 button.title = LANG.plugins.diagrams.downloadSVGButton; 50 } 51 52 link.appendChild(button); 53 54 return link; 55 } 56 57 /** 58 * HTML of an open button 59 * 60 * @param {string} url 61 * @returns {HTMLButtonElement} 62 */ 63 static getOpenButton(url) { 64 const button = document.createElement('button'); 65 button.className = 'diagrams-btn'; 66 button.innerText = LANG.plugins.diagrams.openButtonShort; 67 button.title = LANG.plugins.diagrams.openButton; 68 69 button.prepend(ButtonFunctions.getButtonIcon('open')); 70 71 button.addEventListener('click', event => { 72 event.preventDefault(); 73 window.location = url; 74 }); 75 76 return button; 77 } 78 79 /** 80 * Icon HTML 81 * 82 * @param {string} button 83 * @returns {HTMLSpanElement} 84 */ 85 static getButtonIcon(button) { 86 const icon = document.createElement('span'); 87 icon.className = `icon-${button}`; 88 89 switch (button) { 90 case "open": 91 icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>'; 92 break; 93 case "edit": 94 icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /></svg>'; 95 break; 96 case "download": 97 icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /></svg>'; 98 break; 99 } 100 101 return icon; 102 } 103} 104