TypeScript Traverse.owner方法代碼示例

 const toDomRange = function (range) {
   const doc = Traverse.owner(range.start());
   const rng = doc.dom().createRange();
   rng.setStart(range.start().dom(), range.soffset());
   rng.setEnd(range.finish().dom(), range.foffset());
   return rng;
 };

const getGreenzone = function (socket, dropup) {
  const outerWindow = Traverse.owner(socket).dom().defaultView;
  // Include the dropup for this calculation because it represents the total viewable height.
  const viewportHeight = Height.get(socket) + Height.get(dropup);
  const acc = accountableKeyboardHeight(outerWindow);
  return viewportHeight - acc;
};

const deriveViewportHeight = function (viewport, toolbarHeight, dropupHeight) {
  // Note, Mike thinks this value changes when the URL address bar grows and shrinks. If this value is too high
  // the main problem is that scrolling into the greenzone may not scroll into an area that is viewable. Investigate.
  const outerWindow = Traverse.owner(viewport).dom().defaultView;
  const winH = outerWindow.innerHeight;
  Attr.set(viewport, windowSizeData, winH + 'px');
  return winH - toolbarHeight - dropupHeight;
};

const sTriggerEventOnFocused = (label, component, eventName) => Logger.t(
  'DomSteps.sTriggerEventOnFocused(' + eventName + '): ' + label,
  Chain.asStep(Traverse.owner(component.element()), [
    FocusTools.cGetFocused,
    Chain.binder((focused) => component.getSystem().getByDom(focused)),
    Chain.op((input) => AlloyTriggers.emit(input, eventName))
  ])
);

const moveWindowScroll = function (toolbar, viewport, destY) {
  const outerWindow = Traverse.owner(toolbar).dom().defaultView;
  return Future.nu(function (callback) {
    updateTop(toolbar, destY);
    updateTop(viewport, destY);
    outerWindow.scrollTo(0, destY);
    callback(destY);
  });
};

    function (realm, apis, toolbar, socket, buttons, onSuccess, onFailure) {

      const sSetP1 = apis.sSetSelection([ 0, 0, 0 ], 'Thi'.length, [ 0, 0, 0 ], 'Thi'.length);
      const sSetP2 = apis.sSetSelection([ 1, 0 ], 'Norma'.length, [ 1, 0 ], 'Norma'.length);
      const sSetP3 = apis.sSetSelection([ 2, 0, 0 ], 'Bu'.length, [ 2, 0, 0 ], 'Bu'.length);

      const sCheckComponent = function (label, state) {
        return function (memento) {
          return TestUi.sWaitForToggledState(label, state, realm, memento);
        };
      };

      const sCheckLists = function (situation, stateOfNumlist, stateOfBullist) {
        return GeneralSteps.sequence([
          sCheckComponent('checking numlist: ' + situation, stateOfNumlist)(buttons.numlist),
          sCheckComponent('checking bullist: ' + situation, stateOfBullist)(buttons.bullist)
        ]);
      };

      const sCheckInNumlist = function (situation) {
        return sCheckLists(situation, true, false);
      };

      const sCheckInBullist = function (situation) {
        return sCheckLists(situation, false, true);
      };

      const sCheckInNoList = function (situation) {
        return sCheckLists(situation, false, false);
      };

      const sCheckP1 = function (situation) {
        return GeneralSteps.sequence([
          sSetP1,
          sCheckInNumlist(situation)
        ]);
      };

      const sCheckP2 = function (situation) {
        return GeneralSteps.sequence([
          sSetP2,
          sCheckInNoList(situation)
        ]);
      };

      const sCheckP3 = function (situation) {
        return GeneralSteps.sequence([
          sSetP3,
          sCheckInBullist(situation)
        ]);
      };

      Pipeline.async({}, [
        GuiSetup.mAddStyles(Traverse.owner(body), [
          '.tinymce-mobile-toolbar-button { padding: 2px; border: 1px solid black; background: white; }',
          '.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected { background: #cadbee; }',
          '.tinymce-mobile-icon-unordered-list:before { content: "ul"; }',
          '.tinymce-mobile-icon-ordered-list:before { content: "ol"; }'
        ]),
        apis.sFocus,
        apis.sSetContent(
          '<ol><li>This is an ordered list</li></ol><p>Normal paragraph</p><ul><li>Bullet list</li></ul>'
        ),
        sCheckP1('initial selection in ol'),
        sCheckP2('ol >>> p'),
        sCheckP3('p >>> ul'),
        sCheckP1('ul >>> ol'),

        TestUi.sClickComponent(realm, buttons.bullist),
        sCheckInBullist('ol converted to ul'),
        TestUi.sClickComponent(realm, buttons.numlist),
        sCheckInNumlist('ul converted back to ol'),
        TestUi.sClickComponent(realm, buttons.numlist),
        sCheckInNoList('ol converted to p'),
        GuiSetup.mRemoveStyles
      ], onSuccess, onFailure);
    }

UnitTest.asynctest('Browser Test: ui.SerialisedLinkTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const detection = PlatformDetection.detect();

  const realm = IosRealm();
  // Make toolbar appear
  Class.add(realm.system().element(), 'tinymce-mobile-fullscreen-maximized');

  const body = Body.body();
  Attachment.attachSystem(body, realm.system());

  const doc = Traverse.owner(body);

  TestStyles.addStyles();

  const unload = function () {
    TestStyles.removeStyles();
    Attachment.detachSystem(realm.system());
  };

  const tEditor = TestEditor();

  realm.setToolbarGroups([
    {
      label: 'group1',
      items: [
        LinkButton.sketch(realm, tEditor.editor())
      ]
    }
  ]);

  const sAssertNavigation = function (label, prevEnabled, nextEnabled) {
    return Logger.t(
      label,
      Step.sync(function () {
        const active = Focus.active().getOrDie();
        // The buttons are next and previous siblings
        const prev = Traverse.parent(active).bind(Traverse.prevSibling).getOrDie('Could not find button to left');
        const next = Traverse.parent(active).bind(Traverse.nextSibling).getOrDie('Could not find button to right');

        const assertNavButton = function (buttonLabel, expected, button) {
          Assertions.assertStructure(
            'Checking ' + buttonLabel + ' button should be enabled = ' + expected,
            ApproxStructure.build(function (s, str, arr) {
              return s.element('span', {
                attr: {
                  role: str.is('button')
                },
                classes: [
                  (expected ? arr.not : arr.has)('tinymce-mobile-toolbar-navigation-disabled')
                ]
              });
            }),
            button
          );
        };

        assertNavButton('previous', prevEnabled, prev);
        assertNavButton('next', nextEnabled, next);
      })
    );
  };

  const sClickNavigation = function (selector) {
    return Chain.asStep({ }, [
      TestUi.cGetFocused,
      TestUi.cGetParent,
      TestUi.cGetParent,
      UiFinder.cFindIn(selector),
      Mouse.cClick
    ]);
  };

  const sClickPrev = sClickNavigation('.tinymce-mobile-icon-previous');
  const sClickNext = sClickNavigation('.tinymce-mobile-icon-next');

  const sAssertUrlFocused = GeneralSteps.sequence([
    FocusTools.sTryOnSelector('Focus should be on input with link URL', doc, 'input[placeholder="Type or paste URL"]'),
    sAssertNavigation('Checking initial navigation on text node', false, true)
  ]);

  const sAssertTextFocused = GeneralSteps.sequence([
    FocusTools.sTryOnSelector('Focus should be on input with link text', doc, 'input[placeholder="Link text"]'),
    sAssertNavigation('Checking navigation for link text', true, true)
  ]);

  const sAssertTitleFocused = GeneralSteps.sequence([
    FocusTools.sTryOnSelector('Focus should be on input with link title', doc, 'input[placeholder="Link title"]'),
    sAssertNavigation('Checking navigation for link title', true, true)
  ]);

  const sAssertTargetFocused = GeneralSteps.sequence([
    FocusTools.sTryOnSelector('Focus should be on input with link target', doc, 'input[placeholder="Link target"]'),
    sAssertNavigation('Checking navigation for link target', true, false)
  ]);

  const sTestNavigation = GeneralSteps.sequence([
    Keyboard.sKeydown(doc, Keys.tab(), { }),
    sAssertTextFocused,
//.........這裏部分代碼省略.........

    function (realm, apis, toolbar, socket, buttons, onSuccess, onFailure) {

      const sSetS1 = apis.sSetSelection([ 0, 0 ], 'n'.length, [ 0, 0 ], 'n'.length);
      const sSetS2 = apis.sSetSelection([ 0, 1, 0 ], 'tin'.length, [ 0, 1, 0 ], 'tin'.length);

      const sCheckComponent = function (label, state) {
        return function (memento) {
          return TestUi.sWaitForToggledState(label, state, realm, memento);
        };
      };

      const sCheckS1 = function (situation) {
        return GeneralSteps.sequence([
          sSetS1,
          sCheckLink(situation, false)
        ]);
      };

      const sCheckS2 = function (situation) {
        return GeneralSteps.sequence([
          sSetS2,
          sCheckLink(situation, true)
        ]);
      };

      const sCheckLink = function (situation, expected) {
        return GeneralSteps.sequence([
          sCheckComponent(situation + ' (unlink state)', expected)(buttons.unlink),
          sCheckComponent(situation + ' (link state)', expected)(buttons.link)
        ]);
      };

      Pipeline.async({}, [
        GuiSetup.mAddStyles(Traverse.owner(body), [
          '.tinymce-mobile-toolbar-button { padding: 2px; border: 1px solid black; background: white; }',
          '.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected { background: #cadbee; }',
          '.tinymce-mobile-icon-unlink:before { content: "UNLINK"; }',
          '.tinymce-mobile-icon-link:before { content: "LINK"; }'
        ]),
        apis.sFocus,

        apis.sSetContent(
          '<p>no link <a href="www.tinymce.com">tinymce</a></p>'
        ),
        sCheckS1('initial selection in text'),
        sCheckS2('normal >>> link'),
        sCheckS1('link >>> normal'),
        apis.sAssertContentPresence({
          a: 1
        }),

        sSetS2,
        TestUi.sClickComponent(realm, buttons.unlink),
        apis.sAssertContentPresence({
          a: 0
        }),

        // Tinymce moves the cursor after an unlink, so return the selection to the same spot
        apis.sSetSelection([ 0, 1 ], 'for'.length, [ 0, 1 ], 'for'.length),
        sCheckLink('link should be removed', false),
        GuiSetup.mRemoveStyles
      ], onSuccess, onFailure);
    }

UnitTest.asynctest('Browser Test: ui.ButtonsTest', function (success, failure) {

  /*
   * PURPOSE
   *
   * There are three buttons. Two have toggling, and one toggling button has a custom action.
   * Ensure that they all fire the right actions and get updated appropriately based on broadcasts.
   */

  const realm = IosRealm(Fun.noop);

  const body = Body.body();
  Attachment.attachSystem(body, realm.system());

  // Make toolbar appear
  Class.add(realm.system().element(), 'tinymce-mobile-fullscreen-maximized');

  const doc = Traverse.owner(body);

  TestStyles.addStyles();

  const unload = function () {
    TestStyles.removeStyles();
    Attachment.detachSystem(realm.system());
  };

  /* The test editor puts execCommand and insertContent calls into the store */
  const tEditor = TestEditor();

  const memAlpha = Memento.record(
    Buttons.forToolbarCommand(tEditor.editor(), 'alpha')
  );

  const memBeta = Memento.record(
    Buttons.forToolbarStateCommand(tEditor.editor(), 'beta')
  );

  const memGamma = Memento.record(
    Buttons.forToolbarStateAction(tEditor.editor(), 'gamma-class', 'gamma-query', function () {
      tEditor.adder('gamma-action')();
    })
  );

  const sClickAlpha = TestUi.sClickComponent(realm, memAlpha);
  const sClickBeta = TestUi.sClickComponent(realm, memBeta);
  const sClickGamma = TestUi.sClickComponent(realm, memGamma);

  const sCheckComponent = function (label, state) {
    return function (memento) {
      return TestUi.sWaitForToggledState(label, state, realm, memento);
    };
  };

  realm.setToolbarGroups([
    {
      label: 'group1',
      items: [
        memAlpha.asSpec(),
        memBeta.asSpec(),
        memGamma.asSpec()
      ]
    }
  ]);

  /*
   * Alpha has no toggling, so just check that when the user clicks on the button, the
   * editor fires execCommand with alpha
   */
  const sTestAlpha = GeneralSteps.sequence([
    tEditor.sAssertEq('Initially empty', [ ]),
    sClickAlpha,
    tEditor.sAssertEq('After clicking on alpha', [
      {
        method: 'execCommand',
        data: {
          alpha: undefined
        }
      }
    ]),
    tEditor.sClear
  ]);

  /*
   * Beta has toggling, so check:
   *  - when the user clicks on the button, execCommand is fired
   *  - when the format change is broadcast, the toggled state changes
   */
  const sTestBeta = GeneralSteps.sequence([
    tEditor.sAssertEq('before beta, store is empty', [ ]),
    sClickBeta,
    tEditor.sAssertEq('After clicking on beta', [
      {
        method: 'execCommand',
        data: {
          beta: undefined
        }
      }
    ]),
    tEditor.sClear,
    sCheckComponent('Initially, beta should be unselected', false)(memBeta),
//.........這裏部分代碼省略.........