@nemo.travel/websky-utils
v0.0.27
Published
module for nemo websky customizations
Downloads
11
Keywords
Readme
В модуле содержится две директивы floating-labels
и replace-brand-props
Установка
yarn add @nemo.travel/webskyUtils
Подключение
Подключения модуля происходит в index.js таким образом
require('@nemo.travel/websky-utils');
angular.module('app').requires.push('webskyUtils');
floating-labels
на площадках вебская часто всплывала задача сделать плавающие лейблы на этапе ввода данных о пассажире. /#/passengers
Для этого приходилось переопределять экран /src/screens/passengers.html
При обновлении невозможно было просто скопировать верстку из новой версии и
вставить в наше переопределения этого экрана т.к. классы инпутов были изменены,
лейблы перенесены в вдругое место и т.д.
Была написана директива floating-labels которая добавляется passengers.html
<section class="out" ng-if="!vm.loading" floating-labels>
она делает следущее
- ожидает пока экран отрендерится
- собирает все div.inp имеющие примерно такую структуру:
div.inp>label.inp-label+input.textInp
и переделывает вdiv.inp-animate-outer>input.inp-animate-placeholder+label.inp-animate-label
- после чего добавляется css который делает лэйблы плавающими если на инпуте сфокусировались
replace-brand-props
Решает задачу динамического переопределения свойств бренда в зависимости от направления перелета/даты перелета (планируется введение новых возможностей) https://helpdesk.nemo.travel/issues/35785 https://helpdesk.nemo.travel/issues/43685 https://helpdesk.nemo.travel/issues/39896 https://helpdesk.nemo.travel/issues/44098
описание работы тут https://gitlab.nemo.travel/frontend/websky/websky-nordwind/merge_requests/15
далее эту директиву нужно вставить в
<order replace-brand-props order-info="vm.orderInfo"></order>
в search-order.html
`
<div
replace-brand-props
ng-if="vm.orderInfo && !vm.fatalError || vm.showBackButton"
class="content content-add-services"
>
` в add-services.html
<section class="out" ng-if="!vm.loading" replace-brand-props>
в booking.html
<section class="out" ng-if="!vm.loading" replace-brand-props>
в search.html
<section class="out" ng-if="!vm.loading" floating-labels replace-brand-props>
в passengers.html( тут используется наряду с директивой floating-labels)
пример есть в websky-nordwind.