TypeScript NativeEvents.change方法代碼示例

const sketch = function (editor): SketchSpec {
  const pickerDom = {
    tag: 'input',
    attributes: { accept: 'image/*', type: 'file', title: '' },
     // Visibility hidden so that it cannot be seen, and position absolute so that it doesn't
    // disrupt the layout
    styles: { visibility: 'hidden', position: 'absolute' }
  };

  const memPicker = Memento.record({
    dom: pickerDom,
    events: AlloyEvents.derive([
      // Stop the event firing again at the button level
      AlloyEvents.cutter(NativeEvents.click()),

      AlloyEvents.run(NativeEvents.change(), function (picker, simulatedEvent) {
        extractBlob(simulatedEvent).each(function (blob) {
          addImage(editor, blob);
        });
      })
    ])
  });

  return Button.sketch({
    dom: Buttons.getToolbarIconButton('image', editor),
    components: [
      memPicker.asSpec()
    ],
    action (button) {
      const picker = memPicker.get(button);
      // Trigger a dom click for the file input
      picker.element().dom().click();
    }
  });
};

export const renderSelectBox = (spec: Types.SelectBox.SelectBox, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  const translatedOptions = Arr.map(spec.items, (item) => {
    return {
      text: providersBackstage.translate(item.text),
      value: item.value
    };
  });

  // DUPE with TextField.
  const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));

  const pField = AlloyFormField.parts().field({
    // TODO: Alloy should not allow dom changing of an HTML select!
    dom: {  },
    selectAttributes: {
      size: spec.size
    },
    options: translatedOptions,
    factory: AlloyHtmlSelect,
    selectBehaviours: Behaviour.derive([
      Tabstopping.config({ }),
      AddEventsBehaviour.config('selectbox-change', [
        AlloyEvents.run(NativeEvents.change(), (component, _) => {
          AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
        })
      ])
    ])
  });

  const chevron = spec.size > 1 ? Option.none() :
    Option.some({
        dom: {
          tag: 'div',
          classes: ['tox-selectfield__icon-js'],
          innerHtml: Icons.get('chevron-down', providersBackstage.icons)
        }
      });

  const selectWrap: SimpleSpec = {
    dom: {
      tag: 'div',
      classes: ['tox-selectfield']
    },
    components: Arr.flatten([[pField], chevron.toArray()])
  };

  return AlloyFormField.sketch({
    dom: {
      tag: 'div',
      classes: ['tox-form__group']
    },
    components: Arr.flatten<AlloySpec>([pLabel.toArray(), [selectWrap]])
  });
};

 const getFieldPart = (isField1) => AlloyFormField.parts().field({
   factory: AlloyInput,
   inputClasses: ['tox-textfield'],
   inputBehaviours: Behaviour.derive([
     Tabstopping.config({}),
     AddEventsBehaviour.config('size-input-events', [
       AlloyEvents.run(NativeEvents.focusin(), function (component, simulatedEvent) {
         AlloyTriggers.emitWith(component, ratioEvent, { isField1 });
       }),
       AlloyEvents.run(NativeEvents.change(), function (component, simulatedEvent) {
         AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name });
       })
     ])
   ]),
   selectOnFocus: false
 });

 const renderField = (s) => {
   return {
     uid: s.uid,
     dom: {
       tag: 'div',
       classes: [ 'tox-dropzone-container' ]
     },
     behaviours: Behaviour.derive([
       RepresentingConfigs.memory([ ]),
       ComposingConfigs.self(),
       Disabling.config({}),
       Toggling.config({
         toggleClass: 'dragenter',
         toggleOnExecute: false
       }),
       AddEventsBehaviour.config('dropzone-events', [
         AlloyEvents.run('dragenter', sequence([ stopper, Toggling.toggle ])),
         AlloyEvents.run('dragleave', sequence([ stopper, Toggling.toggle ])),
         AlloyEvents.run('dragover', stopper),
         AlloyEvents.run('drop', sequence([ stopper, onDrop ])),
         AlloyEvents.run(NativeEvents.change(), onSelect)
       ]),
     ]),
     components: [
       {
         dom: {
           tag: 'div',
           classes: [ 'tox-dropzone' ],
           styles: {}
         },
         components: [
           {
             dom: {
               tag: 'p',
               innerHtml: providersBackstage.translate('Drop an image here')
             }
           },
           Button.sketch({
             dom: {
               tag: 'button',
               innerHtml: providersBackstage.translate('Browse for an image'),
               styles: {
                 position: 'relative'
               },
               classes: [ 'tox-button', 'tox-button--secondary']
             },
             components: [
               memInput.asSpec()
             ],
             action: (comp) => {
               const inputComp = memInput.get(comp);
               inputComp.element().dom().click();
             },
             buttonBehaviours: Behaviour.derive([
               Tabstopping.config({ })
             ])
           })
         ]
       }
     ]
   };
 };

export const renderCheckbox = (spec: CheckboxFoo, providerBackstage: UiFactoryBackstageProviders): SimpleSpec => {
  const repBehaviour = Representing.config({
    store: {
      mode: 'manual',
      getValue: (comp: AlloyComponent): boolean => {
        const el = comp.element().dom() as HTMLInputElement;
        return el.checked;
      },
      setValue: (comp: AlloyComponent, value: boolean) => {
        const el = comp.element().dom() as HTMLInputElement;
        el.checked = value;
      }
    }
  });

  const toggleCheckboxHandler = (comp) => {
    comp.element().dom().click();
    return Option.some(true);
  };

  const pField = AlloyFormField.parts().field({
    factory: { sketch: Fun.identity },
    dom: {
      tag: 'input',
      classes: ['tox-checkbox__input'],
      attributes: {
        type: 'checkbox'
      }
    },

    behaviours: Behaviour.derive([
      ComposingConfigs.self(),
      Tabstopping.config({}),
      Focusing.config({ }),
      repBehaviour,
      Keying.config({
        mode: 'special',
        onEnter: toggleCheckboxHandler,
        onSpace: toggleCheckboxHandler,
        stopSpaceKeyup: true
      }),
      AddEventsBehaviour.config('checkbox-events', [
        AlloyEvents.run(NativeEvents.change(), (component, _) => {
          AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
        })
      ])
    ]),
  });

  const pLabel = AlloyFormField.parts().label({
    dom: {
      tag: 'span',
      classes: ['tox-checkbox__label'],
      innerHtml: providerBackstage.translate(spec.label)
    },
    behaviours: Behaviour.derive([
      Unselecting.config({})
    ])
  });

  const makeIcon = (className: string) => {
    const iconName = className === 'checked' ? 'selected' : 'unselected';
    return {
      dom: {
        tag: 'span',
        classes: ['tox-icon', 'tox-checkbox-icon__' + className],
        innerHtml: Icons.get(iconName, providerBackstage.icons)
      }
    };
  };

  const memIcons = Memento.record(
    {
      dom: {
        tag: 'div',
        classes: ['tox-checkbox__icons']
      },
      components: [
        makeIcon('checked'),
        makeIcon('unchecked')
      ]
    }
  );

  return AlloyFormField.sketch({
    dom: {
      tag: 'label',
      classes: ['tox-checkbox'],
    },
    components: [
      pField,
      memIcons.asSpec(),
      pLabel
    ]
  });
};

export const renderUrlInput = (spec: Types.UrlInput.UrlInput, backstage: UiFactoryBackstage, urlBackstage: UiFactoryBackstageForUrlInput): SketchSpec => {
  const providersBackstage = backstage.shared.providers;

  const updateHistory = (component: AlloyComponent): void => {
    const urlEntry = Representing.getValue(component);
    urlBackstage.addToHistory(urlEntry.value, spec.filetype);
  };

  // TODO: Make alloy's typeahead only swallow enter and escape if menu is open
  const pField = AlloyFormField.parts().field({
    factory: AlloyTypeahead,
    dismissOnBlur: true,
    inputClasses: ['tox-textfield'],
    sandboxClasses: ['tox-dialog__popups'],
    inputAttributes: {
      'aria-errormessage': errorId
    },
    minChars: 0,
    responseTime: 0,
    fetch: (input: AlloyComponent) => {
      const items = getItems(spec.filetype, input, urlBackstage);
      const tdata = NestedMenus.build(items, ItemResponse.BUBBLE_TO_SANDBOX, backstage);
      return Future.pure(tdata);
    },

    getHotspot: (comp) => memUrlBox.getOpt(comp),
    onSetValue: (comp, newValue) => {
      if (comp.hasConfigured(Invalidating)) {
        Invalidating.run(comp).get(Fun.noop);
      }
    },

    typeaheadBehaviours: Behaviour.derive(Arr.flatten([
      urlBackstage.getValidationHandler().map(
        (handler) => Invalidating.config({
          getRoot: (comp) => Traverse.parent(comp.element()),
          invalidClass: 'tox-control-wrap--status-invalid',
          notify: {
            onInvalid: (comp: AlloyComponent, err: string) => {
              memInvalidIcon.getOpt(comp).each((invalidComp) => {
                Attr.set(invalidComp.element(), 'title', providersBackstage.translate(err));
              });
            }
          },
          validator: {
            validate: (input) => {
              const urlEntry = Representing.getValue(input);
              return FutureResult.nu((completer) => {
                handler({ type: spec.filetype, url: urlEntry.value }, (validation) => {
                  completer((validation.status === 'invalid' ? Result.error : Result.value)(validation.message));
                });
              });
            },
            validateOnLoad: false
          }
        })
      ).toArray(),
      [
        Tabstopping.config({}),
        AddEventsBehaviour.config('urlinput-events', Arr.flatten([
          // We want to get fast feedback for the link dialog, but not sure about others
          spec.filetype === 'file' ? [
            AlloyEvents.run(NativeEvents.input(), (comp) => {
              AlloyTriggers.emitWith(comp, formChangeEvent, { name: spec.name });
            })
          ] : [ ],
          [
            AlloyEvents.run(NativeEvents.change(), (comp) => {
              AlloyTriggers.emitWith(comp, formChangeEvent, { name: spec.name });
              updateHistory(comp);
            }),
            AlloyEvents.run(SystemEvents.postPaste(), (comp) => {
              AlloyTriggers.emitWith(comp, formChangeEvent, { name: spec.name });
              updateHistory(comp);
            })
          ]
        ]))
      ]
    ])),

    eventOrder: {
      [NativeEvents.input()]: [ 'streaming', 'urlinput-events', 'invalidating' ]
    },

    model: {
      getDisplayText: (itemData) => {
        return itemData.value;
      },
      selectsOver: false,
      populateFromBrowse: false
    },

    markers: {
      // FIX:
      openClass: 'dog'
    },

    lazySink: backstage.shared.getSink,

    parts: {
//.........這裏部分代碼省略.........