This repository has been archived by the owner on Jan 7, 2025. It is now read-only.
generated from Telegram-Mini-Apps/vanillajs-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
483 additions
and
643 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -24,18 +24,14 @@ | |
| <link href="css/link.css" rel="stylesheet"> | ||
| <link href="css/displayData.css" rel="stylesheet"> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/@telegram-apps/[email protected]/dist/index.iife.js"></script> | ||
| <script src="https://telegram.org/js/telegram-web-app.js"></script> | ||
| <script src="https://unpkg.com/@tonconnect/[email protected]/dist/tonconnect-ui.min.js"></script> | ||
| <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> | ||
| </head> | ||
| <body> | ||
| <noscript>You need to enable JavaScript to run this app.</noscript> | ||
| <div id="root"></div> | ||
| <script src="js/utils.js"></script> | ||
| <!-- Uncomment next line for local development outside Telegram Mini App --> | ||
| <!-- <script src="js/mockEnv.js"></script> --> | ||
| <script src="js/initNavigrator.js"></script> | ||
| <script src="js/initComponents.js"></script> | ||
| <script src="js/initTonConnect.js"></script> | ||
|
|
||
| <script src="js/components/DisplayData.js"></script> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,41 @@ | ||
| class DisplayData { | ||
| constructor({ rows }) { | ||
| this.el = $('<div/>'); | ||
| this.setRows(rows); | ||
| } | ||
| function isRGB(value) { | ||
| return /^#[a-f0-9]{3,6}$/i.test(value); | ||
| } | ||
|
|
||
| /** | ||
| * @returns {HTMLDivElement} | ||
| */ | ||
| element() { | ||
| return this.el[0]; | ||
| } | ||
| function DisplayData(options) { | ||
| var rows = options.rows; | ||
| this.el = $('<div/>'); | ||
| this.setRows(rows); | ||
| } | ||
|
|
||
| setRows(rows) { | ||
| this.el.empty().append( | ||
| ...rows.map(row => { | ||
| const lineValue = $('<span class="display-data__line-value"/>'); | ||
| if (typeof row.value === 'string' && window.telegramApps.sdk.isRGB(row.value)) { | ||
| lineValue.append(new RGB({ color: row.value }).element()); | ||
| } else if (row.value === false) { | ||
| lineValue.text('❌'); | ||
| } else if (row.value === true) { | ||
| lineValue.text('✔️'); | ||
| } else if (row.value === undefined) { | ||
| lineValue.html('<i>empty</i>'); | ||
| } else if (row.value instanceof HTMLElement) { | ||
| lineValue.append(row.value); | ||
| } else { | ||
| lineValue.append(row.value.toString()); | ||
| } | ||
| /** | ||
| * @returns {HTMLDivElement} | ||
| */ | ||
| DisplayData.prototype.element = function() { | ||
| return this.el[0]; | ||
| }; | ||
|
|
||
| return $('<div class="display-data__line"/>').append( | ||
| $('<span class="display-data__line-title"/>').text(row.title), | ||
| lineValue, | ||
| ); | ||
| }), | ||
| DisplayData.prototype.setRows = function(rows) { | ||
| this.el.empty().append.apply(this.el, rows.map(function(row) { | ||
| var lineValue = $('<span class="display-data__line-value"/>'); | ||
| if (typeof row.value === 'string' && isRGB(row.value)) { | ||
| lineValue.append(new RGB({ color: row.value }).element()); | ||
| } else if (row.value === false) { | ||
| lineValue.text('❌'); | ||
| } else if (row.value === true) { | ||
| lineValue.text('✔️'); | ||
| } else if (row.value === undefined) { | ||
| lineValue.html('<i>empty</i>'); | ||
| } else if (row.value instanceof HTMLElement) { | ||
| lineValue.append(row.value); | ||
| } else { | ||
| lineValue.append(row.value.toString()); | ||
| } | ||
|
|
||
| return $('<div class="display-data__line"/>').append( | ||
| $('<span class="display-data__line-title"/>').text(row.title), | ||
| lineValue | ||
| ); | ||
| return this; | ||
| } | ||
| } | ||
| })); | ||
| return this; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,33 @@ | ||
| class Link { | ||
| constructor({ href, class: className }, context) { | ||
| const targetUrl = new URL(href, window.location.toString()); | ||
| const currentUrl = new URL(window.location.toString()); | ||
| const isExternal = targetUrl.protocol !== currentUrl.protocol | ||
| || targetUrl.host !== currentUrl.host; | ||
| function Link(options, context) { | ||
| var href = options.href; | ||
| var className = options.class; | ||
|
|
||
| var targetUrl = new URL(href, window.location.toString()); | ||
| var currentUrl = new URL(window.location.toString()); | ||
| var isExternal = targetUrl.protocol !== currentUrl.protocol || targetUrl.host !== currentUrl.host; | ||
|
|
||
| this.el = $('<a/>') | ||
| .attr('class', 'link') | ||
| .addClass(className ?? '') | ||
| .attr('href', isExternal ? href : context.navigator.renderPath(href)); | ||
| this.el = $('<a/>') | ||
| .attr('class', 'link') | ||
| .addClass(className || '') | ||
| .attr('href', isExternal ? href : '#' + href); | ||
|
|
||
| if (isExternal) { | ||
| this.el.on('click', (e) => { | ||
| e.preventDefault(); | ||
| context.utils.openLink(targetUrl.toString()); | ||
| }); | ||
| } | ||
| if (isExternal) { | ||
| this.el.on('click', function(e) { | ||
| e.preventDefault(); | ||
| context.getWebApp().openLink(targetUrl.toString()); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| appendChild(...children) { | ||
| this.el.append(...filterChildren(children)); | ||
| return this; | ||
| } | ||
| Link.prototype.appendChild = function() { | ||
| var children = Array.prototype.slice.call(arguments); | ||
| this.el.append.apply(this.el, filterChildren(children)); | ||
| return this; | ||
| }; | ||
|
|
||
| /** | ||
| * @returns {HTMLAnchorElement} | ||
| */ | ||
| element() { | ||
| return this.el[0]; | ||
| } | ||
| } | ||
| /** | ||
| * @returns {HTMLAnchorElement} | ||
| */ | ||
| Link.prototype.element = function() { | ||
| return this.el[0]; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,29 @@ | ||
| class Page { | ||
| constructor({ title }) { | ||
| this.el = $('<div class="page"/>').append($('<h1/>').text(title)); | ||
| } | ||
| function Page(options) { | ||
| var title = options.title; | ||
| this.el = $('<div class="page"/>').append($('<h1/>').text(title)); | ||
| } | ||
|
|
||
| appendChild(...children) { | ||
| this.el.append(...filterChildren(children)); | ||
| return this; | ||
| } | ||
| Page.prototype.appendChild = function() { | ||
| var children = Array.prototype.slice.call(arguments); | ||
| this.el.append.apply(this.el, filterChildren(children)); | ||
| return this; | ||
| }; | ||
|
|
||
| /** | ||
| * @returns {HTMLDivElement} | ||
| */ | ||
| element() { | ||
| return this.el[0]; | ||
| } | ||
| /** | ||
| * @returns {HTMLDivElement} | ||
| */ | ||
| Page.prototype.element = function() { | ||
| return this.el[0]; | ||
| }; | ||
|
|
||
| setDisclaimer(disclaimer) { | ||
| if (this.disclaimer) { | ||
| this.disclaimer.empty().append(...toArray(disclaimer)); | ||
| } else { | ||
| this.disclaimer = $('<div class="page__disclaimer"/>') | ||
| .append(...toArray(disclaimer)) | ||
| .insertAfter(this.el.children('h1')); | ||
| } | ||
| return this; | ||
| Page.prototype.setDisclaimer = function(disclaimer) { | ||
| if (this.disclaimer) { | ||
| this.disclaimer.empty().append.apply(this.disclaimer, toArray(disclaimer)); | ||
| } else { | ||
| var disclaimerEl = $('<div class="page__disclaimer"/>'); | ||
| this.disclaimer = disclaimerEl | ||
| .append.apply(disclaimerEl, toArray(disclaimer)) | ||
| .insertAfter(this.el.children('h1')); | ||
| } | ||
| } | ||
| return this; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,11 @@ | ||
| class PageComponent { | ||
| constructor(page) { | ||
| this.page = page; | ||
| } | ||
| function PageComponent(page) { | ||
| this.page = page; | ||
| } | ||
|
|
||
| /** | ||
| * @param {HTMLElement} root | ||
| * @returns {void} | ||
| */ | ||
| render(root) { | ||
| $(root).empty().append(this.page.element()); | ||
| } | ||
| } | ||
| /** | ||
| * @param {HTMLElement} root | ||
| * @returns {void} | ||
| */ | ||
| PageComponent.prototype.render = function(root) { | ||
| $(root).empty().append(this.page.element()); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,22 @@ | ||
| class RGB { | ||
| /** | ||
| * @param {{ color: string; class?: string }} | ||
| */ | ||
| constructor({ color, class: className }) { | ||
| this.el = $('<span/>') | ||
| .attr('class', 'rgb') | ||
| .addClass(className ?? '') | ||
| .append( | ||
| $(`<i class="rgb__icon" style="background-color: ${color}"/>`), | ||
| color, | ||
| ); | ||
| } | ||
| /** | ||
| * @param {{ color: string; class?: string }} options | ||
| */ | ||
| function RGB(options) { | ||
| var color = options.color; | ||
| var className = options.class; | ||
|
|
||
| this.el = $('<span/>') | ||
| .attr('class', 'rgb') | ||
| .addClass(className || '') | ||
| .append( | ||
| $('<i class="rgb__icon"/>').css('background-color', color), | ||
| color | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * @returns {HTMLSpanElement} | ||
| */ | ||
| element() { | ||
| return this.el[0]; | ||
| } | ||
| } | ||
| /** | ||
| * @returns {HTMLSpanElement} | ||
| */ | ||
| RGB.prototype.element = function() { | ||
| return this.el[0]; | ||
| }; |
Oops, something went wrong.