コード例 #1
0
/**
 * Create new cell data.
 * @param {Array.<object>} rowData - row data of table data
 * @param {number} rowIndex - row index of table data
 * @param {number} colIndex - column index of table data
 * @param {object | null} prevCell - previous cell data
 * @returns {object}
 * @private
 */
function _createNewCell(rowData, rowIndex, colIndex, prevCell) {
  const cellData = rowData[colIndex];
  let newCell;

  if (util.isExisty(cellData.colMergeWith)) {
    const {colMergeWith} = cellData;
    const merger = rowData[colMergeWith];
    const lastMergedCellIndex = colMergeWith + merger.colspan - 1;

    if (util.isExisty(merger.rowMergeWith) && prevCell) {
      newCell = util.extend({}, prevCell);
    } else if (lastMergedCellIndex > colIndex) {
      merger.colspan += 1;
      newCell = util.extend({}, cellData);
    }
  } else if (cellData.colspan > 1) {
    cellData.colspan += 1;
    newCell = _createColMergedCell(colIndex, cellData.nodeName);
  }

  if (!newCell) {
    newCell = dataHandler.createBasicCell(rowIndex, colIndex + 1, cellData.nodeName);
  }

  return newCell;
}
コード例 #2
0
WeekdayInMonth.prototype.getBaseViewModel = function(viewModel) {
    var opt = this.options,
        gridHeaderHeight = util.pick(opt, 'grid', 'header', 'height') || 0,
        gridFooterHeight = util.pick(opt, 'grid', 'footer', 'height') || 0,
        renderLimitIdx = this._getRenderLimitIndex() + 1,
        exceedDate = this.getExceedDate(renderLimitIdx, viewModel.eventsInDateRange, viewModel.range),
        styles = this._getStyles(viewModel.theme);
    var baseViewModel;

    viewModel = util.extend({
        exceedDate: exceedDate
    }, viewModel);

    baseViewModel = Weekday.prototype.getBaseViewModel.call(this, viewModel);

    baseViewModel = util.extend({
        matrices: viewModel.eventsInDateRange,
        gridHeaderHeight: gridHeaderHeight,
        gridFooterHeight: gridFooterHeight,
        renderLimitIdx: renderLimitIdx,
        styles: styles
    }, baseViewModel);

    return baseViewModel;
};
コード例 #3
0
 /**
  * constructor
  * @param {object} options - popup options
  */
 constructor(options) {
   options = util.extend({
     header: false,
     className: 'te-dropdown-toolbar'
   }, options);
   super(options);
 }
コード例 #4
0
ファイル: moveGuide.js プロジェクト: AndroidArt/tui.calendar
MonthMoveGuide.prototype._onDragStart = function(dragStartEvent) {
    var monthView = this.monthMove.monthView,
        firstWeekdayView = monthView.children.single(),
        weekdayOptions = firstWeekdayView.options,
        widthPercent = 100 / firstWeekdayView.getRenderDateRange().length,
        height = weekdayOptions.scheduleGutter + weekdayOptions.scheduleHeight,
        container = monthView.container,
        mousePos = domevent.getMousePosition(dragStartEvent.originEvent, container),
        model = dragStartEvent.model,
        layer = new FloatingLayer(null, container);

    this._hideOriginScheduleBlocks(model.cid());

    this.layer = layer;
    layer.setSize(widthPercent + '%', height);
    layer.setPosition(mousePos[0], mousePos[1]);
    layer.setContent(tmpl({
        model: util.extend(
            Schedule.create(model),
            model
        ),
        styles: {
            scheduleHeight: weekdayOptions.scheduleHeight,
            scheduleBulletTop: weekdayOptions.scheduleHeight / 3,
            borderRadius: monthView.controller.theme.month.schedule.borderRadius
        }
    }));
    layer.show();

    if (!util.browser.msie) {
        domutil.addClass(global.document.body, config.classname('dragging'));
    }
};
コード例 #5
0
    generate: function(selectedTargets, options) {
        var targets;

        options = snippet.extend({
            usageStatistics: true
        }, options);

        if (generatePlaceholder) {
            targets = selectedTargets ? snippet.toArray(selectedTargets) : getAllTargets();

            sharedInstance.generateOnTargets(snippet.filter(targets, function(target) {
                var tagName = target.nodeName.toLowerCase();
                var inputType = target.type.toLowerCase();
                var disableState = target.disabled || target.readOnly;
                var hasProp = !snippet.isNull(target.getAttribute('placeholder'));
                var enableElem = snippet.inArray(tagName, TARGET_TAGS) > -1;

                if (tagName === 'input') {
                    enableElem = snippet.inArray(inputType, INPUT_TYPES) > -1;
                }

                return hasProp && enableElem && !disableState;
            }), options);
        }

        if (options.usageStatistics) {
            util.sendHostNameToGA();
        }
    },
コード例 #6
0
ファイル: dayGrid.js プロジェクト: AndroidArt/tui.calendar
/**
 * @constructor
 * @extends {Weekday}
 * @param {string} name - view name
 * @param {object} options - options for DayGridSchedule view
 * @param {number} [options.heightPercent] - height percent of view
 * @param {number} [options.containerButtonGutter=8] - free space at bottom to
 *  make create easy.
 * @param {number} [options.scheduleHeight=18] - height of each schedule block.
 * @param {number} [options.scheduleGutter=2] - gutter height of each schedule block.
 * @param {HTMLDIVElement} container - DOM element to use container for this
 *  view.
 * @param {Theme} theme - theme instance
 */
function DayGrid(name, options, container, theme) {
    container = domutil.appendHTMLElement(
        'div',
        container,
        config.classname('daygrid-layout')
    );
    View.call(this, container);

    name = name || 'daygrid';

    this.options = util.extend({
        viewName: name,
        daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        renderStartDate: '',
        renderEndDate: '',
        containerBottomGutter: 18,
        scheduleHeight: parseInt(theme.week.dayGridSchedule.height, 10),
        scheduleGutter: parseInt(theme.week.dayGridSchedule.marginTop, 10),
        scheduleContainerTop: 1,
        getViewModelFunc: function(viewModel) {
            return viewModel.schedulesInDateRange[name];
        },
        setViewModelFunc: function(viewModel, matrices) {
            viewModel.schedulesInDateRange[name] = matrices;
        }
    }, options);

    this.handler = {};
    this.vPanel = null;

    this.state.collapsed = true;
}
コード例 #7
0
ファイル: more.js プロジェクト: AndroidArt/tui.calendar
/**
 * @constructor
 * @extends {View}
 * @param {object} options - options
 * @param {object} [options.moreLayerSize] - more layer size
 * @param {object} [options.moreLayerSize.width=null] - css width value(px, auto).
 *                                                           The default value 'null' is to fit a grid cell.
 * @param {object} [options.moreLayerSize.height=null] - css height value(px, auto).
 *                                                            The default value 'null' is to fit a grid cell.
 * @param {HTMLElement} container = container element
 * @param {Theme} theme - theme instance
 */
function More(options, container, theme) {
    View.call(this, container);

    /**
     * @type {FloatingLayer}
     */
    this.layer = new FloatingLayer(null, container);

    /**
     * cached view model
     * @type {object}
     */
    this._viewModel = null;

    /**
     * @type {object}
     */
    this.options = util.extend({
        moreLayerSize: {
            width: null,
            height: null
        },
        scheduleHeight: parseInt(theme.month.schedule.height, 10) || 18,
        scheduleGutter: parseInt(theme.month.schedule.marginTop, 10) || 2,
        scheduleBulletTop: (parseInt(theme.month.schedule.height, 10) || 18) / 3,
        borderRadius: theme.month.schedule.borderRadius
    }, options);

    domevent.on(container, 'click', this._onClick, this);
}
コード例 #8
0
    it('_onDrag() calculate guide element\'s height properly.', function() {
        mockInstance = jasmine.createSpyObj('TimeResizeGuide', ['_refreshGuideElement']);
        util.extend(mockInstance, {
            guideElement: document.createElement('div'),
            _startGridY: 0,
            _startHeightPixel: 10,    // 1 hour
            _startTopPixel: 0
        });

        mockInstance.guideElement.style.top = '0px';

        var scheduleData = {
            relatedView: {
                options: {
                    hourStart: 0,
                    hourEnd: 24
                },
                getViewBound: function() {
                    return {height:230}
                }
            },
            nearestGridY: 1
        };

        Guide.prototype._onDrag.call(mockInstance, scheduleData);

        var args = mockInstance._refreshGuideElement.calls.argsFor(0);

        expect(args[0]).toBeCloseTo(20, 0);
    });
コード例 #9
0
TimeGrid.prototype._getBaseViewModel = function(viewModel) {
    var grids = viewModel.grids;
    var range = viewModel.range;
    var opt = this.options;
    var baseViewModel = this._getHourmarkerViewModel(new TZDate(), grids, range, viewModel.theme);

    return util.extend(baseViewModel, {
        timezones: this._getTimezoneViewModel(baseViewModel.todaymarkerLeft),
        hoursLabels: getHoursLabels(opt.hourStart, opt.hourEnd, baseViewModel.todaymarkerLeft >= 0, 0),
        styles: this._getStyles(viewModel.theme)
    });
};
コード例 #10
0
    _isFlick: function(info) {
        var evtList = {
            list: [
                this.startPos,
                this.savePos
            ]
        };
        var result;

        snippet.extend(evtList, info);
        result = this.movedetect.figure(evtList);

        return result.isFlick;
    },
コード例 #11
0
ファイル: dayname.js プロジェクト: AndroidArt/tui.calendar
DayName.prototype.render = function(viewModel) {
    var dayNames = this._getBaseViewModel(
        viewModel.renderStartDate,
        viewModel.renderEndDate,
        viewModel.grids
    );
    var styles = this._getStyles(this.theme);
    var baseViewModel = util.extend({}, {
        dayNames: dayNames,
        styles: styles
    });

    this.container.innerHTML = daynameTmpl(baseViewModel);
};
コード例 #12
0
 /**
  * Creates an instance of PopupCodeBlockEditor.
  * @param {LayerPopupOption} options - layer popup option
  * @memberof PopupCodeBlockEditor
  */
 constructor(options) {
   const TEMPLATE_CONTENT = `
           <div class="${CLASS_PREFIX}body"></div>
           <div class="te-button-section">
               <button type="button" class="${CLASS_OK_BUTTON}">${i18n.get('OK')}</button>
               <button type="button" class="${CLASS_CLOSE_BUTTON}">${i18n.get('Cancel')}</button>
           </div>
       `;
   options = util.extend({
     header: true,
     title: 'CodeBlock Editor',
     content: TEMPLATE_CONTENT,
     className: 'tui-popup-code-block-editor',
     headerButtons: TEMPLATE_HEADER_BUTTONS,
     modal: true
   }, options);
   super(options);
 }
コード例 #13
0
    init: function(options) {
        var agent = new UAParser().getResult();
        var os = agent.os;

        this.agent = agent;
        this.ua = agent.ua;
        this.osName = os.name;
        this.osVersion = os.version;
        this.detector = null;

        options = snippet.extend({
            usageStatistics: true
        }, options);

        if (options.usageStatistics) {
            snippet.sendHostname('app-loader', 'UA-129987462-1');
        }
    },
コード例 #14
0
ファイル: ajax.js プロジェクト: nhnent/tui.component.tree
    init: function(tree, options) {
        options = snippet.extend({}, options);

        /**
         * Tree
         * @type {Tree}
         */
        this.tree = tree;

        /**
         * Option for each request command
         * @type {Object}
         */
        this.command = options.command;

        /**
         * Callback for parsing the response data
         * @type {?Function}
         */
        this.parseData = options.parseData || null;

        /**
         * Classname of loader element
         * @type {string}
         */
        this.loaderClassName = options.loaderClassName || LOADER_CLASSNAME;

        /**
         * State of loading root data or not
         * @type {boolean}
         */
        this.isLoadRoot = !snippet.isUndefined(options.isLoadRoot) ? options.isLoadRoot : true;

        /**
         * Loader element
         * @type {HTMLElement}
         */
        this.loader = null;

        this._createLoader();

        tree.on('initFeature', snippet.bind(this._onInitFeature, this));
    },
コード例 #15
0
ファイル: more.js プロジェクト: AndroidArt/tui.calendar
More.prototype.render = function(viewModel) {
    var target = domutil.closest(viewModel.target, config.classname('.weekday-grid-line'));
    var weekItem = domutil.closest(target, config.classname('.month-week-item'));
    var layer = this.layer;
    var self = this;
    var pos = this._getRenderPosition(target, weekItem);
    var height = domutil.getSize(weekItem)[1] + (OUT_PADDING * 2);
    var width = target.offsetWidth + (OUT_PADDING * 2);
    var opt = this.options;
    var optMoreLayerSize = opt.moreLayerSize;
    this._viewModel = util.extend(viewModel, {
        scheduleGutter: opt.scheduleGutter,
        scheduleHeight: opt.scheduleHeight,
        scheduleBulletTop: opt.scheduleBulletTop,
        borderRadius: opt.borderRadius
    });

    if (optMoreLayerSize.width) {
        width = optMoreLayerSize.width;
    }

    if (optMoreLayerSize.height) {
        height = optMoreLayerSize.height;
    }

    layer.setContent(tmpl(viewModel));
    if (weekItem.parentElement.lastElementChild === weekItem) {
        layer.setLTRB({
            left: pos[0],
            bottom: 0
        });
        layer.setSize(width, '');
    } else {
        layer.setPosition(pos[0], pos[1]);
        layer.setSize(width, height);
    }

    layer.show();

    util.debounce(function() {
        domevent.on(document.body, 'mousedown', self._onMouseDown, self);
    })();
};
コード例 #16
0
ファイル: dayname.js プロジェクト: AndroidArt/tui.calendar
/**
 * @constructor
 * @param {object} options - options for dayname view
 * @param {HTMLElement} container Container element to use.
 * @param {Theme} theme - theme instance
 * @extends {View}
 */
function DayName(options, container, theme) {
    container = domutil.appendHTMLElement(
        'div',
        container,
        config.classname('dayname-container')
    );

    this.options = util.extend({
        daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    }, options);

    /**
     * @type {Theme}
     */
    this.theme = theme;

    View.call(this, container);

    this.applyTheme();
}
コード例 #17
0
ファイル: schedule.js プロジェクト: AndroidArt/tui.calendar
Schedule.prototype.init = function(options) {
    options = util.extend({}, options);
    if (options.category === SCHEDULE_CATEGORY.ALLDAY) {
        options.isAllDay = true;
    }

    this.id = options.id || '';
    this.title = options.title || '';
    this.isAllDay = util.isExisty(options.isAllDay) ? options.isAllDay : false;
    this.isVisible = util.isExisty(options.isVisible) ? options.isVisible : true;

    this.color = options.color || this.color;
    this.bgColor = options.bgColor || this.bgColor;
    this.dragBgColor = options.dragBgColor || this.dragBgColor;
    this.borderColor = options.borderColor || this.borderColor;
    this.calendarId = options.calendarId || '';
    this.category = options.category || '';
    this.dueDateClass = options.dueDateClass || '';
    this.customStyle = options.customStyle || '';
    this.location = options.location || '';
    this.attendees = options.attendees || [];
    this.recurrenceRule = options.recurrenceRule || '';
    this.isPrivate = options.isPrivate || false;
    this.isPending = options.isPending || false;
    this.isFocused = options.isFocused || false;
    this.isReadOnly = options.isReadOnly || false;

    if (this.isAllDay) {
        this.setAllDayPeriod(options.start, options.end);
    } else {
        this.setTimePeriod(options.start, options.end);
    }

    if (options.category === SCHEDULE_CATEGORY.MILESTONE ||
        options.category === SCHEDULE_CATEGORY.TASK) {
        this.start = new TZDate(this.end);
    }

    this.raw = options.raw || null;
};
コード例 #18
0
    exec: function(options) {
        var timerSet, context;

        options = snippet.extend(defaultOptions, options);
        timerSet = options.timerSet;
        context = {
            urlScheme: options.ios.scheme,
            iosStoreURL: options.ios.url,
            universalLink: options.ios.universalLink,
            intentURI: options.android.intentURI,
            useIframe: options.android.useIframe,
            onErrorIframe: options.android.onErrorIframe,
            etcCallback: options.etcCallback,
            notFoundCallback: options.notFoundCallback
        };

        this._setDetector(context);
        if (timerSet) {
            this._setTimerTime(timerSet);
        }
        this._runDetector(context);
    },
コード例 #19
0
    _getPlaceholderHtml: function(target) {
        var initStyle = util.getStyle(target);
        var placeholderText = target.getAttribute('placeholder');
        var hasValue = target.value !== '';
        var isInput = target.nodeName.toLowerCase() === 'input';
        var styleObj = {
            'display': hasValue ? 'none' : 'inline-block',
            'top': parseInt(initStyle.paddingTop, 10) +
                    parseInt(initStyle.borderTopWidth, 10) + 'px',
            'left': parseInt(initStyle.paddingLeft, 10) +
                    parseInt(initStyle.borderLeftWidth, 10) + 'px',
            'font-size': initStyle.fontSize,
            'font-family': initStyle.fontFamily.replace(/\"/g, '\'')
        };
        var addStyle = !isInput ? {'width': '90%'} : {'white-space': 'nowrap'};

        snippet.extend(styleObj, addStyle);

        return util.applyTemplate(TEMPLATE, {
            style: DEFAULT_STYLE + util.makeStyleText(styleObj),
            placeholderText: placeholderText
        });
    }
コード例 #20
0
ファイル: chart.js プロジェクト: Shmily-Web/tui.editor
/**
 * set default options
 * @param {Object} options - tui.chart options
 * @param {HTMLElement} chartContainer - chart container
 * @returns {Object} - options
 * @see https://nhnent.github.io/tui.chart/latest/tui.chart.html
 * @ignore
 */
function setDefaultOptions(options, chartContainer) {
  options = util.extend({
    editorChart: {},
    chart: {},
    chartExportMenu: {}
  }, options);

  let {width, height} = options.chart;
  const isWidthUndefined = util.isUndefined(width);
  const isHeightUndefined = util.isUndefined(height);
  if (isWidthUndefined || isHeightUndefined) {
    // if no width or height specified, set width and height to container width
    const {
      width: containerWidth
    } = chartContainer.getBoundingClientRect();
    options.chart.width = isWidthUndefined ? containerWidth : width;
    options.chart.height = isHeightUndefined ? containerWidth : height;
  }

  options.editorChart.type = options.editorChart.type ? `${options.editorChart.type}Chart` : 'columnChart';
  options.chartExportMenu.visible = options.chartExportMenu.visible || false;

  return options;
}
コード例 #21
0
        return extend({
            initLoadImage: (imagePath, imageName) => (
                this.loadImageFromURL(imagePath, imageName).then(sizeValue => {
                    exitCropOnAction();
                    this.ui.initializeImgUrl = imagePath;
                    this.ui.resizeEditor({imageSize: sizeValue});
                    this.clearUndoStack();
                })
            ),
            undo: () => {
                if (!this.isEmptyUndoStack()) {
                    exitCropOnAction();
                    this.undo();
                }
            },
            redo: () => {
                if (!this.isEmptyRedoStack()) {
                    exitCropOnAction();
                    this.redo();
                }
            },
            reset: () => {
                exitCropOnAction();
                this.loadImageFromURL(this.ui.initializeImgUrl, 'resetImage').then(sizeValue => {
                    exitCropOnAction();
                    this.ui.resizeEditor({imageSize: sizeValue});
                    this.clearUndoStack();
                });
            },
            delete: () => {
                this.ui.changeDeleteButtonEnabled(false);
                exitCropOnAction();
                this.removeActiveObject();
                this.activeObjectId = null;
            },
            deleteAll: () => {
                exitCropOnAction();
                this.clearObjects();
                this.ui.changeDeleteButtonEnabled(false);
                this.ui.changeDeleteAllButtonEnabled(false);
            },
            load: file => {
                if (!util.isSupportFileApi()) {
                    alert('This browser does not support file-api');
                }

                this.ui.initializeImgUrl = URL.createObjectURL(file);
                this.loadImageFromFile(file).then(sizeValue => {
                    exitCropOnAction();
                    this.clearUndoStack();
                    this.ui.activeMenuEvent();
                    this.ui.resizeEditor({imageSize: sizeValue});
                })['catch'](message => (
                    Promise.reject(message)
                ));
            },
            download: () => {
                const dataURL = this.toDataURL();
                let imageName = this.getImageName();
                let blob, type, w;

                if (util.isSupportFileApi() && window.saveAs) {
                    blob = util.base64ToBlob(dataURL);
                    type = blob.type.split('/')[1];
                    if (imageName.split('.').pop() !== type) {
                        imageName += `.${type}`;
                    }
                    saveAs(blob, imageName); // eslint-disable-line
                } else {
                    w = window.open();
                    w.document.body.innerHTML = `<img src='${dataURL}'>`;
                }
            }
        }, this._commonAction());
コード例 #22
0
ファイル: monthView.js プロジェクト: AndroidArt/tui.calendar
 onSaveNewSchedule = function(scheduleData) {
     creationHandler.fire('beforeCreateSchedule', util.extend(scheduleData, {
         useCreationPopup: true
     }));
 };
コード例 #23
0
 mixin: function(methods) {
     snippet.extend(this, methods);
 }
コード例 #24
0
/**
 * @constructor
 * @extends {View}
 * @param {string} name - view name
 * @param {object} options The object for view customization.
 * @param {string} options.renderStartDate - render start date. YYYY-MM-DD
 * @param {string} options.renderEndDate - render end date. YYYY-MM-DD
 * @param {number} [options.hourStart=0] You can change view's start hours.
 * @param {number} [options.hourEnd=0] You can change view's end hours.
 * @param {HTMLElement} panelElement panel element.
 */
function TimeGrid(name, options, panelElement) {
    var container = domutil.appendHTMLElement(
        'div',
        panelElement,
        config.classname('timegrid-container')
    );
    var stickyContainer = domutil.appendHTMLElement(
        'div',
        panelElement,
        config.classname('timegrid-sticky-container')
    );

    panelElement.style.position = 'relative'; // for stickyContainer

    name = name || 'time';

    View.call(this, container);

    if (!util.browser.safari) {
        /**
         * @type {AutoScroll}
         */
        this._autoScroll = new AutoScroll(container);
    }

    this.stickyContainer = stickyContainer;

    /**
     * Time view options.
     * @type {object}
     */
    this.options = util.extend({
        viewName: name,
        renderStartDate: '',
        renderEndDate: '',
        hourStart: 0,
        hourEnd: 24,
        timezones: options.timezones
    }, options.week);

    /**
     * Interval id for hourmarker animation.
     * @type {number}
     */
    this.intervalID = 0;

    /**
     * timer id for hourmarker initial state
     * @type {number}
     */
    this.timerID = 0;

    /**
     * @type {boolean}
     */
    this._scrolled = false;

    /*
     * cache parent's view model
     * @type {object}
     */
    this._cacheParentViewModel = null;

    this.attachEvent();
}
コード例 #25
0
 const renderData = cellIndexData.map(row => row.map(({rowIndex, colIndex}) => (util.extend({
   align: headerAligns[colIndex]
 }, tableData[rowIndex][colIndex]))));
コード例 #26
0
ファイル: markerList.js プロジェクト: Shmily-Web/tui.editor
  /**
   * updateMarker
   * Update marker with extra information
   * @param {string} id id of marker
   * @param {object} obj extra information
   * @returns {object} marker
   */
  updateMarker(id, obj) {
    const marker = this.getMarker(id);

    return util.extend(marker, obj);
  }