@xenknight/framework7 0.0.2

package/components/picker/picker-class.js

@@ -0,0 +1,588 @@
+import { getWindow } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { extend, nextTick, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+import { getDevice } from '../../shared/get-device.js';
+import pickerColumn from './picker-column.js';
+
+/** @jsx $jsx */
+import $jsx from '../../shared/$jsx.js';
+class Picker extends Framework7Class {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+    super(params, [app]);
+    const picker = this;
+    const device = getDevice();
+    const window = getWindow();
+    picker.params = extend({}, app.params.picker, params);
+    let $containerEl;
+    if (picker.params.containerEl) {
+      $containerEl = $(picker.params.containerEl);
+      if ($containerEl.length === 0) return picker;
+    }
+    let $inputEl;
+    if (picker.params.inputEl) {
+      $inputEl = $(picker.params.inputEl);
+    }
+    let $scrollToEl = picker.params.scrollToInput ? $inputEl : undefined;
+    if (picker.params.scrollToEl) {
+      const scrollToEl = $(picker.params.scrollToEl);
+      if (scrollToEl.length > 0) {
+        $scrollToEl = scrollToEl;
+      }
+    }
+    extend(picker, {
+      app,
+      $containerEl,
+      containerEl: $containerEl && $containerEl[0],
+      inline: $containerEl && $containerEl.length > 0,
+      needsOriginFix: device.ios || window.navigator.userAgent.toLowerCase().indexOf('safari') >= 0 && window.navigator.userAgent.toLowerCase().indexOf('chrome') < 0 && !device.android,
+      cols: [],
+      $inputEl,
+      inputEl: $inputEl && $inputEl[0],
+      $scrollToEl,
+      initialized: false,
+      opened: false,
+      url: picker.params.url
+    });
+    function onResize() {
+      picker.resizeCols();
+    }
+    function onInputClick() {
+      picker.open();
+    }
+    function onInputFocus(e) {
+      e.preventDefault();
+    }
+    let htmlTouchStartTarget = null;
+    function onHtmlTouchStart(e) {
+      htmlTouchStartTarget = e.target;
+    }
+    function onHtmlClick(e) {
+      if (picker.destroyed || !picker.params) return;
+      const $targetEl = $(e.target);
+      if (picker.isPopover()) return;
+      if (!picker.opened || picker.closing) return;
+      if ($targetEl.closest('[class*="backdrop"]').length) return;
+      if ($inputEl && $inputEl.length > 0) {
+        if (htmlTouchStartTarget === e.target && $targetEl[0] !== $inputEl[0] && $targetEl.closest('.sheet-modal').length === 0) {
+          picker.close();
+        }
+      } else if ($(e.target).closest('.sheet-modal').length === 0) {
+        picker.close();
+      }
+    }
+
+    // Events
+    extend(picker, {
+      attachResizeEvent() {
+        app.on('resize', onResize);
+      },
+      detachResizeEvent() {
+        app.off('resize', onResize);
+      },
+      attachInputEvents() {
+        picker.$inputEl.on('click', onInputClick);
+        if (picker.params.inputReadOnly) {
+          picker.$inputEl.on('focus mousedown', onInputFocus);
+          if (picker.$inputEl[0]) {
+            picker.$inputEl[0].f7ValidateReadonly = true;
+          }
+        }
+      },
+      detachInputEvents() {
+        picker.$inputEl.off('click', onInputClick);
+        if (picker.params.inputReadOnly) {
+          picker.$inputEl.off('focus mousedown', onInputFocus);
+          if (picker.$inputEl[0]) {
+            delete picker.$inputEl[0].f7ValidateReadonly;
+          }
+        }
+      },
+      attachHtmlEvents() {
+        app.on('click', onHtmlClick);
+        app.on('touchstart', onHtmlTouchStart);
+      },
+      detachHtmlEvents() {
+        app.off('click', onHtmlClick);
+        app.off('touchstart', onHtmlTouchStart);
+      }
+    });
+    picker.init();
+    return picker;
+  }
+  get view() {
+    const {
+      app,
+      params,
+      $inputEl
+    } = this;
+    let view;
+    if (params.view) {
+      view = params.view;
+    } else if ($inputEl) {
+      view = $inputEl.parents('.view').length && $inputEl.parents('.view')[0].f7View;
+    }
+    if (!view) view = app.views.main;
+    return view;
+  }
+  initInput() {
+    const picker = this;
+    if (!picker.$inputEl) return;
+    if (picker.params.inputReadOnly) picker.$inputEl.prop('readOnly', true);
+  }
+  resizeCols() {
+    const picker = this;
+    if (!picker.opened) return;
+    for (let i = 0; i < picker.cols.length; i += 1) {
+      if (!picker.cols[i].divider) {
+        picker.cols[i].calcSize();
+        picker.cols[i].setValue(picker.cols[i].value, false);
+      }
+    }
+  }
+  isPopover() {
+    const picker = this;
+    const {
+      app,
+      modal,
+      params
+    } = picker;
+    const device = getDevice();
+    if (params.openIn === 'sheet') return false;
+    if (modal && modal.type !== 'popover') return false;
+    if (!picker.inline && picker.inputEl) {
+      if (params.openIn === 'popover') return true;
+      if (device.ios) {
+        return !!device.ipad;
+      }
+      if (app.width >= 768) {
+        return true;
+      }
+    }
+    return false;
+  }
+  formatValue() {
+    const picker = this;
+    const {
+      value,
+      displayValue
+    } = picker;
+    if (picker.params.formatValue) {
+      return picker.params.formatValue.call(picker, value, displayValue);
+    }
+    return value.join(' ');
+  }
+  setValue(values) {
+    const picker = this;
+    let valueIndex = 0;
+    if (picker.cols.length === 0) {
+      picker.value = values;
+      picker.updateValue(values);
+      return;
+    }
+    for (let i = 0; i < picker.cols.length; i += 1) {
+      if (picker.cols[i] && !picker.cols[i].divider) {
+        picker.cols[i].setValue(values[valueIndex]);
+        valueIndex += 1;
+      }
+    }
+  }
+  getValue() {
+    const picker = this;
+    return picker.value;
+  }
+  updateValue(forceValues) {
+    const picker = this;
+    const newValue = forceValues || [];
+    const newDisplayValue = [];
+    let column;
+    if (picker.cols.length === 0) {
+      const noDividerColumns = picker.params.cols.filter(c => !c.divider);
+      for (let i = 0; i < noDividerColumns.length; i += 1) {
+        column = noDividerColumns[i];
+        if (column.displayValues !== undefined && column.values !== undefined && column.values.indexOf(newValue[i]) !== -1) {
+          newDisplayValue.push(column.displayValues[column.values.indexOf(newValue[i])]);
+        } else {
+          newDisplayValue.push(newValue[i]);
+        }
+      }
+    } else {
+      for (let i = 0; i < picker.cols.length; i += 1) {
+        if (!picker.cols[i].divider) {
+          newValue.push(picker.cols[i].value);
+          newDisplayValue.push(picker.cols[i].displayValue);
+        }
+      }
+    }
+    if (newValue.indexOf(undefined) >= 0) {
+      return;
+    }
+    picker.value = newValue;
+    picker.displayValue = newDisplayValue;
+    picker.emit('local::change pickerChange', picker, picker.value, picker.displayValue);
+    if (picker.inputEl) {
+      picker.$inputEl.val(picker.formatValue());
+      picker.$inputEl.trigger('change');
+    }
+  }
+  initColumn(colEl, updateItems) {
+    const picker = this;
+    pickerColumn.call(picker, colEl, updateItems);
+  }
+  // eslint-disable-next-line
+  destroyColumn(colEl) {
+    const picker = this;
+    const $colEl = $(colEl);
+    const index = $colEl.index();
+    if (picker.cols[index] && picker.cols[index].destroy) {
+      picker.cols[index].destroy();
+    }
+  }
+  renderToolbar() {
+    const picker = this;
+    if (picker.params.renderToolbar) return picker.params.renderToolbar.call(picker, picker);
+    return $jsx("div", {
+      class: "toolbar toolbar-top"
+    }, $jsx("div", {
+      class: "toolbar-inner"
+    }, $jsx("div", {
+      class: "left"
+    }), $jsx("div", {
+      class: "right"
+    }, $jsx("a", {
+      class: "link sheet-close popover-close"
+    }, picker.params.toolbarCloseText))));
+  }
+  // eslint-disable-next-line
+  renderColumn(col, onlyItems) {
+    const colClasses = `picker-column ${col.textAlign ? `picker-column-${col.textAlign}` : ''} ${col.cssClass || ''}`;
+    let columnHtml;
+    let columnItemsHtml;
+    if (col.divider) {
+      // prettier-ignore
+      columnHtml = `
+        <div class="${colClasses} picker-column-divider">${col.content}</div>
+      `;
+    } else {
+      // prettier-ignore
+      columnItemsHtml = col.values.map((value, index) => `
+        <div class="picker-item" data-picker-value="${value}">
+          <span>${col.displayValues ? col.displayValues[index] : value}</span>
+        </div>
+      `).join('');
+      // prettier-ignore
+      columnHtml = `
+        <div class="${colClasses}">
+          <div class="picker-items">${columnItemsHtml}</div>
+        </div>
+      `;
+    }
+    return onlyItems ? columnItemsHtml.trim() : columnHtml.trim();
+  }
+  renderInline() {
+    const picker = this;
+    const {
+      rotateEffect,
+      cssClass,
+      toolbar
+    } = picker.params;
+    const inlineHtml = $jsx("div", {
+      class: `picker picker-inline ${rotateEffect ? 'picker-3d' : ''} ${cssClass || ''}`
+    }, toolbar && picker.renderToolbar(), $jsx("div", {
+      class: "picker-columns"
+    }, picker.cols.map(col => picker.renderColumn(col)), $jsx("div", {
+      class: "picker-center-highlight"
+    })));
+    return inlineHtml;
+  }
+  renderSheet() {
+    const picker = this;
+    const {
+      rotateEffect,
+      cssClass,
+      toolbar
+    } = picker.params;
+    const sheetHtml = $jsx("div", {
+      class: `sheet-modal picker picker-sheet ${rotateEffect ? 'picker-3d' : ''} ${cssClass || ''}`
+    }, toolbar && picker.renderToolbar(), $jsx("div", {
+      class: "sheet-modal-inner picker-columns"
+    }, picker.cols.map(col => picker.renderColumn(col)), $jsx("div", {
+      class: "picker-center-highlight"
+    })));
+    return sheetHtml;
+  }
+  renderPopover() {
+    const picker = this;
+    const {
+      rotateEffect,
+      cssClass,
+      toolbar
+    } = picker.params;
+    const popoverHtml = $jsx("div", {
+      class: "popover picker-popover"
+    }, $jsx("div", {
+      class: "popover-inner"
+    }, $jsx("div", {
+      class: `picker ${rotateEffect ? 'picker-3d' : ''} ${cssClass || ''}`
+    }, toolbar && picker.renderToolbar(), $jsx("div", {
+      class: "picker-columns"
+    }, picker.cols.map(col => picker.renderColumn(col)), $jsx("div", {
+      class: "picker-center-highlight"
+    })))));
+    return popoverHtml;
+  }
+  render() {
+    const picker = this;
+    if (picker.params.render) return picker.params.render.call(picker);
+    if (!picker.inline) {
+      if (picker.isPopover()) return picker.renderPopover();
+      return picker.renderSheet();
+    }
+    return picker.renderInline();
+  }
+  onOpen() {
+    const picker = this;
+    const {
+      initialized,
+      $el,
+      app,
+      $inputEl,
+      inline,
+      value,
+      params
+    } = picker;
+    picker.opened = true;
+    picker.closing = false;
+    picker.opening = true;
+
+    // Init main events
+    picker.attachResizeEvent();
+
+    // Init cols
+    $el.find('.picker-column').each(colEl => {
+      let updateItems = true;
+      if (!initialized && params.value || initialized && value) {
+        updateItems = false;
+      }
+      picker.initColumn(colEl, updateItems);
+    });
+
+    // Set value
+    if (!initialized) {
+      if (value) picker.setValue(value);else if (params.value) {
+        picker.setValue(params.value);
+      }
+    } else if (value) {
+      picker.setValue(value);
+    }
+
+    // Extra focus
+    if (!inline && $inputEl && $inputEl.length && app.theme === 'md') {
+      $inputEl.trigger('focus');
+    }
+    picker.initialized = true;
+
+    // Trigger events
+    if ($el) {
+      $el.trigger('picker:open');
+    }
+    if ($inputEl) {
+      $inputEl.trigger('picker:open');
+    }
+    picker.emit('local::open pickerOpen', picker);
+  }
+  onOpened() {
+    const picker = this;
+    picker.opening = false;
+    if (picker.$el) {
+      picker.$el.trigger('picker:opened');
+    }
+    if (picker.$inputEl) {
+      picker.$inputEl.trigger('picker:opened');
+    }
+    picker.emit('local::opened pickerOpened', picker);
+  }
+  onClose() {
+    const picker = this;
+    const app = picker.app;
+    picker.opening = false;
+    picker.closing = true;
+
+    // Detach events
+    picker.detachResizeEvent();
+    picker.cols.forEach(col => {
+      if (col.destroy) col.destroy();
+    });
+    if (picker.$inputEl) {
+      if (app.theme === 'md') {
+        picker.$inputEl.trigger('blur');
+      } else {
+        const validate = picker.$inputEl.attr('validate');
+        const required = picker.$inputEl.attr('required');
+        if (validate && required) {
+          app.input.validate(picker.$inputEl);
+        }
+      }
+    }
+    if (picker.$el) {
+      picker.$el.trigger('picker:close');
+    }
+    if (picker.$inputEl) {
+      picker.$inputEl.trigger('picker:close');
+    }
+    picker.emit('local::close pickerClose', picker);
+  }
+  onClosed() {
+    const picker = this;
+    picker.opened = false;
+    picker.closing = false;
+    if (!picker.inline) {
+      nextTick(() => {
+        if (picker.modal && picker.modal.el && picker.modal.destroy) {
+          if (!picker.params.routableModals) {
+            picker.modal.destroy();
+          }
+        }
+        delete picker.modal;
+      });
+    }
+    if (picker.$el) {
+      picker.$el.trigger('picker:closed');
+    }
+    if (picker.$inputEl) {
+      picker.$inputEl.trigger('picker:closed');
+    }
+    picker.emit('local::closed pickerClosed', picker);
+  }
+  open() {
+    const picker = this;
+    const {
+      app,
+      opened,
+      inline,
+      $inputEl,
+      $scrollToEl,
+      params
+    } = picker;
+    if (opened) return;
+    if (picker.cols.length === 0 && params.cols.length) {
+      params.cols.forEach(col => {
+        picker.cols.push(col);
+      });
+    }
+    if (inline) {
+      picker.$el = $(picker.render());
+      picker.$el[0].f7Picker = picker;
+      picker.$containerEl.append(picker.$el);
+      picker.onOpen();
+      picker.onOpened();
+      return;
+    }
+    const isPopover = picker.isPopover();
+    const modalType = isPopover ? 'popover' : 'sheet';
+    const modalParams = {
+      targetEl: $inputEl,
+      scrollToEl: $scrollToEl,
+      content: picker.render(),
+      backdrop: typeof params.backdrop !== 'undefined' ? params.backdrop : isPopover,
+      on: {
+        open() {
+          const modal = this;
+          picker.modal = modal;
+          picker.$el = isPopover ? modal.$el.find('.picker') : modal.$el;
+          picker.$el[0].f7Picker = picker;
+          picker.onOpen();
+        },
+        opened() {
+          picker.onOpened();
+        },
+        close() {
+          picker.onClose();
+        },
+        closed() {
+          picker.onClosed();
+        }
+      }
+    };
+    if (modalType === 'sheet') {
+      modalParams.push = params.sheetPush;
+      modalParams.swipeToClose = params.sheetSwipeToClose;
+    }
+    if (params.routableModals && picker.view) {
+      picker.view.router.navigate({
+        url: picker.url,
+        route: {
+          path: picker.url,
+          [modalType]: modalParams
+        }
+      });
+    } else {
+      picker.modal = app[modalType].create(modalParams);
+      picker.modal.open();
+    }
+  }
+  close() {
+    const picker = this;
+    const {
+      opened,
+      inline
+    } = picker;
+    if (!opened) return;
+    if (inline) {
+      picker.onClose();
+      picker.onClosed();
+      return;
+    }
+    if (picker.params.routableModals && picker.view) {
+      picker.view.router.back();
+    } else {
+      picker.modal.close();
+    }
+  }
+  init() {
+    const picker = this;
+    picker.initInput();
+    if (picker.inline) {
+      picker.open();
+      picker.emit('local::init pickerInit', picker);
+      return;
+    }
+    if (!picker.initialized && picker.params.value) {
+      picker.setValue(picker.params.value);
+    }
+
+    // Attach input Events
+    if (picker.$inputEl) {
+      picker.attachInputEvents();
+    }
+    if (picker.params.closeByOutsideClick) {
+      picker.attachHtmlEvents();
+    }
+    picker.emit('local::init pickerInit', picker);
+  }
+  destroy() {
+    const picker = this;
+    if (picker.destroyed) return;
+    const {
+      $el
+    } = picker;
+    picker.emit('local::beforeDestroy pickerBeforeDestroy', picker);
+    if ($el) $el.trigger('picker:beforedestroy');
+    picker.close();
+
+    // Detach Events
+    if (picker.$inputEl) {
+      picker.detachInputEvents();
+    }
+    if (picker.params.closeByOutsideClick) {
+      picker.detachHtmlEvents();
+    }
+    if ($el && $el.length) delete picker.$el[0].f7Picker;
+    deleteProps(picker);
+    picker.destroyed = true;
+  }
+}
+export default Picker;

package/components/picker/picker-column.js

@@ -0,0 +1,121 @@
+import $ from '../../shared/dom7.js';
+export default function pickerColumn(colEl, updateItems) {
+  const picker = this;
+  // const app = picker.app;
+  const $colEl = $(colEl);
+  const colIndex = $colEl.index();
+  const col = picker.cols[colIndex];
+  if (col.divider) return;
+  col.$el = $colEl;
+  col.el = $colEl[0];
+  col.$itemsEl = col.$el.find('.picker-items');
+  col.items = col.$itemsEl.find('.picker-item');
+  let itemHeight;
+  let colHeight;
+  col.replaceValues = function replaceColValues(values, displayValues) {
+    col.detachEvents();
+    col.values = values;
+    col.displayValues = displayValues;
+    col.$itemsEl.html(picker.renderColumn(col, true));
+    col.items = col.$itemsEl.find('.picker-item');
+    col.calcSize();
+    col.setValue(col.values[0], true);
+    col.attachEvents();
+  };
+  col.calcSize = function calcColSize() {
+    colHeight = col.$el[0].offsetHeight;
+    itemHeight = col.items[0].offsetHeight;
+    const hadPadding = col.el.style.getPropertyValue('--f7-picker-scroll-padding');
+    col.el.style.setProperty('--f7-picker-scroll-padding', `${(colHeight - itemHeight) / 2}px`);
+    if (!hadPadding) {
+      col.$itemsEl[0].scrollTop = 0;
+    }
+  };
+  col.setValue = function setColValue(newValue, valueCallbacks) {
+    const newActiveIndex = col.$itemsEl.find(`.picker-item[data-picker-value="${newValue}"]`).index();
+    if (typeof newActiveIndex === 'undefined' || newActiveIndex === -1) {
+      return;
+    }
+    const newScrollTop = newActiveIndex * itemHeight;
+    col.$itemsEl[0].scrollTop = newScrollTop;
+
+    // Update items
+    col.updateItems(newActiveIndex, newScrollTop, valueCallbacks);
+  };
+  col.updateItems = function updateColItems(activeIndex, scrollTop, valueCallbacks) {
+    if (typeof scrollTop === 'undefined') {
+      // eslint-disable-next-line
+      scrollTop = col.$itemsEl[0].scrollTop;
+    }
+
+    /* eslint-disable no-param-reassign */
+    if (typeof activeIndex === 'undefined') {
+      activeIndex = Math.round(scrollTop / itemHeight);
+    }
+    if (activeIndex < 0) activeIndex = 0;
+    if (activeIndex >= col.items.length) activeIndex = col.items.length - 1;
+    /* eslint-enable no-param-reassign */
+    const previousActiveIndex = col.activeIndex;
+    col.activeIndex = activeIndex;
+    col.$itemsEl.find('.picker-item-selected').removeClass('picker-item-selected');
+    const selectedItem = col.items.eq(activeIndex);
+    selectedItem.addClass('picker-item-selected').children().transform('');
+    // Set 3D rotate effect
+    if (picker.params.rotateEffect) {
+      col.items.each(itemEl => {
+        const $itemEl = $(itemEl);
+        const itemOffset = itemEl.offsetTop - (colHeight - itemHeight) / 2 - scrollTop;
+        const percentage = itemOffset / itemHeight;
+        const itemsFit = Math.ceil(col.height / itemHeight / 2) + 1;
+        let angle = -24 * percentage;
+        if (angle > 180) angle = 180;
+        if (angle < -180) angle = -180;
+        if (Math.abs(percentage) > itemsFit) {
+          $itemEl.addClass('picker-item-far');
+        } else {
+          $itemEl.removeClass('picker-item-far');
+        }
+        $itemEl.children('span').transform(`translate3d(0, ${-percentage * itemHeight}px, -100px) rotateX(${angle}deg)`);
+      });
+    }
+    if (valueCallbacks || typeof valueCallbacks === 'undefined') {
+      // Update values
+      col.value = selectedItem.attr('data-picker-value');
+      col.displayValue = col.displayValues ? col.displayValues[activeIndex] : col.value;
+      // On change callback
+      if (previousActiveIndex !== activeIndex) {
+        if (col.onChange) {
+          col.onChange(picker, col.value, col.displayValue);
+        }
+        picker.updateValue();
+      }
+    }
+  };
+  function handleScroll() {
+    col.updateItems();
+  }
+  function handleClick() {
+    const value = $(this).attr('data-picker-value');
+    col.setValue(value);
+  }
+  col.attachEvents = function attachColEvents() {
+    col.$itemsEl.on('scroll', handleScroll);
+    col.items.on('click', handleClick);
+  };
+  col.detachEvents = function detachColEvents() {
+    col.items.off('click', handleClick);
+  };
+  col.init = function initCol() {
+    col.calcSize();
+    if (colIndex === 0) col.$el.addClass('picker-column-first');
+    if (colIndex === picker.cols.length - 1) col.$el.addClass('picker-column-last');
+    if (picker.params.freeMode) col.$el.addClass('picker-column-free-mode');
+    // Update items on init
+    if (updateItems) col.updateItems(0);
+    col.attachEvents();
+  };
+  col.destroy = function destroyCol() {
+    col.detachEvents();
+  };
+  col.init();
+}