/***/ }),
+/***/ "./js/Util.js":
+/*!********************!*\
+ !*** ./js/Util.js ***!
+ \********************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n MediaLibrary: function MediaLibrary() {\n jQuery(function ($) {\n // Set all variables to be used in scope\n var frame,\n addImgLink = $('.upload-custom-img'),\n delImgLink = $('.delete-custom-img'),\n imgContainer = $('.custom-img-container'),\n imgIdInput = $('.custom-img-id'); // ADD IMAGE LINK\n\n addImgLink.on('click', function (event) {\n event.preventDefault(); // If the media frame already exists, reopen it.\n\n if (frame) {\n frame.open();\n return;\n } // Create a new media frame\n\n\n frame = wp.media({\n title: 'Select or Upload an Image',\n button: {\n text: 'Use this image'\n },\n multiple: false // Set to true to allow multiple files to be selected\n\n });\n console.log(wp); // When an image is selected in the media frame...\n\n frame.on('select', function () {\n // Get media attachment details from the frame state\n var attachment = frame.state().get('selection').first().toJSON(); // Send the attachment URL to our custom image input field.\n\n imgContainer.append('<img src=\"' + attachment.url + '\" alt=\"\" style=\"height: auto;max-width:100%;\"/>'); // Send the attachment id to our hidden input\n\n imgIdInput.val(attachment.id); // Hide the add image link\n\n addImgLink.addClass('hidden'); // Unhide the remove image link\n\n delImgLink.removeClass('hidden');\n }); // Finally, open the modal on click\n\n frame.open();\n }); // DELETE IMAGE LINK\n\n delImgLink.on('click', function (event) {\n event.preventDefault(); // Clear out the preview image\n\n imgContainer.html(''); // Un-hide the add image link\n\n addImgLink.removeClass('hidden'); // Hide the delete image link\n\n delImgLink.addClass('hidden'); // Delete the image id from the hidden input\n\n imgIdInput.val('');\n });\n });\n }\n});\n\n//# sourceURL=webpack:///./js/Util.js?");
+
+/***/ }),
+
/***/ "./js/components/Controller.jsx":
/*!**************************************!*\
!*** ./js/components/Controller.jsx ***!
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var _material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/TextField */ \"./node_modules/@material-ui/core/esm/TextField/index.js\");\n/* harmony import */ var _material_ui_core_styles__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/core/styles */ \"./node_modules/@material-ui/core/esm/styles/index.js\");\n/* harmony import */ var _material_ui_core_Input__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/core/Input */ \"./node_modules/@material-ui/core/esm/Input/index.js\");\n/* harmony import */ var _material_ui_core_OutlinedInput__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @material-ui/core/OutlinedInput */ \"./node_modules/@material-ui/core/esm/OutlinedInput/index.js\");\n/* harmony import */ var _material_ui_core_FilledInput__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @material-ui/core/FilledInput */ \"./node_modules/@material-ui/core/esm/FilledInput/index.js\");\n/* harmony import */ var _material_ui_core_InputLabel__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @material-ui/core/InputLabel */ \"./node_modules/@material-ui/core/esm/InputLabel/index.js\");\n/* harmony import */ var _material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @material-ui/core/MenuItem */ \"./node_modules/@material-ui/core/esm/MenuItem/index.js\");\n/* harmony import */ var _material_ui_core_FormHelperText__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @material-ui/core/FormHelperText */ \"./node_modules/@material-ui/core/esm/FormHelperText/index.js\");\n/* harmony import */ var _material_ui_core_FormControl__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @material-ui/core/FormControl */ \"./node_modules/@material-ui/core/esm/FormControl/index.js\");\n/* harmony import */ var _material_ui_core_Select__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @material-ui/core/Select */ \"./node_modules/@material-ui/core/esm/Select/index.js\");\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar useStyles = Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_5__[\"makeStyles\"])(function (theme) {\n return {\n container: {\n display: 'flex',\n flexWrap: 'wrap'\n },\n textField: {\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(1)\n },\n dense: {\n marginTop: theme.spacing(2)\n },\n menu: {\n width: 200\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120\n },\n selectEmpty: {\n marginTop: theme.spacing(2)\n }\n };\n});\n\nvar NewNotification = function NewNotification() {\n var inputLabel = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(null);\n var classes = useStyles();\n\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(0),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n labelWidth = _React$useState2[0],\n setLabelWidth = _React$useState2[1];\n\n react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(function () {\n setLabelWidth(inputLabel.current.offsetWidth);\n }, []);\n /* Categories for each */\n\n var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState({\n categories: [10],\n name: 'hai'\n }),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n values = _React$useState4[0],\n setValues = _React$useState4[1];\n\n function handleChange(event) {\n setValues(function (oldValues) {\n return _extends({}, oldValues, _defineProperty({}, event.target.name, event.target.value));\n });\n }\n\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n id: \"outlined-search\",\n label: \"Search field\",\n type: \"search\",\n className: classes.textField,\n margin: \"normal\",\n variant: \"outlined\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_FormControl__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n variant: \"outlined\",\n className: classes.formControl\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_InputLabel__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n ref: inputLabel,\n htmlFor: \"outlined-age-simple\"\n }, \"Categories\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_Select__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n multiple: true,\n value: values.categories,\n onChange: handleChange,\n input: react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_OutlinedInput__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n labelWidth: labelWidth,\n name: \"categories\",\n id: \"outlined-categories\"\n })\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n value: ''\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"em\", null, \"None\")), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n value: 10\n }, \"Ten\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n value: 20\n }, \"Twenty\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n value: 30\n }, \"Thirty\"))));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_2__[\"connect\"])(null, null)(NewNotification));\n\n//# sourceURL=webpack:///./js/components/container/NewNotification.jsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var _material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/TextField */ \"./node_modules/@material-ui/core/esm/TextField/index.js\");\n/* harmony import */ var _material_ui_core_styles__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/core/styles */ \"./node_modules/@material-ui/core/esm/styles/index.js\");\n/* harmony import */ var _material_ui_core_Input__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/core/Input */ \"./node_modules/@material-ui/core/esm/Input/index.js\");\n/* harmony import */ var _material_ui_core_OutlinedInput__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @material-ui/core/OutlinedInput */ \"./node_modules/@material-ui/core/esm/OutlinedInput/index.js\");\n/* harmony import */ var _material_ui_core_FilledInput__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @material-ui/core/FilledInput */ \"./node_modules/@material-ui/core/esm/FilledInput/index.js\");\n/* harmony import */ var _material_ui_core_InputLabel__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @material-ui/core/InputLabel */ \"./node_modules/@material-ui/core/esm/InputLabel/index.js\");\n/* harmony import */ var _material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @material-ui/core/MenuItem */ \"./node_modules/@material-ui/core/esm/MenuItem/index.js\");\n/* harmony import */ var _material_ui_core_FormHelperText__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @material-ui/core/FormHelperText */ \"./node_modules/@material-ui/core/esm/FormHelperText/index.js\");\n/* harmony import */ var _material_ui_core_FormControl__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @material-ui/core/FormControl */ \"./node_modules/@material-ui/core/esm/FormControl/index.js\");\n/* harmony import */ var _material_ui_core_Select__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @material-ui/core/Select */ \"./node_modules/@material-ui/core/esm/Select/index.js\");\n/* harmony import */ var _Util__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../Util */ \"./js/Util.js\");\n/* harmony import */ var _material_ui_core_Button__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @material-ui/core/Button */ \"./node_modules/@material-ui/core/esm/Button/index.js\");\n/* harmony import */ var _functional_ImageContainer__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../functional/ImageContainer */ \"./js/components/functional/ImageContainer.jsx\");\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar useStyles = Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_5__[\"makeStyles\"])(function (theme) {\n return {\n container: {\n display: 'flex',\n flexWrap: 'wrap'\n },\n textField: {\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(1)\n },\n dense: {\n marginTop: theme.spacing(2)\n },\n menu: {\n width: 200\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120\n },\n selectEmpty: {\n marginTop: theme.spacing(2)\n },\n button: {\n margin: theme.spacing(1),\n color: \"white\",\n background: \"#0568B3\"\n },\n input: {\n display: 'none'\n }\n };\n});\n\nvar NewNotification = function NewNotification(props) {\n var inputLabel = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(null);\n var classes = useStyles();\n\n var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(0),\n _useState2 = _slicedToArray(_useState, 2),\n labelWidth = _useState2[0],\n setLabelWidth = _useState2[1];\n\n Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(function () {\n _Util__WEBPACK_IMPORTED_MODULE_14__[\"default\"].MediaLibrary();\n setLabelWidth(inputLabel.current.offsetWidth);\n }, []);\n /* Categories for each */\n\n var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])({\n categories: [10]\n }),\n _useState4 = _slicedToArray(_useState3, 2),\n values = _useState4[0],\n setValues = _useState4[1];\n\n function handleChange(event) {\n setValues(function (oldValues) {\n return _extends({}, oldValues, _defineProperty({}, event.target.name, event.target.value));\n });\n }\n\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n id: \"outlined-search\",\n label: \"Search field\",\n type: \"search\",\n className: classes.textField,\n margin: \"normal\",\n variant: \"outlined\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_FormControl__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n variant: \"outlined\",\n className: classes.formControl\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_InputLabel__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n ref: inputLabel,\n htmlFor: \"outlined-age-simple\"\n }, \"Categories\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_Select__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n multiple: true,\n value: values.categories,\n onChange: handleChange,\n input: react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_OutlinedInput__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n labelWidth: labelWidth,\n name: \"categories\",\n id: \"outlined-categories\"\n })\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n value: ''\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"em\", null, \"None\")), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n value: 10\n }, \"Tenx\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n value: 20\n }, \"Twenty\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n value: 30\n }, \"Thirty\"))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n id: \"glm-message-image-container\"\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n variant: \"contained\",\n className: [\"upload-custom-img\", classes.button]\n }, \"Add Image\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_functional_ImageContainer__WEBPACK_IMPORTED_MODULE_16__[\"default\"], null), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n variant: \"contained\",\n className: [\"hidden\", \"delete-custom-img\", classes.button]\n }, \"Remove Image\")));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_2__[\"connect\"])(null, null)(NewNotification));\n\n//# sourceURL=webpack:///./js/components/container/NewNotification.jsx?");
/***/ }),
/***/ }),
+/***/ "./js/components/functional/ImageContainer.jsx":
+/*!*****************************************************!*\
+ !*** ./js/components/functional/ImageContainer.jsx ***!
+ \*****************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (function (props) {\n var height = props.height ? props.height : \"100px\";\n var width = props.width ? props.width : \"200px\";\n var imageContainerStyles = {\n width: width\n };\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n style: imageContainerStyles,\n className: \"custom-img-container\"\n });\n});\n\n//# sourceURL=webpack:///./js/components/functional/ImageContainer.jsx?");
+
+/***/ }),
+
/***/ "./js/components/functional/Routes.jsx":
/*!*********************************************!*\
!*** ./js/components/functional/Routes.jsx ***!
--- /dev/null
+export default {
+ MediaLibrary : () => {
+ jQuery(function ($) {
+ // Set all variables to be used in scope
+ var frame,
+ addImgLink = $('.upload-custom-img'),
+ delImgLink = $('.delete-custom-img'),
+ imgContainer = $('.custom-img-container'),
+ imgIdInput = $('.custom-img-id');
+
+ // ADD IMAGE LINK
+ addImgLink.on('click', function (event) {
+
+ event.preventDefault();
+
+ // If the media frame already exists, reopen it.
+ if (frame) {
+ frame.open();
+ return;
+ }
+
+ // Create a new media frame
+ frame = wp.media({
+ title: 'Select or Upload an Image',
+ button: {
+ text: 'Use this image'
+ },
+ multiple: false // Set to true to allow multiple files to be selected
+ });
+
+ console.log(wp)
+ // When an image is selected in the media frame...
+ frame.on('select', function () {
+
+ // Get media attachment details from the frame state
+ var attachment = frame.state().get('selection').first().toJSON();
+ // Send the attachment URL to our custom image input field.
+
+ imgContainer.append('<img src="' + attachment.url + '" alt="" style="height: auto;max-width:100%;"/>');
+
+ // Send the attachment id to our hidden input
+ imgIdInput.val(attachment.id);
+
+ // Hide the add image link
+ addImgLink.addClass('hidden');
+
+ // Unhide the remove image link
+ delImgLink.removeClass('hidden');
+ });
+
+ // Finally, open the modal on click
+ frame.open();
+ });
+
+
+ // DELETE IMAGE LINK
+ delImgLink.on('click', function (event) {
+
+ event.preventDefault();
+
+ // Clear out the preview image
+ imgContainer.html('');
+
+ // Un-hide the add image link
+ addImgLink.removeClass('hidden');
+
+ // Hide the delete image link
+ delImgLink.addClass('hidden');
+
+ // Delete the image id from the hidden input
+ imgIdInput.val('');
+
+ });
+
+ })
+ }
+}
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
+import Util from '../../Util';
+import Button from '@material-ui/core/Button';
+import ImageContainer from '../functional/ImageContainer';
const useStyles = makeStyles(theme => ({
- container: {
- display: 'flex',
- flexWrap: 'wrap',
- },
- textField: {
- marginLeft: theme.spacing(1),
- marginRight: theme.spacing(1),
- },
- dense: {
- marginTop: theme.spacing(2),
- },
- menu: {
- width: 200,
- },
- formControl: {
- margin: theme.spacing(1),
- minWidth: 120,
- },
- selectEmpty: {
- marginTop: theme.spacing(2),
- },
+ container: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ textField: {
+ marginLeft: theme.spacing(1),
+ marginRight: theme.spacing(1),
+ },
+ dense: {
+ marginTop: theme.spacing(2),
+ },
+ menu: {
+ width: 200,
+ },
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ },
+ selectEmpty: {
+ marginTop: theme.spacing(2),
+ },
+ button: {
+ margin: theme.spacing(1),
+ color: "white",
+ background: "#0568B3"
+ },
+ input: {
+ display: 'none',
+ },
}));
-const NewNotification = () => {
- const inputLabel = useRef(null);
- const classes = useStyles();
- const [labelWidth, setLabelWidth] = React.useState(0);
- React.useEffect(() => {
- setLabelWidth(inputLabel.current.offsetWidth);
- }, []);
-
- /* Categories for each */
- const [values, setValues] = React.useState({
- categories: [10],
- name: 'hai',
- });
-
- function handleChange(event) {
- setValues(oldValues => ({
- ...oldValues,
- [event.target.name]: event.target.value,
- }));
- }
- return (
- <React.Fragment>
- <TextField
- id="outlined-search"
- label="Search field"
- type="search"
- className={classes.textField}
- margin="normal"
- variant="outlined"
- />
+const NewNotification = (props) => {
+ const inputLabel = useRef(null);
+ const classes = useStyles();
+ const [labelWidth, setLabelWidth] = useState(0);
- <FormControl variant="outlined" className={classes.formControl}>
- <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
- Categories
+ useEffect(() => {
+ Util.MediaLibrary();
+ setLabelWidth(inputLabel.current.offsetWidth);
+ }, []);
+
+ /* Categories for each */
+ const [values, setValues] = useState({
+ categories: [10],
+ });
+
+ function handleChange(event) {
+ setValues(oldValues => ({
+ ...oldValues,
+ [event.target.name]: event.target.value,
+ }));
+ }
+ return (
+ <React.Fragment>
+ <TextField
+ id="outlined-search"
+ label="Search field"
+ type="search"
+ className={classes.textField}
+ margin="normal"
+ variant="outlined"
+ />
+
+ <FormControl variant="outlined" className={classes.formControl}>
+ <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
+ Categories
</InputLabel>
- <Select
- multiple
- value={values.categories}
- onChange={handleChange}
- input={<OutlinedInput labelWidth={labelWidth} name="categories" id="outlined-categories" />}
- >
- <MenuItem value={''}>
- <em>None</em>
- </MenuItem>
- <MenuItem value={10}>Ten</MenuItem>
- <MenuItem value={20}>Twenty</MenuItem>
- <MenuItem value={30}>Thirty</MenuItem>
- </Select>
- </FormControl>
- </React.Fragment>
- )
+ <Select
+ multiple
+ value={values.categories}
+ onChange={handleChange}
+ input={<OutlinedInput labelWidth={labelWidth} name="categories" id="outlined-categories" />}
+ >
+ <MenuItem value={''}>
+ <em>None</em>
+ </MenuItem>
+ <MenuItem value={10}>Tenx</MenuItem>
+ <MenuItem value={20}>Twenty</MenuItem>
+ <MenuItem value={30}>Thirty</MenuItem>
+ </Select>
+ </FormControl>
+ <div id="glm-message-image-container">
+ <Button variant="contained" className={["upload-custom-img", classes.button]}>Add Image</Button>
+ <ImageContainer />
+ <Button variant="contained" className={["hidden","delete-custom-img", classes.button]}>Remove Image</Button>
+ </div>
+
+ </React.Fragment>
+ )
}
-export default connect(null,null)(NewNotification)
\ No newline at end of file
+export default connect(null, null)(NewNotification)
\ No newline at end of file
--- /dev/null
+import React, { Component, Fragment, useState, useEffect, useRef } from 'react';
+
+export default (props) => {
+ const height = (props.height) ? props.height : "100px";
+ const width = (props.width) ? props.width : "200px";
+ const imageContainerStyles = {
+ width: width,
+ }
+ return (
+ <div style={imageContainerStyles} className="custom-img-container"></div>
+ )
+}
\ No newline at end of file
wp_enqueue_style( 'glma_admin_css' );
wp_register_style( 'glma_admin_lib_css',GLM_MEMBERS_MOBILE_NOTIFICATIONS_PLUGIN_URL.'dist/css/glma-mobile-notifications.min.css');
wp_enqueue_style( 'glma_admin_lib_css' );
+ wp_enqueue_media( );
// Compile template data.
$templateData = array(
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"aproba": {
"version": "1.2.0",
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
"version": "1.0.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
"version": "3.0.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
"version": "0.5.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
"version": "1.4.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"safer-buffer": {
"version": "2.1.2",
"version": "1.0.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
"version": "3.0.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
"wrappy": {
"version": "1.0.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
}
}
},
projects / WP-Plugins / glm-member-db-mobile-notifications.git / commitdiff