Skip to main content

Застосунок

Коли ми запускаємо застосунок, ми можемо використовувати новий конструктор Techno4 і передати об’єкт із основними параметрами застосунку:
var app = new Techno4({
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // ... other parameters
});
Цей конструктор повертає основний екземпляр застосунку Techno4.

Параметри застосунку

Давайте подивимося на список доступних параметрів:
ПараметрЗа замовчуваннямОписТип
el
body
Кореневий елемент застосунку. Якщо основний макет застосунку не є прямим дочірнім елементом <body>, тут потрібно вказати кореневий елемент
string
component
Завантажити макет застосунку з переданого main app component.
Router Component
componentUrl
Шлях до main app component з одним файлом, який буде завантажено через XHR.
string Component
id
io.Techno4.testapp
Ідентифікатор набору застосунків
string
name
Techno4
Назва застосунку. Може використовуватися іншими компонентами, напр. як назву за замовчуванням для компонента Dialog.
string
version
1.0.0
Версія застосунку. Може використовуватися іншими компонентами.
string
theme
auto
Тема застосунку. Може бути ios, md, aurora або auto. У разі auto режиму він використовуватиме тему iOS для пристроїв iOS, тему Aurora для настільного пристрою, що працює в середовищі Electron, і тему MD для всіх інших пристроїв.
string
language
Мова застосунку. Може використовуватися іншими компонентами. За замовчуванням дорівнює поточній мові вебпереглядача/вебперегляду (тобто avigator.language).
String
userAgent
Рядок агента користувача. Потрібний у разі використання на стороні сервера для правильного виявлення пристрою.
String
routes
[]
Масив із стандартними маршрутами до всіх представлень
array
lazyModulesPath
Шлях до відкладених компонентів Techno4. Необхідно використовувати Lazy Modules із модулями браузера.
string
autoDarkMode
false
Автоматично вмикає темну тему на основі налаштувань системи кольорів системи користувача. Підтримка цієї функції базується на підтримці медіа-запитів (prefers-color-scheme).
boolean
init
true
За замовчуванням Techno4 буде ініціалізовано автоматично, коли ви викликаєте new Techno4(). Якщо ви хочете запобігти такій поведінці, ви можете вимкнути його за допомогою цього параметра, а потім ініціалізувати вручну за допомогою app.init(), коли вам це потрібно.
boolean
initOnDeviceReady
true
Якщо автоматичну ініціалізацію ввімкнено за допомогою параметра init: true і застосунок працює в середовищі cordova, тоді її буде ініціалізовано за подією deviceready.
Boolean
iosTranslucentBars
true
Увімкнути напівпрозорий ефект (розмиття фону) на панелях навігації для теми iOS (на пристроях iOS)
Boolean
iosTranslucentModals
true
Увімкнути напівпрозорий ефект (розмиття фону) у режимах (діалогове вікно, спливаюче вікно, дії) для теми iOS (на пристроях iOS)
Boolean

ПараметрЗа замовчуваннямОписТип
on
{}
Об'єкт з обробниками подій. Наприклад:
object
var app = new Techno4({
  on: {
    init: function () {
      console.log('App initialized');
    },
    pageInit: function () {
      console.log('Page initialized');
    },
  }
})

Clicks Module параметри

ПараметрОписТип
clicks
Об’єкт із параметрами, пов’язаними з модулем кліків:
object
var app = new Techno4({
  clicks: {
    externalLinks: '.external',
  }
})

{
ПараметрЗа замовчуваннямОписТип
externalLinks
'.external'
Селектор CSS для посилань, які слід розглядати як зовнішні та не повинні оброблятися Techno4. Наприклад, таке значення '.external' відповідатиме таким посиланням, як <a href="/somepage.html" class="external"> (з класом "external")
string
}

Touch Module параметри

ПараметрОписТип
touch
Об'єкт з параметрами сенсорного модуля:
object
var app = new Techno4({
  touch: {
    tapHold: true,
  }
})
{
ПараметрЗа замовчуваннямОписТип
touchClicksDistanceThreshold
5
Порогове значення відстані (у пікселях), щоб запобігти (випадковим) коротким свайпам. Отже, якщо відстань торкання/переміщення більша за це значення, «клацання» не буде активовано.
number
disableContextMenu
false
Установіть значення true, щоб вимкнути контекстне меню (клацніть правою кнопкою миші або натисніть і утримуйте)
Boolean
tapHold
false
Вмикає утримання натискання
boolean
tapHoldDelay
750
Визначає, як довго (у мс) користувач повинен утримувати натискання, перш ніж подія taphold буде запущена на цільовому елементі
number
tapHoldPreventClicks
true
Якщо ввімкнено (за замовчуванням), подія “клік” не запускатиметься після події “утримання дотику” taphold
boolean
activeState
true
Якщо ввімкнено, застосунок додасть клас activestate до поточного елемента (:active).
boolean
activeStateElements
a, button, label,

span, .actions-button,

.stepper-button,

.stepper-button-plus,

.stepper-button-minus,

.card-expandable,

.menu-item,

.link, .item-link,

.accordion-item-toggle

Селектор CSS елементів, де ввімкнено activeState, додасть відповідний активний клас
string
activeStateOnMouseMove
false
Коли ввімкнено, він зберігає «активний стан» під час руху миші
boolean
iosTouchRipple
false
Вмикає ефект “хвилі дотику” для теми iOS
boolean
mdTouchRipple
true
Вмикає ефект “хвилі дотику” для теми MD
boolean
auroraTouchRipple
false
Вмикає ефект хвилі дотику для теми Aurora.
boolean
touchRippleElements
.ripple, .link,

.item-link, .list-button,

.links-list a, .button,

button, .input-clear-button,

.dialog-button, .tab-link,

.item-radio, .item-checkbox,

.actions-button,

.searchbar-disable-button,

.fab a, .checkbox, .radio,

.data-table

.sortable-cell:not(.input-cell),

.notification-close-button,

.stepper-button,

.stepper-button-minus,

.stepper-button-plus,

.menu-item-content,

.list.accordion-list

.accordion-item-toggle

CSS-селектор елементів для застосування ефекту хвилі дотику під час натискання
string
touchRippleInsetElements
.ripple-inset,

.icon-only,

.searchbar-disable-button,

.input-clear-button,

.notification-close-button,

.md .navbar .link.back

CSS-селектор елементів для застосування ефекту хвилі дотику під час натискання
string
}
ПараметрОписТип
serviceWorker
Об'єкт з параметрами модуля service worker:
object
var app = new Techno4({
  serviceWorker: {
    path: './service-worker.js',
    scope: '/',
  }
})
{
ПараметрОписТип
path
Шлях до файлу service worker
string
scope
Шлях до сфери обслуговування Worker
string
}
Це параметри застосунку за замовчуванням для основного модуля застосунку.

Більшість компонентів, які мають JavaScript API, можуть розширити цей список параметрів за допомогою властивості, названої як компонент.

Наприклад, компонент Panel розширює параметри застосунку за допомогою властивості ‘panel’, яка приймає спеціальні параметри Panel.

Приклад:

var app = new Techno4({
  id: 'com.myapp.test',
  // Extended by Panel component:
  panel: {
    swipe: true,
    visibleBreakpoint: 1024,
  },
  // Extended by Dialog component:
  dialog: {
    title: 'My App',
  },
  // Extended by Statusbar component:
  statusbar: {
    iosOverlaysWebview: true,
  },
});

Методи та властивості застосунку

Повернений екземпляр застосунку Techno4 містить багато корисних властивостей і методів:

Властивості

Властивість Опис
app.id
Ідентифікатор застосунку, переданий у параметрах
app.name
Назва застосунку передана в параметрах
app.version
Версія застосунку
app.routes
Маршрути застосунку
app.language
Мова застосунку
app.el
Кореневий HTML-елемент застосунку
app.$el
Екземпляр Dom7 з кореневим елементом HTML застосунку
app.rtl
Логічна властивість, яка вказує на те, що застосунок має макет RTL чи ні
app.theme
Рядок із поточною темою застосунку. Може бути md, ios або aurora
app.darkMode
Логічна властивість, яка вказує, чи активна темна тема. Ця властивість діє лише тоді, коли ввімкнено autoDarkMode
app.width
Ширина застосунку в пікселях
app.height
Висота застосунку в пікселях
app.left
Зміщення додатка вліво в пікселях
app.top
Верхнє зміщення застосунку в пікселях
app.initialized
Логічна властивість, яка вказує, що застосунок ініціалізований чи ні
app.$
Псевдонім Dom7
app.params
Параметри застосунку
app.support
Об’єкт із властивостями щодо підтримуваних функцій. Перевірте розділ Службові застосунки підтримки
app.device
Об'єкт із властивостями про пристрій. Перевірте розділ «Утиліти пристрою».
app.utils
Об'єкт з деякими корисними утилітами. Перевірте розділ "Утиліти"
app.request
Містить методи роботи із запитами XHR. Перевірте розділ «Запит утиліт».
app.serviceWorker.container
Контейнер Service Worker (navigator.serviceWorker)
app.serviceWorker.registrations
Масив із зареєстрованими Service Worker
app.online
Логічна властивість індикації стану підключення застосунку. (true, якщо онлайн)

Методи

МетодОпис
app.enableAutoDarkMode()
Вмикає автоматичне визначення темної теми
app.disableAutoDarkMode()
Вимикає автоматичне визначення темної теми
app.on(event, handler)
Додати обробник подій
app.once(event, handler)
Додати обробник подій, який буде видалено після запуску
app.off(event, handler)
Видалити обробник подій
app.off(event)
Видалити всі обробники для вказаної події
app.emit(event, ...args)
Запуск події за певних умов
app.init()
ініціалізувати застосунок. Якщо ви вимкнули автоматичну ініціалізацію за допомогою параметра init: false
app.serviceWorker.register(path, scope)
Реєстрація service worker. Він повертає promise, яка буде вирішена за допомогою ServiceWorkerRegistration
app.serviceWorker.unregister(registration)
Скасувати реєстрацію service worker. Він повертає promise, яка буде вирішена, коли Service Worker скасує реєстрацію.
Так само як і з параметрами застосунку, більшість компонентів, які мають JavaScript API, можуть розширювати цей список властивостей за допомогою властивості, названої як компонент. Наприклад, компонент Panel розширює властивості екземпляра застосунку властивістю panel, яка приймає специфічні властивості та методи Panel.

Приклад:

// Open panel
app.panel.open('left');

// Hide statusbar
app.statusbar.hide();

Події застосунку

Екземпляр застосунку видає такі основні події:
ПодіяАргументОпис
init
Подія буде запущена під час ініціалізації застосунку. Автоматично після new Techno4() або після app.init(), якщо ви вимкнули автоматичну ініціалізацію.
resize
Подія буде запущена при зміні розміру застосунку (розмір вікна).
orientationchange
Подія буде запущена при зміні орієнтації застосунку (зміна орієнтації вікна).
click
(event)
Подія запускається після кліку в програмі
touchstart:active
(event)
Подія запускатиметься під час запуску дотиком (mousedown). Подія додана як активний слухач (можна запобігти за замовчуванням)
touchmove:active
(event)
Подія запускатиметься під час переміщення дотиком (mousemove) подія, додана як активний слухач (можна запобігти за умовчанням)
touchend:active
(event)
Подія запускатиметься під час торкання (mouseup), доданого як активного слухача (можна запобігти за умовчанням)
touchstart:passive
(event)
Подія запускатиметься під час дотику (mousedown). Подія додана як пасивний слухач (неможливо запобігти за умовчанням)
touchmove:passive
(event)
Подія запускатиметься під час переміщення дотиком (mousemove). Подія додана як пасивний слухач (неможливо запобігти за умовчанням)
touchend:passive
(event)
Подія запускатиметься під час торкання (mouseup). Подія додана як пасивний слухач (неможливо запобігти за умовчанням)
serviceWorkerRegisterSuccess
(registration)
Подія буде ініційована після успішної реєстрації Service Worker
serviceWorkerRegisterError
(error)
Подія буде ініційована, коли не вдасться зареєструвати Service Worker
serviceWorkerUnregisterSuccess
(registration)
Подія буде ініційована, коли Service Worker успішно скасує реєстрацію.
serviceWorkerUnregisterError
(registration, error)
Подія буде ініційована, коли не вдалося скасувати реєстрацію Service Worker
online
Подія буде запущена, коли застосунок підключиться до мережі
offline
Подія буде запущена, коли застосунок перейде в автономний режим
connection
(isOnline)
Подія буде запущена при зміні стану мережі
darkModeChange
(isDarkTheme)
Подію буде запущено після зміни бажаної колірної схеми пристрою. Він діє лише тоді, коли ввімкнено autoDarkMode
І знову ж таки, більшість компонентів, які мають JavaScript API, можуть розширювати цей список подій, як-от компонент Panel також запускатиме додаткові події в екземплярі застосунку.

Приклади:

app.on('panelOpen', function (panel) {
  console.log('Panel ' + panel.side + ' opened');
});

app.on('connection', function (isOnline) {
  if (isOnline) {
    console.log('app is online now')
  } else {
    console.log('app is offline now')
  }
});

app.on('darkModeChange', function (isDark) {
  if (isDark) {
    console.log('color scheme changed to Dark')
  } else {
    console.log('color scheme changed to Light')
  }
});

Змінні CSS

:root {
  --t4-theme-color: #007aff;
  --t4-theme-color-rgb: 0, 122, 255;
  --t4-theme-color-shade: #0066d6;
  --t4-theme-color-tint: #298fff;
  --t4-safe-area-left: 0px;
  --t4-safe-area-right: 0px;
  --t4-safe-area-top: 0px;
  --t4-safe-area-bottom: 0px;
  --t4-safe-area-outer-left: 0px;
  --t4-safe-area-outer-right: 0px;
  --t4-device-pixel-ratio: 1;
}
@supports (left: env(safe-area-inset-left)) {
  :root {
    --t4-safe-area-top: env(safe-area-inset-top);
    --t4-safe-area-bottom: env(safe-area-inset-bottom);
  }
  :root .ios-left-edge,
  :root .ios-edges,
  :root .safe-area-left,
  :root .safe-areas,
  :root .popup,
  :root .sheet-modal,
  :root .panel-left {
    --t4-safe-area-left: env(safe-area-inset-left);
    --t4-safe-area-outer-left: env(safe-area-inset-left);
  }
  :root .ios-right-edge,
  :root .ios-edges,
  :root .safe-area-right,
  :root .safe-areas,
  :root .popup,
  :root .sheet-modal,
  :root .panel-right {
    --t4-safe-area-right: env(safe-area-inset-right);
    --t4-safe-area-outer-right: env(safe-area-inset-right);
  }
  :root .no-safe-areas,
  :root .no-safe-area-left,
  :root .no-ios-edges,
  :root .no-ios-left-edge {
    --t4-safe-area-left: 0px;
    --t4-safe-area-outer-left: 0px;
  }
  :root .no-safe-areas,
  :root .no-safe-area-right,
  :root .no-ios-edges,
  :root .no-ios-right-edge {
    --t4-safe-area-right: 0px;
    --t4-safe-area-outer-right: 0px;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  :root {
    --t4-device-pixel-ratio: 2;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  :root {
    --t4-device-pixel-ratio: 3;
  }
}
/*====================
  Fonts & Bars
  ==================== */
:root {
  --t4-font-size: 14px;
  /*
  --t4-bars-link-color: var(--t4-theme-color);
  */
  --t4-bars-bg-image: none;
  --t4-bars-translucent-opacity: 0.8;
  --t4-bars-translucent-blur: 20px;
  --t4-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  --t4-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  --t4-bars-text-color: #000;
  --t4-bars-bg-color: #t4t4f8;
  --t4-bars-bg-color-rgb: 247, 247, 248;
}
:root .dark,
:root.dark {
  --t4-bars-text-color: #fff;
}
.ios {
  --t4-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  --t4-line-height: 1.4;
  --t4-text-color: #000;
  --t4-bars-border-color: rgba(0, 0, 0, 0.25);
}
.ios .dark,
.ios.dark {
  --t4-text-color: #fff;
  --t4-bars-bg-color: #121212;
  --t4-bars-bg-color-rgb: 19, 19, 19;
  --t4-bars-border-color: rgba(255, 255, 255, 0.1);
}
.md {
  --t4-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  --t4-line-height: 1.5;
  --t4-bars-border-color: transparent;
  --t4-text-color: #212121;
}
.md .dark,
.md.dark {
  --t4-text-color: rgba(255, 255, 255, 0.87);
  --t4-bars-bg-color: #202020;
}
.aurora {
  --t4-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  --t4-line-height: 1.5;
  --t4-text-color: #000;
  --t4-bars-border-color: rgba(0, 0, 0, 0.2);
}
.aurora .dark,
.aurora.dark {
  --t4-text-color: #fff;
  --t4-bars-bg-color: #202020;
  --t4-bars-border-color: rgba(255, 255, 255, 0.1);
}