當前位置: 首頁>>代碼示例>>TypeScript>>正文


TypeScript Container.sketch方法代碼示例

本文整理匯總了TypeScript中@ephox/alloy.Container.sketch方法的典型用法代碼示例。如果您正苦於以下問題:TypeScript Container.sketch方法的具體用法?TypeScript Container.sketch怎麽用?TypeScript Container.sketch使用的例子?那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在@ephox/alloy.Container的用法示例。


在下文中一共展示了Container.sketch方法的10個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1:

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({ })
      ])
    });
  }
};
開發者ID:tinymce,項目名稱:tinymce,代碼行數:26,代碼來源:HtmlPanel.ts

示例2: function

export default function () {
  const ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();

  const fontSlider = Container.sketch({
    dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
    components: [
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
        components: FontSizeSlider.makeItems({
          onChange: Fun.noop,
          getInitialValue: Fun.constant(2)
        })
      }
    ]
  });

  const colorSlider = Container.sketch({
    dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
    components: [
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
        components: ColorSlider.makeItems({
          onChange: Fun.noop,
          getInitialValue: Fun.constant(-1)
        })
      }
    ]
  });

  const gui = Gui.create();
  Attachment.attachSystem(ephoxUi, gui);

  const container = GuiFactory.build({
    dom: UiDomFactory.dom('<div class="{prefix}-outer-container ${prefix}-fullscreen-maximized"></div>'),
    components: [
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
        components: [ fontSlider ]
      },
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
        components: [ colorSlider ]
      }
    ]
  });

  gui.add(container);
}
開發者ID:danielpunkass,項目名稱:tinymce,代碼行數:48,代碼來源:SlidersDemo.ts

示例3: function

  const makeGroup = function (gSpec) {
    const scrollClass = gSpec.scrollable === true ? '${prefix}-toolbar-scrollable-group' : '';
    return {
      dom: UiDomFactory.dom('<div aria-label="' + gSpec.label + '" class="${prefix}-toolbar-group ' + scrollClass + '"></div>'),

      tgroupBehaviours: Behaviour.derive([
        AddEventsBehaviour.config('adhoc-scrollable-toolbar', gSpec.scrollable === true ? [
          AlloyEvents.runOnInit(function (component, simulatedEvent) {
            Css.set(component.element(), 'overflow-x', 'auto');
            Scrollables.markAsHorizontal(component.element());
            Scrollable.register(component.element());
          })
        ] : [ ])
      ]),

      components: [
        Container.sketch({
          components: [
            ToolbarGroup.parts().items({ })
          ]
        })
      ],
      markers: {
        // TODO: Now that alloy isn't marking the items with the old
        // itemClass here, this navigation probably doesn't work. But
        // it's mobile. However, bluetooth keyboards will need to be fixed
        // Essentially, all items put in the toolbar will need to be given
        // this class if they are to be part of keyboard navigation
        itemSelector: '.' + Styles.resolve('toolbar-group-item')
      },

      items: gSpec.items
    };
  };
開發者ID:tinymce,項目名稱:tinymce,代碼行數:34,代碼來源:ScrollingToolbar.ts

示例4: function

const field = function (name, placeholder) {
  const inputSpec = Memento.record(Input.sketch({
    placeholder,
    onSetValue (input, data) {
      // If the value changes, inform the container so that it can update whether the "x" is visible
      AlloyTriggers.emit(input, NativeEvents.input());
    },
    inputBehaviours: Behaviour.derive([
      Composing.config({
        find: Option.some
      }),
      Tabstopping.config({ }),
      Keying.config({
        mode: 'execution'
      })
    ]),
    selectOnFocus: false
  }));

  const buttonSpec = Memento.record(
    Button.sketch({
      dom: UiDomFactory.dom('<button class="${prefix}-input-container-x ${prefix}-icon-cancel-circle ${prefix}-icon"></button>'),
      action (button) {
        const input = inputSpec.get(button);
        Representing.setValue(input, '');
      }
    })
  );

  return {
    name,
    spec: Container.sketch({
      dom: UiDomFactory.dom('<div class="${prefix}-input-container"></div>'),
      components: [
        inputSpec.asSpec(),
        buttonSpec.asSpec()
      ],
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('input-container-empty')
        }),
        Composing.config({
          find (comp) {
            return Option.some(inputSpec.get(comp));
          }
        }),
        AddEventsBehaviour.config(clearInputBehaviour, [
          // INVESTIGATE: Because this only happens on input,
          // it won't reset unless it has an initial value
          AlloyEvents.run(NativeEvents.input(), function (iContainer) {
            const input = inputSpec.get(iContainer);
            const val = Representing.getValue(input);
            const f = val.length > 0 ? Toggling.off : Toggling.on;
            f(iContainer);
          })
        ])
      ])
    })
  };
};
開發者ID:danielpunkass,項目名稱:tinymce,代碼行數:60,代碼來源:Inputs.ts

示例5: renderColorInput

 (store, doc, body) => {
   return GuiFactory.build(
     Container.sketch({
       dom: {
         classes: [ 'colorinput-container' ]
       },
       components: [
         renderColorInput({
           type: 'colorinput',
           name: 'alpha',
           label: Option.some('test-color-input'),
         }, helpers.shared, {
           colorPicker: (callback, value) => {},
           hasCustomColors: () => true,
           getColors: () => [
             { type: choiceItem, text: 'Turquoise', value: '#18BC9B' },
             { type: choiceItem, text: 'Green', value: '#2FCC71' },
             { type: choiceItem, text: 'Blue', value: '#3598DB' },
             { type: choiceItem, text: 'Purple', value: '#9B59B6' },
             { type: choiceItem, text: 'Navy Blue', value: '#34495E' }
           ],
           getColorCols: () => 3
         })
       ]
     })
   );
 },
開發者ID:tinymce,項目名稱:tinymce,代碼行數:27,代碼來源:ColorInputTest.ts

示例6:

 const makeGroup = (edge, buttons): SketchSpec => Container.sketch({
   dom: {
     tag: 'div',
     classes: [ `tox-dialog__footer-${edge}` ]
   },
   components: Arr.map(buttons, (button) => button.memento.asSpec())
 });
開發者ID:tinymce,項目名稱:tinymce,代碼行數:7,代碼來源:SilverDialogFooter.ts

示例7: function

  const makeGroup = function (gSpec) {
    const scrollClass = gSpec.scrollable === true ? '${prefix}-toolbar-scrollable-group' : '';
    return {
      dom: UiDomFactory.dom('<div aria-label="' + gSpec.label + '" class="${prefix}-toolbar-group ' + scrollClass + '"></div>'),

      tgroupBehaviours: Behaviour.derive([
        AddEventsBehaviour.config('adhoc-scrollable-toolbar', gSpec.scrollable === true ? [
          AlloyEvents.runOnInit(function (component, simulatedEvent) {
            Css.set(component.element(), 'overflow-x', 'auto');
            Scrollables.markAsHorizontal(component.element());
            Scrollable.register(component.element());
          })
        ] : [ ])
      ]),

      components: [
        Container.sketch({
          components: [
            ToolbarGroup.parts().items({ })
          ]
        })
      ],
      markers: {
        itemClass: Styles.resolve('toolbar-group-item')
      },

      items: gSpec.items
    };
  };
開發者ID:abstask,項目名稱:tinymce,代碼行數:29,代碼來源:ScrollingToolbar.ts

示例8:

const pFooterGroup = (startButtons: AlloySpec[], endButtons: AlloySpec[]) => {
  return [
    Container.sketch({
      dom: {
        tag: 'div',
        classes: [ `tox-dialog__footer-start` ]
      },
      components: startButtons
    }),
    Container.sketch({
      dom: {
        tag: 'div',
        classes: [ `tox-dialog__footer-end` ]
      },
      components: endButtons
    })
  ];
};
開發者ID:tinymce,項目名稱:tinymce,代碼行數:18,代碼來源:Dialogs.ts

示例9: function

 components: Arr.map(spec.fields, function (field, i) {
   return i <= spec.maxFieldIndex ? Container.sketch({
     dom: UiDomFactory.dom('<div class="${prefix}-serialised-dialog-screen"></div>'),
     components: [
       navigationButton(-1, 'previous', (i > 0)),
       parts.field(field.name, field.spec),
       navigationButton(+1, 'next', (i < spec.maxFieldIndex))
     ]
   }) : parts.field(field.name, field.spec);
 })
開發者ID:tinymce,項目名稱:tinymce,代碼行數:10,代碼來源:SerialisedDialog.ts

示例10: function

const sketch = function (onView, translate): SketchSpec {

  const memIcon = Memento.record(
    Container.sketch({
      dom: UiDomFactory.dom('<div aria-hidden="true" class="${prefix}-mask-tap-icon"></div>'),
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('mask-tap-icon-selected'),
          toggleOnExecute: false
        })
      ])
    })
  );

  const onViewThrottle = Throttler.first(onView, 200);

  return Container.sketch({
    dom: UiDomFactory.dom('<div class="${prefix}-disabled-mask"></div>'),
    components: [
      Container.sketch({
        dom: UiDomFactory.dom('<div class="${prefix}-content-container"></div>'),
        components: [
          Button.sketch({
            dom: UiDomFactory.dom('<div class="${prefix}-content-tap-section"></div>'),
            components: [
              memIcon.asSpec()
            ],
            action (button) {
              onViewThrottle.throttle();
            },

            buttonBehaviours: Behaviour.derive([
              Toggling.config({
                toggleClass: Styles.resolve('mask-tap-icon-selected')
              })
            ])
          })
        ]
      })
    ]
  });
};
開發者ID:danielpunkass,項目名稱:tinymce,代碼行數:42,代碼來源:TapToEditMask.ts


注:本文中的@ephox/alloy.Container.sketch方法示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台,相關代碼片段篩選自各路編程大神貢獻的開源項目,源碼版權歸原作者所有,傳播和使用請參考對應項目的License;未經允許,請勿轉載。