TypeScript katamari.Singleton類代碼示例

const create = function (platform, mask) {

  const meta = MetaViewport.tag();
  const androidApi = Singleton.api();

  const androidEvents = Singleton.api();

  const enter = function () {
    mask.hide();

    Class.add(platform.container, Styles.resolve('fullscreen-maximized'));
    Class.add(platform.container, Styles.resolve('android-maximized'));
    meta.maximize();

    /// TM-48 Prevent browser refresh by swipe/scroll on android devices
    Class.add(platform.body, Styles.resolve('android-scroll-reload'));

    androidApi.set(
      AndroidSetup.setup(platform.win, PlatformEditor.getWin(platform.editor).getOrDie('no'))
    );

    PlatformEditor.getActiveApi(platform.editor).each(function (editorApi) {
      Thor.clobberStyles(platform.container, editorApi.body());
      androidEvents.set(
        AndroidEvents.initEvents(editorApi, platform.toolstrip, platform.alloy)
      );
    });
  };

  const exit = function () {
    meta.restore();
    mask.show();
    Class.remove(platform.container, Styles.resolve('fullscreen-maximized'));
    Class.remove(platform.container, Styles.resolve('android-maximized'));
    Thor.restoreStyles();

    /// TM-48 re-enable swipe/scroll browser refresh on android
    Class.remove(platform.body, Styles.resolve('android-scroll-reload'));

    androidEvents.clear();

    androidApi.clear();
  };

  return {
    enter,
    exit
  };
};

 FieldSchema.state('state', function () {
   return {
     dialogSwipeState: Singleton.value(),
     currentScreen: Cell(0)
   };
 })

export default function (scrollIntoView: () => void) {
  const alloy = OuterContainer({
    classes: [ Styles.resolve('android-container') ]
  }) as Gui.GuiSystem;

  const toolbar = ScrollingToolbar();

  const webapp = Singleton.api<MobileWebApp>();

  const switchToEdit = CommonRealm.makeEditSwitch(webapp);

  const socket = CommonRealm.makeSocket() as ComponentApi.AlloyComponent;

  const dropup = Dropup.build(Fun.noop, scrollIntoView);

  alloy.add(toolbar.wrapper());
  alloy.add(socket);
  alloy.add(dropup.component());

  const setToolbarGroups = function (rawGroups) {
    const groups = toolbar.createGroups(rawGroups);
    toolbar.setGroups(groups);
  };

  const setContextToolbar = function (rawGroups) {
    const groups = toolbar.createGroups(rawGroups);
    toolbar.setContextToolbar(groups);
  };

  // You do not always want to do this.
  const focusToolbar = function () {
    toolbar.focus();
  };

  const restoreToolbar = function () {
    toolbar.restoreToolbar();
  };

  const init = function (spec) {
    webapp.set(
      AndroidWebapp.produce(spec)
    );
  };

  const exit = function () {
    webapp.run(function (w) {
      w.exit();
      Replacing.remove(socket, switchToEdit);
    });
  };

  const updateMode = function (readOnly) {
    CommonRealm.updateMode(socket, switchToEdit, readOnly, alloy.root());
  };

  return {
    system: Fun.constant(alloy),
    element: alloy.element as () => SugarElement,
    init,
    exit,
    setToolbarGroups,
    setContextToolbar,
    focusToolbar,
    restoreToolbar,
    updateMode,
    socket: Fun.constant(socket),
    dropup: Fun.constant(dropup)
  } as MobileRealm;
}

const create = function (platform, mask) {
  const meta = MetaViewport.tag();

  const priorState = Singleton.value();
  const scrollEvents = Singleton.value();

  const iosApi = Singleton.api();
  const iosEvents = Singleton.api();

  const enter = function () {
    mask.hide();
    const doc = Element.fromDom(document);
    PlatformEditor.getActiveApi(platform.editor).each(function (editorApi) {
      // TODO: Orientation changes.
      // orientation = Orientation.onChange();

      priorState.set({
        socketHeight: Css.getRaw(platform.socket, 'height'),
        iframeHeight: Css.getRaw(editorApi.frame(), 'height'),
        outerScroll: document.body.scrollTop
      });

      scrollEvents.set({
        // Allow only things that have scrollable class to be scrollable. Without this,
        // the toolbar scrolling gets prevented
        exclusives: Scrollables.exclusive(doc, '.' + Scrollable.scrollable())
      });

      Class.add(platform.container, Styles.resolve('fullscreen-maximized'));
      Thor.clobberStyles(platform.container, editorApi.body());
      meta.maximize();

      /* NOTE: Making the toolbar scrollable is now done when the middle group is created */

      Css.set(platform.socket, 'overflow', 'scroll');
      Css.set(platform.socket, '-webkit-overflow-scrolling', 'touch');

      Focus.focus(editorApi.body());

      const setupBag = Struct.immutableBag([
        'cWin',
        'ceBody',
        'socket',
        'toolstrip',
        'toolbar',
        'dropup',
        'contentElement',
        'cursor',
        'keyboardType',
        'isScrolling',
        'outerWindow',
        'outerBody'
      ], []);

      iosApi.set(
        IosSetup.setup(setupBag({
          cWin: editorApi.win(),
          ceBody: editorApi.body(),
          socket: platform.socket,
          toolstrip: platform.toolstrip,
          toolbar: platform.toolbar,
          dropup: platform.dropup.element(),
          contentElement: editorApi.frame(),
          cursor: Fun.noop,
          outerBody: platform.body,
          outerWindow: platform.win,
          keyboardType: IosKeyboard.stubborn,
          isScrolling () {
            return scrollEvents.get().exists(function (s) {
              return s.socket.isScrolling();
            });
          }
        }))
      );

      iosApi.run(function (api) {
        api.syncHeight();
      });

      iosEvents.set(
        IosEvents.initEvents(editorApi, iosApi, platform.toolstrip, platform.socket, platform.dropup)
      );
    });
  };

  const exit = function () {
    meta.restore();
    iosEvents.clear();
    iosApi.clear();

    mask.show();

    priorState.on(function (s) {
      s.socketHeight.each(function (h) {
        Css.set(platform.socket, 'height', h);
      });
      s.iframeHeight.each(function (h) {
        Css.set(platform.editor.getFrame(), 'height', h);
      });
      document.body.scrollTop = s.scrollTop;
//.........這裏部分代碼省略.........

export default function (scrollIntoView?) { // unsure if this should be optional?
  const alloy = OuterContainer({
    classes: [ Styles.resolve('ios-container') ]
  });

  const toolbar = ScrollingToolbar();

  const webapp = Singleton.api();

  const switchToEdit = CommonRealm.makeEditSwitch(webapp);

  const socket = CommonRealm.makeSocket();

  const dropup = Dropup.build(function () {
    webapp.run(function (w) {
      w.refreshStructure();
    });
  }, scrollIntoView);

  alloy.add(toolbar.wrapper());
  alloy.add(socket);
  alloy.add(dropup.component());

  const setToolbarGroups = function (rawGroups) {
    const groups = toolbar.createGroups(rawGroups);
    toolbar.setGroups(groups);
  };

  const setContextToolbar = function (rawGroups) {
    const groups = toolbar.createGroups(rawGroups);
    toolbar.setContextToolbar(groups);
  };

  const focusToolbar = function () {
    toolbar.focus();
  };

  const restoreToolbar = function () {
    toolbar.restoreToolbar();
  };

  const init = function (spec) {
    webapp.set(
      IosWebapp.produce(spec)
    );
  };

  const exit = function () {
    webapp.run(function (w) {
      Replacing.remove(socket, switchToEdit);
      w.exit();
    });
  };

  const updateMode = function (readOnly) {
    CommonRealm.updateMode(socket, switchToEdit, readOnly, alloy.root());
  };

  return {
    system: Fun.constant(alloy),
    element: alloy.element,
    init,
    exit,
    setToolbarGroups,
    setContextToolbar,
    focusToolbar,
    restoreToolbar,
    updateMode,
    socket: Fun.constant(socket),
    dropup: Fun.constant(dropup)
  };
}