@nemo.travel/websky-utils

0.0.27 • Public • Published

В модуле содержится две директивы 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.

Readme

Keywords

none

Package Sidebar

Install

npm i @nemo.travel/websky-utils

Weekly Downloads

1

Version

0.0.27

License

none

Unpacked Size

225 kB

Total Files

19

Last publish

Collaborators

  • p.naumov
  • bookler96
  • evgenylitvinenko-nemo