react-components-calendar
Version:
Calendar component for ReactJS
994 lines (824 loc) • 32.5 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["Calendar"] = factory(require("react"));
else
root["Calendar"] = factory(root["react"]);
})(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, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // 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 = "/build/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 11);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _index = __webpack_require__(2);
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Created by simba on 09/11/2017.
*/
var Calendar = function (_React$Component) {
_inherits(Calendar, _React$Component);
function Calendar() {
_classCallCheck(this, Calendar);
var _this = _possibleConstructorReturn(this, (Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call(this));
_this.state = {
today: '',
chooseDate: '',
cur_year: '',
cur_month: '',
weeks_ch: [],
hasEmptyGrid: false,
empytGrids: [],
days: []
};
_this.formatTime = _this.formatTime.bind(_this);
_this.formatNumber = _this.formatNumber.bind(_this);
_this.iniCalendar = _this.iniCalendar.bind(_this);
_this.calculateEmptyGrids = _this.calculateEmptyGrids.bind(_this);
_this.calculateDays = _this.calculateDays.bind(_this);
_this.getThisMonthDays = _this.getThisMonthDays.bind(_this);
_this.getFirstDayOfWeek = _this.getFirstDayOfWeek.bind(_this);
_this.calculateEmptyGrids = _this.calculateEmptyGrids.bind(_this);
_this.calculateDays = _this.calculateDays.bind(_this);
_this.handleCalendar = _this.handleCalendar.bind(_this);
_this.chooseDate = _this.chooseDate.bind(_this);
_this.handleMonth = _this.handleMonth.bind(_this);
return _this;
}
_createClass(Calendar, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.iniCalendar();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {}
//格式化时间
}, {
key: 'formatTime',
value: function formatTime(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return [year, month, day].map(this.formatNumber).join('-');
}
}, {
key: 'formatNumber',
value: function formatNumber(n) {
n = n.toString();
return n[1] ? n : '0' + n;
}
// 初始化日历
}, {
key: 'iniCalendar',
value: function iniCalendar() {
var that = this;
var date = new Date();
var cur_year = date.getFullYear();
var cur_month = date.getMonth() + 1;
var weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
var today = this.formatTime(date);
that.calculateEmptyGrids(cur_year, cur_month);
that.calculateDays(cur_year, cur_month);
that.handleMonth(cur_year + '-' + this.formatNumber(cur_month) + '-01');
that.setState({
today: today,
chooseDate: today,
cur_year: cur_year,
cur_month: cur_month,
weeks_ch: weeks_ch
});
}
// 获取当月共多少天
}, {
key: 'getThisMonthDays',
value: function getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
}
// 获取当月第一天星期几
}, {
key: 'getFirstDayOfWeek',
value: function getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
}
// 计算当月1号前空了几个格子
}, {
key: 'calculateEmptyGrids',
value: function calculateEmptyGrids(year, month) {
var firstDayOfWeek = this.getFirstDayOfWeek(year, month);
var empytGrids = [];
if (firstDayOfWeek > 0) {
for (var i = 0; i < firstDayOfWeek; i++) {
empytGrids.push(i);
}
this.setState({
hasEmptyGrid: true,
empytGrids: empytGrids
});
} else {
this.setState({
hasEmptyGrid: false,
empytGrids: []
});
}
}
// 绘制当月天数占的格子
}, {
key: 'calculateDays',
value: function calculateDays(year, month) {
var days = [];
var day = {};
var thisMonthDays = this.getThisMonthDays(year, month);
for (var i = 1; i <= thisMonthDays; i++) {
day = {
dayNumber: i,
dayDate: year + '-' + this.formatNumber(month) + '-' + this.formatNumber(i)
};
days.push(day);
}
this.setState({
days: days
});
}
// 切换控制年月
}, {
key: 'handleCalendar',
value: function handleCalendar(e) {
var handle = e.currentTarget.dataset.handle;
var cur_year = this.state.cur_year;
var cur_month = this.state.cur_month;
var newMonth = void 0,
newYear = void 0;
if (handle === 'prev') {
newMonth = cur_month - 1;
newYear = cur_year;
if (newMonth < 1) {
newYear = cur_year - 1;
newMonth = 12;
}
} else {
newMonth = cur_month + 1;
newYear = cur_year;
if (newMonth > 12) {
newYear = cur_year + 1;
newMonth = 1;
}
}
this.calculateDays(newYear, newMonth);
this.calculateEmptyGrids(newYear, newMonth);
this.handleMonth(newYear + '-' + this.formatNumber(newMonth) + '-01');
this.setState({
cur_year: newYear,
cur_month: newMonth
});
}
//选择日期
}, {
key: 'chooseDate',
value: function chooseDate(date) {
this.props.chooseDate && this.props.chooseDate(date);
this.setState({
chooseDate: date
});
}
//切换月份
}, {
key: 'handleMonth',
value: function handleMonth(month) {
this.props.handleMonth && this.props.handleMonth(month);
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var weeks = this.state.weeks_ch.map(function (u, i) {
return _react2.default.createElement(
'div',
{ key: i, className: _index2.default.week, 'data-idx': i },
u
);
});
var emptyDays = this.state.empytGrids.map(function (u, i) {
return _react2.default.createElement('div', { key: i, className: _index2.default.dayBox, 'data-idx': i });
});
var days = this.state.days.map(function (u, i) {
var hasRecords = _this2.props.MonthRecords && _this2.props.MonthRecords.includes(u.dayDate);
return _react2.default.createElement(
'div',
{ key: i, className: _index2.default.dayBox, 'data-idx': i, onClick: function onClick() {
return _this2.chooseDate(u.dayDate);
} },
_react2.default.createElement(
'div',
{ className: _index2.default.day + ' ' + (u.dayDate == _this2.state.chooseDate ? _index2.default.today : '') + ' ' + (hasRecords ? _index2.default.hasRecords : ''), 'data-day': u.dayDate },
u.dayNumber
)
);
});
return _react2.default.createElement(
'div',
{ className: _index2.default.calendarBox },
_react2.default.createElement(
'div',
{ className: _index2.default.handleBox },
_react2.default.createElement(
'div',
{ className: _index2.default.handleBtn, onClick: this.handleCalendar, 'data-handle': 'prev' },
'<'
),
_react2.default.createElement(
'div',
{ className: _index2.default.curDate },
this.state.cur_year || "--",
' \u5E74 ',
this.state.cur_month || "--",
' \u6708'
),
_react2.default.createElement(
'div',
{ className: _index2.default.handleBtn, onClick: this.handleCalendar, 'data-handle': 'next' },
'>'
)
),
_react2.default.createElement(
'div',
{ className: _index2.default.weeksBox },
weeks
),
_react2.default.createElement(
'div',
{ className: _index2.default.daysBox },
this.state.hasEmptyGrid ? emptyDays : '',
days
)
);
}
}]);
return Calendar;
}(_react2.default.Component);
exports.default = Calendar;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(3);
if(typeof content === 'string') content = [[module.i, content, '']];
// Prepare cssTransformation
var transform;
var options = {}
options.transform = transform
// add the styles to the DOM
var update = __webpack_require__(5)(content, options);
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../node_modules/css-loader/index.js??ref--1-1!../node_modules/sass-loader/lib/loader.js!./index.scss", function() {
var newContent = require("!!../node_modules/css-loader/index.js??ref--1-1!../node_modules/sass-loader/lib/loader.js!./index.scss");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(4)(undefined);
// imports
// module
exports.push([module.i, "html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Helvetica Neue\", Helvetica, Arial, \"Microsoft Yahei\", \"Hiragino Sans GB\", \"Heiti SC\", \"WenQuanYi Micro Hei\", sans-serif;\n font-style: normal;\n font-weight: normal;\n list-style: none;\n -webkit-tap-highlight-color: transparent; }\n\nhtml, body {\n min-height: 100%;\n height: 100%; }\n\nbody {\n font-size: 12px;\n -webkit-font-smoothing: antialiased;\n -webkit-touch-callout: none;\n -moz-osx-font-smoothing: grayscale; }\n\na {\n text-decoration: none; }\n\nimg {\n max-width: 100%;\n display: block; }\n\na:focus,\ninput:focus,\nbutton:focus {\n outline: 0; }\n\n.index_calendarBox_1Pc {\n background-color: #fff; }\n\n.index_handleBox_pgM {\n display: flex;\n justify-content: center;\n height: 40px; }\n\n.index_handleBtn_2hk {\n width: 40px;\n height: 40px;\n line-height: 36px;\n text-align: center;\n color: #2C2C2C; }\n\n.index_curDate_1w9 {\n width: 186px;\n line-height: 40px;\n font-size: 14px;\n text-align: center;\n color: #2C2C2C; }\n\n.index_weeksBox_2p8 {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center; }\n\n.index_week_3mb {\n flex: 1;\n line-height: 25px;\n height: 25px;\n font-size: 14px;\n text-align: center;\n color: #999;\n cursor: pointer; }\n\n.index_daysBox_1E_ {\n display: block;\n font-size: 0;\n overflow: hidden;\n width: 100%;\n text-align: left; }\n\n.index_dayBox_YeV {\n display: inline-block;\n width: 14.285%;\n height: 50px;\n line-height: 50px;\n text-align: center; }\n\n.index_day_2FO {\n display: inline-block;\n width: 30px;\n height: 30px;\n line-height: 30px;\n color: #000;\n font-size: 12px;\n font-weight: 200;\n text-align: center;\n cursor: pointer; }\n\n.index_today_4Ik {\n color: #fff;\n border-radius: 50%;\n background-color: #62cc74; }\n\n.index_hasRecords_Idi {\n position: relative; }\n\n.index_today_4Ik.index_hasRecords_Idi:before {\n border-color: #fff; }\n\n.index_hasRecords_Idi:before {\n display: block;\n position: absolute;\n content: '';\n width: 5px;\n height: 10px;\n left: 12px;\n bottom: 3px;\n border-right: 1px solid #62cc74;\n border-bottom: 1px solid #62cc74;\n transform: rotate(50deg); }\n", ""]);
// exports
exports.locals = {
"calendarBox": "index_calendarBox_1Pc",
"handleBox": "index_handleBox_pgM",
"handleBtn": "index_handleBtn_2hk",
"curDate": "index_curDate_1w9",
"weeksBox": "index_weeksBox_2p8",
"week": "index_week_3mb",
"daysBox": "index_daysBox_1E_",
"dayBox": "index_dayBox_YeV",
"day": "index_day_2FO",
"today": "index_today_4Ik",
"hasRecords": "index_hasRecords_Idi"
};
/***/ }),
/* 4 */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function(useSourceMap) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if(item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || '';
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
}
// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return '/*# ' + data + ' */';
}
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
var stylesInDom = {};
var memoize = function (fn) {
var memo;
return function () {
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
return memo;
};
};
var isOldIE = memoize(function () {
// Test for IE <= 9 as proposed by Browserhacks
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
// Tests for existence of standard globals is to allow style-loader
// to operate correctly into non-standard environments
// @see https://github.com/webpack-contrib/style-loader/issues/177
return window && document && document.all && !window.atob;
});
var getElement = (function (fn) {
var memo = {};
return function(selector) {
if (typeof memo[selector] === "undefined") {
memo[selector] = fn.call(this, selector);
}
return memo[selector]
};
})(function (target) {
return document.querySelector(target)
});
var singleton = null;
var singletonCounter = 0;
var stylesInsertedAtTop = [];
var fixUrls = __webpack_require__(6);
module.exports = function(list, options) {
if (typeof DEBUG !== "undefined" && DEBUG) {
if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
options = options || {};
options.attrs = typeof options.attrs === "object" ? options.attrs : {};
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (!options.singleton) options.singleton = isOldIE();
// By default, add <style> tags to the <head> element
if (!options.insertInto) options.insertInto = "head";
// By default, add <style> tags to the bottom of the target
if (!options.insertAt) options.insertAt = "bottom";
var styles = listToStyles(list, options);
addStylesToDom(styles, options);
return function update (newList) {
var mayRemove = [];
for (var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
domStyle.refs--;
mayRemove.push(domStyle);
}
if(newList) {
var newStyles = listToStyles(newList, options);
addStylesToDom(newStyles, options);
}
for (var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i];
if(domStyle.refs === 0) {
for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();
delete stylesInDom[domStyle.id];
}
}
};
};
function addStylesToDom (styles, options) {
for (var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
if(domStyle) {
domStyle.refs++;
for(var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j]);
}
for(; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j], options));
}
} else {
var parts = [];
for(var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j], options));
}
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
}
}
}
function listToStyles (list, options) {
var styles = [];
var newStyles = {};
for (var i = 0; i < list.length; i++) {
var item = list[i];
var id = options.base ? item[0] + options.base : item[0];
var css = item[1];
var media = item[2];
var sourceMap = item[3];
var part = {css: css, media: media, sourceMap: sourceMap};
if(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]});
else newStyles[id].parts.push(part);
}
return styles;
}
function insertStyleElement (options, style) {
var target = getElement(options.insertInto)
if (!target) {
throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");
}
var lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];
if (options.insertAt === "top") {
if (!lastStyleElementInsertedAtTop) {
target.insertBefore(style, target.firstChild);
} else if (lastStyleElementInsertedAtTop.nextSibling) {
target.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling);
} else {
target.appendChild(style);
}
stylesInsertedAtTop.push(style);
} else if (options.insertAt === "bottom") {
target.appendChild(style);
} else {
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
}
}
function removeStyleElement (style) {
if (style.parentNode === null) return false;
style.parentNode.removeChild(style);
var idx = stylesInsertedAtTop.indexOf(style);
if(idx >= 0) {
stylesInsertedAtTop.splice(idx, 1);
}
}
function createStyleElement (options) {
var style = document.createElement("style");
options.attrs.type = "text/css";
addAttrs(style, options.attrs);
insertStyleElement(options, style);
return style;
}
function createLinkElement (options) {
var link = document.createElement("link");
options.attrs.type = "text/css";
options.attrs.rel = "stylesheet";
addAttrs(link, options.attrs);
insertStyleElement(options, link);
return link;
}
function addAttrs (el, attrs) {
Object.keys(attrs).forEach(function (key) {
el.setAttribute(key, attrs[key]);
});
}
function addStyle (obj, options) {
var style, update, remove, result;
// If a transform function was defined, run it on the css
if (options.transform && obj.css) {
result = options.transform(obj.css);
if (result) {
// If transform returns a value, use that instead of the original css.
// This allows running runtime transformations on the css.
obj.css = result;
} else {
// If the transform function returns a falsy value, don't add this css.
// This allows conditional loading of css
return function() {
// noop
};
}
}
if (options.singleton) {
var styleIndex = singletonCounter++;
style = singleton || (singleton = createStyleElement(options));
update = applyToSingletonTag.bind(null, style, styleIndex, false);
remove = applyToSingletonTag.bind(null, style, styleIndex, true);
} else if (
obj.sourceMap &&
typeof URL === "function" &&
typeof URL.createObjectURL === "function" &&
typeof URL.revokeObjectURL === "function" &&
typeof Blob === "function" &&
typeof btoa === "function"
) {
style = createLinkElement(options);
update = updateLink.bind(null, style, options);
remove = function () {
removeStyleElement(style);
if(style.href) URL.revokeObjectURL(style.href);
};
} else {
style = createStyleElement(options);
update = applyToTag.bind(null, style);
remove = function () {
removeStyleElement(style);
};
}
update(obj);
return function updateStyle (newObj) {
if (newObj) {
if (
newObj.css === obj.css &&
newObj.media === obj.media &&
newObj.sourceMap === obj.sourceMap
) {
return;
}
update(obj = newObj);
} else {
remove();
}
};
}
var replaceText = (function () {
var textStore = [];
return function (index, replacement) {
textStore[index] = replacement;
return textStore.filter(Boolean).join('\n');
};
})();
function applyToSingletonTag (style, index, remove, obj) {
var css = remove ? "" : obj.css;
if (style.styleSheet) {
style.styleSheet.cssText = replaceText(index, css);
} else {
var cssNode = document.createTextNode(css);
var childNodes = style.childNodes;
if (childNodes[index]) style.removeChild(childNodes[index]);
if (childNodes.length) {
style.insertBefore(cssNode, childNodes[index]);
} else {
style.appendChild(cssNode);
}
}
}
function applyToTag (style, obj) {
var css = obj.css;
var media = obj.media;
if(media) {
style.setAttribute("media", media)
}
if(style.styleSheet) {
style.styleSheet.cssText = css;
} else {
while(style.firstChild) {
style.removeChild(style.firstChild);
}
style.appendChild(document.createTextNode(css));
}
}
function updateLink (link, options, obj) {
var css = obj.css;
var sourceMap = obj.sourceMap;
/*
If convertToAbsoluteUrls isn't defined, but sourcemaps are enabled
and there is no publicPath defined then lets turn convertToAbsoluteUrls
on by default. Otherwise default to the convertToAbsoluteUrls option
directly
*/
var autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;
if (options.convertToAbsoluteUrls || autoFixUrls) {
css = fixUrls(css);
}
if (sourceMap) {
// http://stackoverflow.com/a/26603875
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
}
var blob = new Blob([css], { type: "text/css" });
var oldSrc = link.href;
link.href = URL.createObjectURL(blob);
if(oldSrc) URL.revokeObjectURL(oldSrc);
}
/***/ }),
/* 6 */
/***/ (function(module, exports) {
/**
* When source maps are enabled, `style-loader` uses a link element with a data-uri to
* embed the css on the page. This breaks all relative urls because now they are relative to a
* bundle instead of the current page.
*
* One solution is to only use full urls, but that may be impossible.
*
* Instead, this function "fixes" the relative urls to be absolute according to the current page location.
*
* A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.
*
*/
module.exports = function (css) {
// get current location
var location = typeof window !== "undefined" && window.location;
if (!location) {
throw new Error("fixUrls requires window.location");
}
// blank or null?
if (!css || typeof css !== "string") {
return css;
}
var baseUrl = location.protocol + "//" + location.host;
var currentDir = baseUrl + location.pathname.replace(/\/[^\/]*$/, "/");
// convert each url(...)
/*
This regular expression is just a way to recursively match brackets within
a string.
/url\s*\( = Match on the word "url" with any whitespace after it and then a parens
( = Start a capturing group
(?: = Start a non-capturing group
[^)(] = Match anything that isn't a parentheses
| = OR
\( = Match a start parentheses
(?: = Start another non-capturing groups
[^)(]+ = Match anything that isn't a parentheses
| = OR
\( = Match a start parentheses
[^)(]* = Match anything that isn't a parentheses
\) = Match a end parentheses
) = End Group
*\) = Match anything and then a close parens
) = Close non-capturing group
* = Match anything
) = Close capturing group
\) = Match a close parens
/gi = Get all matches, not the first. Be case insensitive.
*/
var fixedCss = css.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function(fullMatch, origUrl) {
// strip quotes (if they exist)
var unquotedOrigUrl = origUrl
.trim()
.replace(/^"(.*)"$/, function(o, $1){ return $1; })
.replace(/^'(.*)'$/, function(o, $1){ return $1; });
// already a full url? no change
if (/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(unquotedOrigUrl)) {
return fullMatch;
}
// convert the url to a full url
var newUrl;
if (unquotedOrigUrl.indexOf("//") === 0) {
//TODO: should we add protocol?
newUrl = unquotedOrigUrl;
} else if (unquotedOrigUrl.indexOf("/") === 0) {
// path should be relative to the base url
newUrl = baseUrl + unquotedOrigUrl; // already starts with '/'
} else {
// path should be relative to current directory
newUrl = currentDir + unquotedOrigUrl.replace(/^\.\//, ""); // Strip leading './'
}
// send back the fixed url(...)
return "url(" + JSON.stringify(newUrl) + ")";
});
// send back the fixed css
return fixedCss;
};
/***/ }),
/* 7 */,
/* 8 */,
/* 9 */,
/* 10 */,
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ })
/******/ ]);
});