v-md-editor
Version:
A markdown editor built on Vue
1,393 lines (1,313 loc) • 66.2 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("vue"));
else if(typeof define === 'function' && define.amd)
define("VMdEditor", ["vue"], factory);
else if(typeof exports === 'object')
exports["VMdEditor"] = factory(require("vue"));
else
root["VMdEditor"] = factory(root["Vue"]);
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE__0__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 134);
/******/ })
/************************************************************************/
/******/ ({
/***/ 0:
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__0__;
/***/ }),
/***/ 10:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// EXTERNAL MODULE: external {"root":"Vue","commonjs":"vue","commonjs2":"vue","amd":"vue"}
var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_ = __webpack_require__(0);
// EXTERNAL MODULE: ./src/utils/resize-event.js
var resize_event = __webpack_require__(6);
// CONCATENATED MODULE: ./src/utils/scrollbar-width.js
// Modified from https://github.com/ElemeFE/element/blob/dev/src/utils/scrollbar-width.js
var scrollBarWidth;
var isServer = typeof window === 'undefined';
/* harmony default export */ var scrollbar_width = (function () {
if (isServer) return 0;
if (scrollBarWidth !== undefined) return scrollBarWidth;
var outer = document.createElement('div');
outer.className = 'scrollbar__wrap';
outer.style.visibility = 'hidden';
outer.style.width = '100px';
outer.style.position = 'absolute';
outer.style.top = '-9999px';
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
outer.style.overflow = 'scroll';
var inner = document.createElement('div');
inner.style.width = '100%';
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
outer.parentNode.removeChild(outer);
scrollBarWidth = widthNoScroll - widthWithScroll;
return scrollBarWidth;
});
// EXTERNAL MODULE: ./src/utils/util.js
var util = __webpack_require__(2);
// CONCATENATED MODULE: ./src/components/scrollbar/util.js
// Modified from https://github.com/ElemeFE/element/tree/dev/packages/scrollbar
var BAR_MAP = {
vertical: {
offset: 'offsetHeight',
scroll: 'scrollTop',
scrollSize: 'scrollHeight',
size: 'height',
key: 'vertical',
axis: 'Y',
client: 'clientY',
direction: 'top'
},
horizontal: {
offset: 'offsetWidth',
scroll: 'scrollLeft',
scrollSize: 'scrollWidth',
size: 'width',
key: 'horizontal',
axis: 'X',
client: 'clientX',
direction: 'left'
}
};
function renderThumbStyle(_ref) {
var move = _ref.move,
size = _ref.size,
bar = _ref.bar;
var style = {};
var translate = "translate" + bar.axis + "(" + move + "%)";
style[bar.size] = size;
style.transform = translate;
style.msTransform = translate;
style.webkitTransform = translate;
return style;
}
// CONCATENATED MODULE: ./src/components/scrollbar/bar.js
// Modified from https://github.com/ElemeFE/element/tree/dev/packages/scrollbar
/* istanbul ignore next */
/* harmony default export */ var scrollbar_bar = ({
name: 'Bar',
props: {
vertical: Boolean,
size: String,
move: Number
},
computed: {
bar: function bar() {
return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'];
},
wrap: function wrap() {
return this.$parent.wrap;
}
},
render: function render() {
var size = this.size,
move = this.move,
bar = this.bar;
return Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["createVNode"])("div", {
"class": ['scrollbar__bar', 'is-' + bar.key],
"onMousedown": this.clickTrackHandler,
"onClick": function onClick(e) {
return e.stopPropagation();
}
}, [Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["createVNode"])("div", {
"ref": "thumb",
"class": "scrollbar__thumb",
"onMousedown": this.clickThumbHandler,
"style": renderThumbStyle({
size: size,
move: move,
bar: bar
})
}, null)]);
},
methods: {
clickThumbHandler: function clickThumbHandler(e) {
// prevent click event of right button
if (e.ctrlKey || e.button === 2) {
return;
}
this.startDrag(e);
this[this.bar.axis] = e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]);
},
clickTrackHandler: function clickTrackHandler(e) {
var offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
var thumbHalf = this.$refs.thumb[this.bar.offset] / 2;
var thumbPositionPercentage = (offset - thumbHalf) * 100 / this.$el[this.bar.offset];
this.wrap[this.bar.scroll] = thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100;
},
startDrag: function startDrag(e) {
e.stopImmediatePropagation();
this.cursorDown = true;
document.addEventListener('mousemove', this.mouseMoveDocumentHandler, false);
document.addEventListener('mouseup', this.mouseUpDocumentHandler, false);
document.onselectstart = function () {
return false;
};
},
mouseMoveDocumentHandler: function mouseMoveDocumentHandler(e) {
if (this.cursorDown === false) return;
var prevPage = this[this.bar.axis];
if (!prevPage) return;
var offset = (this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1;
var thumbClickPosition = this.$refs.thumb[this.bar.offset] - prevPage;
var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / this.$el[this.bar.offset];
this.wrap[this.bar.scroll] = thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100;
},
mouseUpDocumentHandler: function mouseUpDocumentHandler() {
this.cursorDown = false;
this[this.bar.axis] = 0;
document.removeEventListener('mousemove', this.mouseMoveDocumentHandler, false);
document.onselectstart = null;
}
},
unmounted: function unmounted() {
document.removeEventListener('mouseup', this.mouseUpDocumentHandler, false);
}
});
// EXTERNAL MODULE: ./src/utils/smooth-scroll.js
var smooth_scroll = __webpack_require__(9);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--3!./node_modules/vue-loader/dist??ref--2-0!./src/components/scrollbar/index.vue?vue&type=script&lang=js
// Modified from https://github.com/ElemeFE/element/tree/dev/packages/scrollbar
/* harmony default export */ var scrollbarvue_type_script_lang_js = ({
name: 'scrollbar',
components: {
Bar: scrollbar_bar
},
props: {
native: Boolean,
disabled: Boolean,
wrapStyle: null,
wrapClass: null,
viewClass: null,
viewStyle: null,
noresize: Boolean,
// 如果 container 尺寸不会发生变化，最好设置它可以优化性能
tag: {
type: String,
default: 'div'
}
},
emits: ['scroll'],
data: function data() {
return {
sizeWidth: '0',
sizeHeight: '0',
moveX: 0,
moveY: 0
};
},
computed: {
wrap: function wrap() {
return this.$refs.wrap;
}
},
mounted: function mounted() {
if (this.native || this.disabled) return;
this.$nextTick(this.update);
!this.noresize && Object(resize_event["a" /* addResizeListener */])(this.$refs.resize, this.update);
},
beforeUnmount: function beforeUnmount() {
if (this.native || this.disabled) return;
!this.noresize && Object(resize_event["b" /* removeResizeListener */])(this.$refs.resize, this.update);
},
methods: {
getScrollInfo: function getScrollInfo() {
var wrap = this.wrap;
return {
left: wrap.scrollLeft,
top: wrap.scrollTop,
width: wrap.scrollWidth,
height: wrap.scrollHeight,
clientWidth: wrap.clientWidth,
clientHeight: wrap.clientHeight
};
},
scrollTo: function scrollTo(scrollTop) {
Object(smooth_scroll["a" /* default */])({
scrollTarget: this.wrap,
scrollToTop: scrollTop
});
},
handleScroll: function handleScroll() {
var wrap = this.wrap;
this.moveY = wrap.scrollTop * 100 / wrap.clientHeight;
this.moveX = wrap.scrollLeft * 100 / wrap.clientWidth;
this.$emit('scroll');
},
update: function update() {
var wrap = this.wrap;
if (!wrap) return;
var heightPercentage = wrap.clientHeight * 100 / wrap.scrollHeight;
var widthPercentage = wrap.clientWidth * 100 / wrap.scrollWidth;
this.sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : '';
this.sizeWidth = widthPercentage < 100 ? widthPercentage + '%' : '';
}
},
render: function render() {
if (this.disabled) return this.$slots.default();
var gutter = scrollbar_width();
var style = this.wrapStyle;
if (gutter) {
var scrollView = this.$refs.resize;
var wrapper = this.$refs.wrap;
var scrollViewHeight = scrollView == null ? void 0 : scrollView.scrollHeight;
var scrollViewWidth = scrollView == null ? void 0 : scrollView.scrollWidth;
var wrapperHeight = wrapper == null ? void 0 : wrapper.clientHeight;
var wrapperWidth = wrapper == null ? void 0 : wrapper.clientWidth;
var gutterWith = "-" + gutter + "px";
var marginBottom = scrollViewWidth > wrapperWidth ? gutterWith : 0;
var marginRight = scrollViewHeight > wrapperHeight ? gutterWith : 0;
var gutterStyle = "margin-bottom: " + marginBottom + "; margin-right: " + marginRight + ";";
if (Array.isArray(this.wrapStyle)) {
style = Object(util["a" /* arraytoObject */])(this.wrapStyle);
style.marginRight = gutterWith;
style.marginBottom = gutterWith;
} else if (typeof this.wrapStyle === 'string') {
style += gutterStyle;
} else {
style = gutterStyle;
}
}
var view = Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["h"])(this.tag, {
class: ['scrollbar__view', this.viewClass],
style: this.viewStyle,
ref: 'resize'
}, this.$slots.default());
var wrap = Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["createVNode"])("div", {
"ref": "wrap",
"style": style,
"onScroll": this.handleScroll,
"class": [this.wrapClass, 'scrollbar__wrap', gutter ? '' : 'scrollbar__wrap--hidden-default']
}, [[view]]);
var nodes;
if (!this.native) {
nodes = [wrap, Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["createVNode"])(scrollbar_bar, {
"move": this.moveX,
"size": this.sizeWidth
}, null), Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["createVNode"])(scrollbar_bar, {
"vertical": true,
"move": this.moveY,
"size": this.sizeHeight
}, null)];
} else {
nodes = [Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["createVNode"])("div", {
"ref": "wrap",
"class": [this.wrapClass, 'scrollbar__wrap'],
"style": style
}, [[view]])];
}
return Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["h"])('div', {
class: 'scrollbar'
}, nodes);
}
});
// CONCATENATED MODULE: ./src/components/scrollbar/index.vue?vue&type=script&lang=js
// EXTERNAL MODULE: ./src/components/scrollbar/index.vue?vue&type=style&index=0&id=887b7bde&lang=scss
var scrollbarvue_type_style_index_0_id_887b7bde_lang_scss = __webpack_require__(32);
// CONCATENATED MODULE: ./src/components/scrollbar/index.vue
const __exports__ = scrollbarvue_type_script_lang_js;
/* harmony default export */ var scrollbar = __webpack_exports__["a"] = (__exports__);
/***/ }),
/***/ 134:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: external {"root":"Vue","commonjs":"vue","commonjs2":"vue","amd":"vue"}
var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_ = __webpack_require__(0);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--3!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--2-0!./src/preview-html.vue?vue&type=template&id=1cd8edb9
var _hoisted_1 = ["innerHTML"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
return Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["openBlock"])(), Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["createElementBlock"])("div", {
class: "v-md-editor-preview",
style: Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["normalizeStyle"])({
tabSize: _ctx.tabSize,
'-moz-tab-size': _ctx.tabSize,
'-o-tab-size': _ctx.tabSize
}),
onClick: _cache[0] || (_cache[0] = function () {
return _ctx.handlePreviewClick && _ctx.handlePreviewClick.apply(_ctx, arguments);
})
}, [Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["createElementVNode"])("div", {
class: Object(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_["normalizeClass"])([$props.previewClass]),
innerHTML: $props.html
}, null, 10 /* CLASS, PROPS */, _hoisted_1)], 4 /* STYLE */);
}
// CONCATENATED MODULE: ./src/preview-html.vue?vue&type=template&id=1cd8edb9
// EXTERNAL MODULE: ./src/mixins/preview.js
var preview = __webpack_require__(21);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--3!./node_modules/vue-loader/dist??ref--2-0!./src/preview-html.vue?vue&type=script&lang=js
/* harmony default export */ var preview_htmlvue_type_script_lang_js = ({
name: 'v-md-preview-html',
mixins: [preview["a" /* default */]],
props: {
html: {
type: String,
default: ''
},
previewClass: String
}
});
// CONCATENATED MODULE: ./src/preview-html.vue?vue&type=script&lang=js
// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
var exportHelper = __webpack_require__(3);
var exportHelper_default = /*#__PURE__*/__webpack_require__.n(exportHelper);
// CONCATENATED MODULE: ./src/preview-html.vue
const __exports__ = /*#__PURE__*/exportHelper_default()(preview_htmlvue_type_script_lang_js, [['render',render]])
/* harmony default export */ var preview_html = (__exports__);
// EXTERNAL MODULE: ./src/assets/css/font.css
var font = __webpack_require__(24);
// CONCATENATED MODULE: ./src/preview-html.js
// This file is auto generated by build/build-entry.js
// font css
var version = '1.0.6';
var preview_html_install = function install(app) {
app.component(preview_html.name, preview_html);
};
preview_html.version = version;
preview_html.install = preview_html_install;
preview_html.use = function (optionsOrInstall, opt) {
if (typeof optionsOrInstall === 'function') {
optionsOrInstall(preview_html, opt);
} else {
optionsOrInstall.install(preview_html, opt);
}
return preview_html;
};
/* harmony default export */ var src_preview_html = __webpack_exports__["default"] = (preview_html);
/***/ }),
/***/ 2:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return isObject; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return arraytoObject; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return importAll; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return inBrowser; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return isKorean; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return generatorText; });
var toString = Object.prototype.toString;
var isObject = function isObject(target) {
return toString.call(target) === '[object Object]';
};
function extend(to, _from) {
Object.keys(_from).forEach(function (key) {
to[key] = _from[key];
});
return to;
}
function arraytoObject(arr) {
var res = {};
for (var i = 0; i < arr.length; i++) {
if (arr[i]) {
extend(res, arr[i]);
}
}
return res;
}
function importAll(map, r) {
r.keys().forEach(function (filePath) {
map[filePath] = r(filePath);
});
}
var inBrowser = typeof window !== 'undefined';
function isKorean(text) {
var reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
return reg.test(text);
}
function generatorText(_ref) {
var selected = _ref.selected,
InsertGetter = _ref.InsertGetter,
_ref$selectedGetter = _ref.selectedGetter,
selectedGetter = _ref$selectedGetter === void 0 ? function (selected) {
return selected;
} : _ref$selectedGetter,
_ref$ignoreEmptyLine = _ref.ignoreEmptyLine,
ignoreEmptyLine = _ref$ignoreEmptyLine === void 0 ? true : _ref$ignoreEmptyLine;
var insertContent;
var newSelected;
if (selected) {
newSelected = selectedGetter(selected);
insertContent = InsertGetter(selected, 1);
// 如果当前选中的文本包含换行 则插入后选中插入的所有文本
if (selected.indexOf('\n') !== -1) {
insertContent = selected.split('\n').map(function (rowText, index) {
var isEmptyLine = !rowText;
if (ignoreEmptyLine && isEmptyLine) return '';
return InsertGetter(rowText, index + 1).replace(selectedGetter(null), '');
}).join('\n');
newSelected = insertContent;
}
} else {
insertContent = InsertGetter(null, 1);
newSelected = selectedGetter(selected);
}
return {
insertContent: insertContent,
newSelected: newSelected
};
}
/***/ }),
/***/ 20:
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
/***/ }),
/***/ 21:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var _utils_scroll_top__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
/* harmony import */ var _utils_smooth_scroll__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
/* harmony import */ var _components_scrollbar_index__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
/* harmony import */ var _utils_constants_markup__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
var _components;
/* harmony default export */ __webpack_exports__["a"] = ({
components: (_components = {}, _components[_components_scrollbar_index__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].name] = _components_scrollbar_index__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _components),
props: {
tabSize: {
type: Number,
default: 2
},
scrollContainer: {
type: Function,
default: function _default() {
return window;
}
},
top: {
type: Number,
default: 0
}
},
emits: ['image-click'],
methods: {
handlePreviewClick: function handlePreviewClick(e) {
var target = e.target;
// image preview
if (target.tagName === 'IMG') {
var src = target.getAttribute('src');
if (!src) return;
var imageEls = Array.from(this.$el.querySelectorAll('img'));
var images = imageEls.map(function (el) {
return el.getAttribute('src');
}).filter(function (src) {
return src;
});
var imagePreviewInitIndex = imageEls.indexOf(target);
this.$emit('image-click', images, imagePreviewInitIndex);
return;
}
var scrollToTargetId = target.getAttribute(_utils_constants_markup__WEBPACK_IMPORTED_MODULE_3__[/* ANCHOR_MARKUP */ "a"]);
var scrollToTarget = this.$el.querySelector("[" + _utils_constants_markup__WEBPACK_IMPORTED_MODULE_3__[/* HEADING_MARKUP */ "b"] + "=\"" + scrollToTargetId + "\"]");
if (scrollToTarget) {
this.scrollToTarget({
target: scrollToTarget
});
}
},
getOffsetTop: function getOffsetTop(target, container) {
var rect = target.getBoundingClientRect();
if (container === window || container === document.documentElement) {
return rect.top;
}
return rect.top - container.getBoundingClientRect().top;
},
scrollToTarget: function scrollToTarget(_ref) {
var target = _ref.target,
_ref$scrollContainer = _ref.scrollContainer,
scrollContainer = _ref$scrollContainer === void 0 ? this.scrollContainer() : _ref$scrollContainer,
_ref$top = _ref.top,
top = _ref$top === void 0 ? this.top : _ref$top,
onScrollEnd = _ref.onScrollEnd;
var offsetTop = this.getOffsetTop(target, scrollContainer);
var scrollTop = Object(_utils_scroll_top__WEBPACK_IMPORTED_MODULE_0__[/* getScrollTop */ "a"])(scrollContainer) + offsetTop - top;
Object(_utils_smooth_scroll__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"])({
scrollTarget: scrollContainer,
scrollToTop: scrollTop,
onScrollEnd: onScrollEnd
});
},
scrollToLine: function scrollToLine(_ref2) {
var lineIndex = _ref2.lineIndex,
onScrollEnd = _ref2.onScrollEnd;
if (lineIndex) {
var target = this.$el.querySelector("[" + _utils_constants_markup__WEBPACK_IMPORTED_MODULE_3__[/* LINE_MARKUP */ "c"] + "=\"" + lineIndex + "\"]");
if (target) this.scrollToTarget({
target: target,
onScrollEnd: onScrollEnd
});
}
}
}
});
/***/ }),
/***/ 22:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(global) {/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) { ctx = null; }
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1 = (function () {
if (typeof global !== 'undefined' && global.Math === Math) {
return global;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle (callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function'); };
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRe