TypeScript alloy.Focusing类代码示例

const makeCell = (row, col, labelId) => {
  const emitCellOver = (c) => AlloyTriggers.emitWith(c, cellOverEvent, {row, col} );
  const emitExecute = (c) => AlloyTriggers.emitWith(c, cellExecuteEvent, {row, col} );

  return GuiFactory.build({
    dom: {
      tag: 'div',
      attributes: {
        role: 'button',
        ['aria-labelledby']: labelId
      }
    },
    behaviours: Behaviour.derive([
      AddEventsBehaviour.config('insert-table-picker-cell', [
        AlloyEvents.run(NativeEvents.mouseover(), Focusing.focus),
        AlloyEvents.run(SystemEvents.execute(), emitExecute),
        AlloyEvents.run(SystemEvents.tapOrClick(), emitExecute)
      ]),
      Toggling.config({
        toggleClass: 'tox-insert-table-picker__selected',
        toggleOnExecute: false
      }),
      Focusing.config({onFocus: emitCellOver})
    ])
  });
};

export const renderHtmlPanel = (spec: HtmlPanelFoo): SketchSpec => {
  if (spec.presets === 'presentation') {
    return AlloyContainer.sketch({
      dom: {
        tag: 'div',
        classes: [ 'tox-form__group' ],
        innerHtml: spec.html
      }
    });
  } else {
    return AlloyContainer.sketch({
      dom: {
        tag: 'div',
        classes: [ 'tox-form__group' ],
        innerHtml: spec.html,
        attributes: {
          role: 'document'
        }
      },
      containerBehaviours: Behaviour.derive([
        Tabstopping.config({ }),
        Focusing.config({ })
      ])
    });
  }
};

const renderToolbarGroupCommon = (toolbarGroup: ToolbarGroup) => {
  const attributes = toolbarGroup.title.fold(() => {
    return {};
  },
    (title) => {
      return { attributes: { title } };
    });
  return {
    dom: {
      tag: 'div',
      classes: ['tox-toolbar__group'],
      ...attributes
    },

    components: [
      AlloyToolbarGroup.parts().items({})
    ],

    items: toolbarGroup.items,
    markers: {
      // nav within a group breaks if disabled buttons are first in their group so skip them
      itemSelector: '*:not(.tox-split-button) > .tox-tbtn:not([disabled]), .tox-split-button:not([disabled]), .tox-toolbar-nav-js:not([disabled])'
    },
    tgroupBehaviours: Behaviour.derive([
      Tabstopping.config({}),
      Focusing.config({})
    ])
  };
};

const renderSpinner = (providerBackstage: UiFactoryBackstageProviders): AlloySpec => {
  return {
    dom: {
      tag: 'div',
      attributes: {
        'aria-label': providerBackstage.translate('Loading...')
      },
      classes: [ 'tox-throbber__busy-spinner' ]
    },
    components: [
      {
        dom: DomFactory.fromHtml(`<div class="tox-spinner"><div></div><div></div><div></div></div>`)
      }
    ],
    behaviours: Behaviour.derive([
      // Trap the "Tab" key and don't let it escape.
      Keying.config({
        mode: 'special',
        onTab: () => Option.some(true),
        onShiftTab: () => Option.some(true)
      }),
      Focusing.config({ })
    ])
  };
};

  const makeSlider = (label: string, onChoose: (slider: AlloyComponent, thumb: AlloyComponent, value: SliderTypes.SliderValueX) => void, min: number, value: number, max: number): Memento.MementoRecord => {
    const labelPart = Slider.parts().label({
      dom: {
        tag: 'label',
        classes: ['tox-label'],
        innerHtml: providersBackstage.translate(label)
      }
    });

    const spectrum = Slider.parts().spectrum({
      dom: {
        tag: 'div',
        classes: ['tox-slider__rail'],
        attributes: {
          role: 'presentation'
        }
      }
    });

    const thumb = Slider.parts().thumb({
      dom: {
        tag: 'div',
        classes: ['tox-slider__handle'],
        attributes: {
          role: 'presentation'
        }
      }
    });

    return Memento.record(Slider.sketch({
      dom: {
        tag: 'div',
        classes: ['tox-slider'],
        attributes: {
          role: 'presentation'
        }
      },
      model: {
        mode: 'x',
        minX: min,
        maxX: max,
        getInitialValue: Fun.constant({ x: Fun.constant(value) })
      },
      components: [
        labelPart,
        spectrum,
        thumb
      ],
      sliderBehaviours: Behaviour.derive([
        Focusing.config({})
      ]),
      onChoose
    }));
  };

 const makeButton = (t) => {
   return {
     dom: {
       tag: 'span',
       innerHtml: t,
       // The '.tox-tbtn' class is here temporarily while we sort of the flow keying selector
       classes: [ 'test-toolbar-item', 'tox-tbtn' ]
     },
     behaviours: Behaviour.derive([
       Focusing.config({ })
     ])
   };
 };

  const onLeftOrRightInMenu = (comp: AlloyComponent, se: SimulatedEvent<SugarEvent>) => {
    // The originating dropdown is stored on the sandbox itself.
    const dropdown: AlloyComponent = Representing.getValue(comp);

    // Focus the dropdown. Current workaround required to make flow recognise the current focus
    Focusing.focus(dropdown);
    AlloyTriggers.emitWith(dropdown, 'keydown', {
      raw: se.event().raw()
    });

    // Close the dropdown
    AlloyDropdown.close(dropdown);

    return Option.some(true);
  };

  const open = (message: string, callback: (state: boolean) => void) => {

    const closeDialog = (state: boolean) => {
      ModalDialog.hide(confirmDialog);
      callback(state);
    };

    const memFooterYes = Memento.record(
      renderFooterButton({
        name: 'yes',
        text: 'Yes',
        primary: true,
        icon: Option.none()
      }, 'submit', sharedBackstage.providers)
    );

    const footerNo = renderFooterButton({
      name: 'no',
      text: 'No',
      primary: true,
      icon: Option.none()
    }, 'cancel', sharedBackstage.providers);

    const confirmDialog = GuiFactory.build(
      Dialogs.renderDialog({
        lazySink: () => sharedBackstage.getSink(),
        partSpecs: {
          title: Dialogs.pUntitled(),
          close: Dialogs.pClose(() => {
            closeDialog(false);
          }, sharedBackstage.providers),
          body: Dialogs.pBodyMessage(message, sharedBackstage.providers),
          footer: Dialogs.pFooter(Dialogs.pFooterGroup([], [
            footerNo,
            memFooterYes.asSpec()
          ]))
        },
        onCancel: () => closeDialog(false),
        onSubmit: () => closeDialog(true),
        extraClasses: [ 'tox-confirm-dialog' ]
      })
    );

    ModalDialog.show(confirmDialog);
    const footerYesButton = memFooterYes.get(confirmDialog);
    Focusing.focus(footerYesButton);
  };

 const factory = (newSpec: { uid: string }) => {
   return NavigableObject.craft(
     {
       // We need to use the part uid or the label and field won't be linked with ARIA
       uid: newSpec.uid,
       dom: {
         tag: 'iframe',
         attributes
       },
       behaviours: Behaviour.derive([
         Tabstopping.config({ }),
         Focusing.config({ }),
         RepresentingConfigs.withComp(Option.none(), sourcing.getValue, sourcing.setValue)
       ])
     }
   );
 };

const getBehaviours = (editor: Editor) => {
  return useFixedContainer(editor) ? [] : [
    Docking.config({
      leftAttr: 'data-dock-left',
      topAttr: 'data-dock-top',
      contextual: {
        lazyContext (_) {
          return Option.from(editor).map((ed) => Element.fromDom(ed.getBody()));
        },
        fadeInClass: 'tox-toolbar-dock-fadein',
        fadeOutClass: 'tox-toolbar-dock-fadeout',
        transitionClass: 'tox-toolbar-dock-transition'
      }
    }),
    Focusing.config({ })
  ];
};