JavaScript ons/util createFragment Examples

Example #1

File: ons-splitter-side.js Project: huylu/OnsenUI

    return internal.getPageHTMLAsync(page).then(html => new Promise(resolve => {
      rewritables.link(this, util.createFragment(html), options, fragment => {
        this._hide();

        this.innerHTML = '';
        this.appendChild(fragment);

        this._show();
        callback && callback();
        resolve(this.firstChild);
      });
    }));

Example #2

File: ons-splitter-side.js Project: oocoder/OnsenUI

      return new Promise(resolve => {
        rewritables.link(this, util.createFragment(html), options, (fragment) => {
          util.propagateAction(this, '_hide');
          this.innerHTML = '';

          this.appendChild(fragment);

          util.propagateAction(this, '_show');

          options.callback();
          resolve(this.firstChild);
        });
      });

Example #3

File: ons-splitter-side.js Project: danjarvis/OnsenUI

    ons.getPageHTMLAsync(page).then((html) => {
      rewritables.link(this, util.createFragment(html), options, (fragment) => {
        while (this.childNodes[0]) {
          if (this.childNodes[0]._hide instanceof Function) {
            this.childNodes[0]._hide();
          }
          this.removeChild(this.childNodes[0]);
        }

        this.appendChild(fragment);
        util.arrayFrom(fragment.childNodes).forEach(node => {
          if (node._show instanceof Function) {
            node._show();
          }
        });

        options.callback();
      });
    });

Example #4

File: index.js Project: PMoneda/OnsenUI

  '.popover__container': 'popover__container--*',
  '.popover__content': 'popover__content--*',
  '.popover__arrow': 'popover__arrow--*'
};

const _animatorDict = {
  'default': () => platform.isAndroid() ? animators.MDFadePopoverAnimator : animators.IOSFadePopoverAnimator,
  'none': animators.PopoverAnimator,
  'fade-ios': animators.IOSFadePopoverAnimator,
  'fade-md': animators.MDFadePopoverAnimator
};

const templateSource = util.createFragment(`
  <div class="popover-mask"></div>
  <div class="popover__container">
    <div class="popover__content"></div>
    <div class="popover__arrow"></div>
  </div>
`);

const positions = {
  up: 'bottom',
  left: 'right',
  down: 'top',
  right: 'left'
};

const directions = Object.keys(positions);
/**
 * @element ons-popover
 * @category popover

Example #5

File: ons-switch.js Project: FriendLoveMa/OnsenUI

import autoStyle from 'ons/autostyle';
import ModifierUtil from 'ons/internal/modifier-util';
import BaseElement from 'ons/base-element';
import GestureDetector from 'ons/gesture-detector';

const scheme = {
  '': 'switch--*',
  '.switch__input': 'switch--*__input',
  '.switch__handle': 'switch--*__handle',
  '.switch__toggle': 'switch--*__toggle'
};

const template = util.createFragment(`
  <input type="checkbox" class="switch__input">
  <div class="switch__toggle">
    <div class="switch__handle">
      <div class="switch__touch"></div>
    </div>
  </div>
`);

const locations = {
  ios: [1, 21],
  material: [0, 16]
};

/**
 * @element ons-switch
 * @category switch
 * @description
 *   [en]
 *     Switch component. The switch can be toggled both by dragging and tapping.