/**
* 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;
}
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;
};
/**
* constructor
* @param {object} options - popup options
*/
constructor(options) {
options = util.extend({
header: false,
className: 'te-dropdown-toolbar'
}, options);
super(options);
}
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'));
}
};
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();
}
},
/**
* @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;
}
/**
* @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);
}
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);
});
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)
});
};
_isFlick: function(info) {
var evtList = {
list: [
this.startPos,
this.savePos
]
};
var result;
snippet.extend(evtList, info);
result = this.movedetect.figure(evtList);
return result.isFlick;
},
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);
};
/**
* 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);
}
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');
}
},
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));
},
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);
})();
};
/**
* @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();
}
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;
};
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);
},
_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
});
}
/**
* 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;
}
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());
onSaveNewSchedule = function(scheduleData) {
creationHandler.fire('beforeCreateSchedule', util.extend(scheduleData, {
useCreationPopup: true
}));
};
mixin: function(methods) {
snippet.extend(this, methods);
}
/**
* @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();
}
const renderData = cellIndexData.map(row => row.map(({rowIndex, colIndex}) => (util.extend({
align: headerAligns[colIndex]
}, tableData[rowIndex][colIndex]))));
/**
* 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);
}
