Компонент делает из плоского списка на входе, анимированную 3d гармошку. Декларативный JSX компонент, в котором также потребовалось динамически поддерживать обновление DOM, но делается это аккуратно.
Чтобы обойтись минимумом скриптов и использовать лишь CSS3 для расщёта самой анимации, каждая следующая секция списка рекурсивно вкладывается в предыдущую (блок с reduceRight). Таким образом то, что за “сгибом”, уже поворачивается всё вместе не распадаясь на части.
import { element } from 'deku'
Deprecated branch of ORGOS, restored for the link from StackOverflow answer
| import { element } from 'deku' | |
| import stateful from 'deku-stateful' | |
| import './styles' | |
| const log = debug('app:Tabs') | |
| function initialState() { | |
| return { | |
| activeTab: 0 | |
| } |
| <div class="first-test" ></div> | |
| <div class="second-test"></div> |
| window <<<< | |
| isGradient: -> (it |> /^\s*([a-z]+)\-gradient\(\s*(.*)\s*\)\s*$/gmi.exec)?[1] in <[ linear radial ]> | |
| toFixedOrInt: (precision, value)--> | |
| a={} | |
| power = 10 `Math.pow` (precision or 0) | |
| value = Math.round(value * power) / power | |
| rounded = value |> Math.round | |
| if rounded is value then value = rounded |
| # -*- mode: livescript -*- | |
| # | |
| # Log decorator | |
| # author: Peter | |
| # | |
| do -> | |
| module = angular.module \logDecorator, [] | |
| module.config [ | |
| \$provide |
| colorpickerContainerWidth = 192px | |
| paletteColorSize = 24px | |
| .color-container | |
| position fixed | |
| width colorpickerContainerWidth | |
| z-index 10000 | |
| padding 5px | |
| background: #f9f9f9 | |
| border 1px solid gray |
| angular.module \app.directives .directive \groupPadma, [ | |
| \$templateCache | |
| \Lang | |
| \$log | |
| ($templateCache, Lang,$log)-> | |
| restrict: \EA | |
| replace: yes | |
| transclude: no | |
| templateUrl: \group-padma-template | |
| priority: 10 |
| angular.module \app.directives .directive \selector, [ | |
| \$compile | |
| \$parse | |
| \$templateCache | |
| \$appScope | |
| \$timeout | |
| ($compile, $parse, $templateCache, $appScope, $timeout)-> | |
| restrict: \A | |
| templateUrl: \selector-template | |
| replace: true |