OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:45:48 AM	rwxr-xr-x
📄 AndroidRealm.ts	2.43 KB	02/20/2020 06:32:39 AM	rw-r--r--
📄 Buttons.ts	2.4 KB	02/20/2020 06:32:40 AM	rw-r--r--
📄 ColorSlider.ts	3.21 KB	02/20/2020 06:32:40 AM	rw-r--r--
📄 CommonRealm.ts	1.49 KB	02/20/2020 06:32:41 AM	rw-r--r--
📄 Dropup.ts	2.38 KB	02/20/2020 06:32:41 AM	rw-r--r--
📄 FontSizeSlider.ts	1.34 KB	02/20/2020 06:32:42 AM	rw-r--r--
📄 HeadingSlider.ts	1.63 KB	02/20/2020 06:32:42 AM	rw-r--r--
📄 ImagePicker.ts	2.13 KB	02/20/2020 06:32:43 AM	rw-r--r--
📄 Inputs.ts	2.86 KB	02/20/2020 06:32:43 AM	rw-r--r--
📄 IosRealm.ts	2.65 KB	02/20/2020 06:32:44 AM	rw-r--r--
📄 LinkButton.ts	2.33 KB	02/20/2020 06:32:45 AM	rw-r--r--
📄 OuterContainer.ts	953 bytes	02/20/2020 06:32:45 AM	rw-r--r--
📄 SerialisedDialog.ts	8.2 KB	02/20/2020 06:32:46 AM	rw-r--r--
📄 SizeSlider.ts	2.32 KB	02/20/2020 06:32:46 AM	rw-r--r--
📄 StylesMenu.ts	6.51 KB	02/20/2020 06:32:47 AM	rw-r--r--
📄 ToolbarWidgets.ts	645 bytes	02/20/2020 06:32:47 AM	rw-r--r--

Editing: SerialisedDialog.ts

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */

import {
    AddEventsBehaviour, AlloyEvents, AlloyTriggers, Behaviour, Button, Container, Disabling, Form,
    Highlighting, Keying, Memento, NativeEvents, Representing
} from '@ephox/alloy';
import { FieldSchema, ValueSchema } from '@ephox/boulder';
import { Arr, Cell, Option, Singleton } from '@ephox/katamari';
import { Css, SelectorFilter, SelectorFind, Width } from '@ephox/sugar';

import Receivers from '../channels/Receivers';
import SwipingModel from '../model/SwipingModel';
import Styles from '../style/Styles';
import * as UiDomFactory from '../util/UiDomFactory';

const sketch = function (rawSpec) {
  const navigateEvent = 'navigateEvent';

const wrapperAdhocEvents = 'serializer-wrapper-events';
  const formAdhocEvents = 'form-events';

const schema = ValueSchema.objOf([
    FieldSchema.strict('fields'),
    // Used for when datafields are present.
    FieldSchema.defaulted('maxFieldIndex', rawSpec.fields.length - 1),
    FieldSchema.strict('onExecute'),
    FieldSchema.strict('getInitialValue'),
    FieldSchema.state('state', function () {
      return {
        dialogSwipeState: Singleton.value(),
        currentScreen: Cell(0)
      };
    })
  ]);

const spec = ValueSchema.asRawOrDie('SerialisedDialog', schema, rawSpec);

const reposition = function (dialog, message) {
    SelectorFind.descendant(dialog.element(), '.' + Styles.resolve('serialised-dialog-chain')).each(function (parent) {
      Css.set(parent, 'left', (-spec.state.currentScreen.get() * message.width) + 'px');
    });
  };

// Unfortunately we need to inspect the DOM to find the input that is currently on screen
  const focusInput = function (dialog) {
    const inputs = SelectorFilter.descendants(dialog.element(), 'input');
    const optInput = Option.from(inputs[spec.state.currentScreen.get()]);
    optInput.each(function (input) {
      dialog.getSystem().getByDom(input).each(function (inputComp) {
        AlloyTriggers.dispatchFocus(dialog, inputComp.element());
      });
    });
    const dotitems = memDots.get(dialog);
    Highlighting.highlightAt(dotitems, spec.state.currentScreen.get());
  };

const resetState = function () {
    spec.state.currentScreen.set(0);
    spec.state.dialogSwipeState.clear();
  };

formBehaviours: Behaviour.derive([
          Receivers.orientation(function (dialog, message) {
            reposition(dialog, message);
          }),
          Keying.config({
            mode: 'special',
            focusIn (dialog/*, specialInfo */) {
              focusInput(dialog);
            },
            onTab (dialog/*, specialInfo */) {
              navigate(dialog, +1);
              return Option.some(true);
            },
            onShiftTab (dialog/*, specialInfo */) {
              navigate(dialog, -1);
              return Option.some(true);
            }
          }),

AddEventsBehaviour.config(formAdhocEvents, [
            AlloyEvents.runOnAttached(function (dialog, simulatedEvent) {
              // Reset state to first screen.
              resetState();
              const dotitems = memDots.get(dialog);
              Highlighting.highlightFirst(dotitems);
              spec.getInitialValue(dialog).each(function (v) {
                Representing.setValue(dialog, v);
              });
            }),

AlloyEvents.runOnExecute(spec.onExecute),

AlloyEvents.run(NativeEvents.transitionend(), function (dialog, simulatedEvent) {
              const event = simulatedEvent.event() as any;
              if (event.raw().propertyName === 'left') {
                focusInput(dialog);
              }
            }),

AlloyEvents.run(navigateEvent, function (dialog, simulatedEvent) {
              const event = simulatedEvent.event() as any;
              const direction = event.direction();
              navigate(dialog, direction);
            })
          ])
        ])
      };
    })
  );

const memDots = Memento.record({
    dom: UiDomFactory.dom('<div class="${prefix}-dot-container"></div>'),
    behaviours: Behaviour.derive([
      Highlighting.config({
        highlightClass: Styles.resolve('dot-active'),
        itemClass: Styles.resolve('dot-item')
      })
    ]),
    components: Arr.bind(spec.fields, function (_f, i) {
      return i <= spec.maxFieldIndex ? [
        UiDomFactory.spec('<div class="${prefix}-dot-item ${prefix}-icon-full-dot ${prefix}-icon"></div>')
      ] : [];
    })
  });

return {
    dom: UiDomFactory.dom('<div class="${prefix}-serializer-wrapper"></div>'),
    components: [
      memForm.asSpec(),
      memDots.asSpec()
    ],

behaviours: Behaviour.derive([
      Keying.config({
        mode: 'special',
        focusIn (wrapper) {
          const form = memForm.get(wrapper);
          Keying.focusIn(form);
        }
      }),

AddEventsBehaviour.config(wrapperAdhocEvents, [
        AlloyEvents.run(NativeEvents.touchstart(), function (wrapper, simulatedEvent) {
          const event = simulatedEvent.event() as any;
          spec.state.dialogSwipeState.set(
            SwipingModel.init(event.raw().touches[0].clientX)
          );
        }),
        AlloyEvents.run(NativeEvents.touchmove(), function (wrapper, simulatedEvent) {
          const event = simulatedEvent.event() as any;
          spec.state.dialogSwipeState.on(function (state) {
            simulatedEvent.event().prevent();
            spec.state.dialogSwipeState.set(
              SwipingModel.move(state, event.raw().touches[0].clientX)
            );
          });
        }),
        AlloyEvents.run(NativeEvents.touchend(), function (wrapper/*, simulatedEvent */) {
          spec.state.dialogSwipeState.on(function (state) {
            const dialog = memForm.get(wrapper);
            // Confusing
            const direction = -1 * SwipingModel.complete(state);
            navigate(dialog, direction);
          });
        })
      ])
    ])
  };
};

export {
  sketch
};