\n
\n );\n }\n\n /**\n * Determine whether or not the modal should be dismissible via an 'x' button.\n *\n * @return {Boolean}\n */\n isDismissible() {\n return true;\n }\n\n /**\n * Get the class name to apply to the modal.\n *\n * @return {String}\n * @abstract\n */\n className() {}\n\n /**\n * Get the title of the modal dialog.\n *\n * @return {String}\n * @abstract\n */\n title() {}\n\n /**\n * Get the content of the modal.\n *\n * @return {VirtualElement}\n * @abstract\n */\n content() {}\n\n /**\n * Handle the modal form's submit event.\n *\n * @param {Event} e\n */\n onsubmit() {}\n\n /**\n * Focus on the first input when the modal is ready to be used.\n */\n onready() {\n this.$('form').find('input, select, textarea').first().focus().select();\n }\n\n onhide() {}\n\n /**\n * Hide the modal.\n */\n hide() {\n app.modal.close();\n }\n\n /**\n * Stop loading.\n */\n loaded() {\n this.loading = false;\n m.redraw();\n }\n\n /**\n * Show an alert describing an error returned from the API, and give focus to\n * the first relevant field.\n *\n * @param {RequestError} error\n */\n onerror(error) {\n this.alert = error.alert;\n\n m.redraw();\n\n if (error.status === 422 && error.response.errors) {\n this.$('form [name=' + error.response.errors[0].source.pointer.replace('/data/attributes/', '') + ']').select();\n } else {\n this.onready();\n }\n }\n}\n","import Component from '../Component';\nimport icon from '../helpers/icon';\nimport listItems from '../helpers/listItems';\n\n/**\n * The `Dropdown` component displays a button which, when clicked, shows a\n * dropdown menu beneath it.\n *\n * ### Props\n *\n * - `buttonClassName` A class name to apply to the dropdown toggle button.\n * - `menuClassName` A class name to apply to the dropdown menu.\n * - `icon` The name of an icon to show in the dropdown toggle button.\n * - `caretIcon` The name of an icon to show on the right of the button.\n * - `label` The label of the dropdown toggle button. Defaults to 'Controls'.\n * - `onhide`\n * - `onshow`\n *\n * The children will be displayed as a list inside of the dropdown menu.\n */\nexport default class Dropdown extends Component {\n static initProps(props) {\n super.initProps(props);\n\n props.className = props.className || '';\n props.buttonClassName = props.buttonClassName || '';\n props.menuClassName = props.menuClassName || '';\n props.label = props.label || '';\n props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fas fa-caret-down';\n }\n\n init() {\n this.showing = false;\n }\n\n view() {\n const items = this.props.children ? listItems(this.props.children) : [];\n\n return (\n \n {this.isDismissible() ? (\n
\n \n {Button.component({\n icon: 'fas fa-times',\n onclick: this.hide.bind(this),\n className: 'Button Button--icon Button--link',\n })}\n
\n ) : (\n ''\n )}\n\n \n \n {this.getButton()}\n {this.getMenu(items)}\n
\n );\n }\n\n config(isInitialized) {\n if (isInitialized) return;\n\n // When opening the dropdown menu, work out if the menu goes beyond the\n // bottom of the viewport. If it does, we will apply class to make it show\n // above the toggle button instead of below it.\n this.$().on('shown.bs.dropdown', () => {\n this.showing = true;\n\n if (this.props.onshow) {\n this.props.onshow();\n }\n\n m.redraw();\n\n const $menu = this.$('.Dropdown-menu');\n const isRight = $menu.hasClass('Dropdown-menu--right');\n\n $menu.removeClass('Dropdown-menu--top Dropdown-menu--right');\n\n $menu.toggleClass('Dropdown-menu--top', $menu.offset().top + $menu.height() > $(window).scrollTop() + $(window).height());\n\n if ($menu.offset().top < 0) {\n $menu.removeClass('Dropdown-menu--top');\n }\n\n $menu.toggleClass('Dropdown-menu--right', isRight || $menu.offset().left + $menu.width() > $(window).scrollLeft() + $(window).width());\n });\n\n this.$().on('hidden.bs.dropdown', () => {\n this.showing = false;\n\n if (this.props.onhide) {\n this.props.onhide();\n }\n\n m.redraw();\n });\n }\n\n /**\n * Get the template for the button.\n *\n * @return {*}\n * @protected\n */\n getButton() {\n return (\n \n );\n }\n\n /**\n * Get the template for the button's content.\n *\n * @return {*}\n * @protected\n */\n getButtonContent() {\n return [\n this.props.icon ? icon(this.props.icon, { className: 'Button-icon' }) : '',\n {this.props.label},\n this.props.caretIcon ? icon(this.props.caretIcon, { className: 'Button-caret' }) : '',\n ];\n }\n\n getMenu(items) {\n return - {items}
{m.trust(' ')}
;\n }\n\n config(isInitialized) {\n if (isInitialized) return;\n\n const options = { zIndex: 'auto', color: this.$().css('color') };\n\n switch (this.props.size) {\n case 'large':\n Object.assign(options, { lines: 10, length: 8, width: 4, radius: 8 });\n break;\n\n case 'tiny':\n Object.assign(options, { lines: 8, length: 2, width: 2, radius: 3 });\n break;\n\n default:\n Object.assign(options, { lines: 8, length: 4, width: 3, radius: 5 });\n }\n\n new Spinner(options).spin(this.element);\n }\n}\n","/**\n * The `avatar` helper displays a user's avatar.\n *\n * @param {User} user\n * @param {Object} attrs Attributes to apply to the avatar element\n * @return {Object}\n */\nexport default function avatar(user, attrs = {}) {\n attrs.className = 'Avatar ' + (attrs.className || '');\n let content = '';\n\n // If the `title` attribute is set to null or false, we don't want to give the\n // avatar a title. On the other hand, if it hasn't been given at all, we can\n // safely default it to the user's username.\n const hasTitle = attrs.title === 'undefined' || attrs.title;\n if (!hasTitle) delete attrs.title;\n\n // If a user has been passed, then we will set up an avatar using their\n // uploaded image, or the first letter of their username if they haven't\n // uploaded one.\n if (user) {\n const username = user.displayName() || '?';\n const avatarUrl = user.avatarUrl();\n\n if (hasTitle) attrs.title = attrs.title || username;\n\n if (avatarUrl) {\n return \n {children}\n
\n );\n }\n}\n","/**\n * The `username` helper displays a user's username in a \n * tag. If the user doesn't exist, the username will be displayed as [deleted].\n *\n * @param {User} user\n * @return {Object}\n */\nexport default function username(user) {\n const name = (user && user.displayName()) || app.translator.trans('core.lib.username.deleted_text');\n\n return {name};\n}\n","/**\n * The `computed` utility creates a function that will cache its output until\n * any of the dependent values are dirty.\n *\n * @param {...String} dependentKeys The keys of the dependent values.\n * @param {function} compute The function which computes the value using the\n * dependent values.\n * @return {Function}\n */\nexport default function computed(...dependentKeys) {\n const keys = dependentKeys.slice(0, -1);\n const compute = dependentKeys.slice(-1)[0];\n\n const dependentValues = {};\n let computedValue;\n\n return function () {\n let recompute = false;\n\n // Read all of the dependent values. If any of them have changed since last\n // time, then we'll want to recompute our output.\n keys.forEach((key) => {\n const value = typeof this[key] === 'function' ? this[key]() : this[key];\n\n if (dependentValues[key] !== value) {\n recompute = true;\n dependentValues[key] = value;\n }\n });\n\n if (recompute) {\n computedValue = compute.apply(\n this,\n keys.map((key) => dependentValues[key])\n );\n }\n\n return computedValue;\n };\n}\n","import Button from './Button';\n\n/**\n * The `LinkButton` component defines a `Button` which links to a route.\n *\n * ### Props\n *\n * All of the props accepted by `Button`, plus:\n *\n * - `active` Whether or not the page that this button links to is currently\n * active.\n * - `href` The URL to link to. If the current URL `m.route()` matches this,\n * the `active` prop will automatically be set to true.\n */\nexport default class LinkButton extends Button {\n static initProps(props) {\n props.active = this.isActive(props);\n props.config = props.config || m.route;\n }\n\n view() {\n const vdom = super.view();\n\n vdom.tag = 'a';\n\n return vdom;\n }\n\n /**\n * Determine whether a component with the given props is 'active'.\n *\n * @param {Object} props\n * @return {Boolean}\n */\n static isActive(props) {\n return typeof props.active !== 'undefined' ? props.active : m.route() === props.href;\n }\n}\n","import Component from '../Component';\n\n/**\n * The `Separator` component defines a menu separator item.\n */\nclass Separator extends Component {\n view() {\n return ;\n }\n}\n\nSeparator.isListItem = true;\n\nexport default Separator;\n","/**\n * The `humanTime` utility converts a date to a localized, human-readable time-\n * ago string.\n *\n * @param {Date} time\n * @return {String}\n */\nexport default function humanTime(time) {\n let m = moment(time);\n const now = moment();\n\n // To prevent showing things like \"in a few seconds\" due to small offsets\n // between client and server time, we always reset future dates to the\n // current time. This will result in \"just now\" being shown instead.\n if (m.isAfter(now)) {\n m = now;\n }\n\n const day = 864e5;\n const diff = m.diff(moment());\n let ago = null;\n\n // If this date was more than a month ago, we'll show the name of the month\n // in the string. If it wasn't this year, we'll show the year as well.\n if (diff < -30 * day) {\n if (m.year() === moment().year()) {\n ago = m.format('D MMM');\n } else {\n ago = m.format('ll');\n }\n } else {\n ago = m.fromNow();\n }\n\n return ago;\n}\n","import Component from '../Component';\nimport icon from '../helpers/icon';\nimport extract from '../utils/extract';\n\n/**\n * The `Badge` component represents a user/discussion badge, indicating some\n * status (e.g. a discussion is stickied, a user is an admin).\n *\n * A badge may have the following special props:\n *\n * - `type` The type of badge this is. This will be used to give the badge a\n * class name of `Badge--{type}`.\n * - `icon` The name of an icon to show inside the badge.\n * - `label`\n *\n * All other props will be assigned as attributes on the badge element.\n */\nexport default class Badge extends Component {\n view() {\n const attrs = Object.assign({}, this.props);\n const type = extract(attrs, 'type');\n const iconName = extract(attrs, 'icon');\n\n attrs.className = 'Badge ' + (type ? 'Badge--' + type : '') + ' ' + (attrs.className || '');\n attrs.title = extract(attrs, 'label') || '';\n\n return {iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust(' ')};\n }\n\n config(isInitialized) {\n if (isInitialized) return;\n\n if (this.props.label) this.$().tooltip({ container: 'body' });\n }\n}\n","import Component from '../Component';\nimport listItems from '../helpers/listItems';\n\n/**\n * The `FieldSet` component defines a collection of fields, displayed in a list\n * underneath a title. Accepted properties are:\n *\n * - `className` The class name for the fieldset.\n * - `label` The title of this group of fields.\n *\n * The children should be an array of items to show in the fieldset.\n */\nexport default class FieldSet extends Component {\n view() {\n return (\n \n );\n }\n}\n","/**\n * The `classList` utility creates a list of class names by joining an object's\n * keys, but only for values which are truthy.\n *\n * @example\n * classList({ foo: true, bar: false, qux: 'qaz' });\n * // \"foo qux\"\n *\n * @param {Object} classes\n * @return {String}\n */\nexport default function classList(classes) {\n let classNames;\n\n if (classes instanceof Array) {\n classNames = classes.filter((name) => name);\n } else {\n classNames = [];\n\n for (const i in classes) {\n if (classes[i]) classNames.push(i);\n }\n }\n\n return classNames.join(' ');\n}\n","var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn this;\n})();\n\ntry {\n\t// This works if eval is allowed (see CSP)\n\tg = g || new Function(\"return this\")();\n} catch (e) {\n\t// This works if the window reference is available\n\tif (typeof window === \"object\") g = window;\n}\n\n// g can still be undefined, but nothing to do about it...\n// We return undefined, instead of nothing here, so it's\n// easier to handle this case. if(!global) { ...}\n\nmodule.exports = g;\n","/**\n * Truncate a string to the given length, appending ellipses if necessary.\n *\n * @param {String} string\n * @param {Number} length\n * @param {Number} [start=0]\n * @return {String}\n */\nexport function truncate(string, length, start = 0) {\n return (start > 0 ? '...' : '') + string.substring(start, start + length) + (string.length > start + length ? '...' : '');\n}\n\n/**\n * Create a slug out of the given string. Non-alphanumeric characters are\n * converted to hyphens.\n *\n * NOTE: This method does not use the comparably sophisticated transliteration\n * mechanism that is employed in the backend. Therefore, it should only be used\n * to *suggest* slugs that can be overridden by the user.\n *\n * @param {String} string\n * @return {String}\n */\nexport function slug(string) {\n return string\n .toLowerCase()\n .replace(/[^a-z0-9]/gi, '-')\n .replace(/-+/g, '-')\n .replace(/-$|^-/g, '');\n}\n\n/**\n * Strip HTML tags and quotes out of the given string, replacing them with\n * meaningful punctuation.\n *\n * @param {String} string\n * @return {String}\n */\nexport function getPlainContent(string) {\n const html = string.replace(/(<\\/p>|- {listItems(controls.concat(dismissControl))}
)/g, '$1 ').replace(/
\n
\n );\n }\n}\n","import Component from '../Component';\nimport Modal from './Modal';\n\n/**\n * The `ModalManager` component manages a modal dialog. Only one modal dialog\n * can be shown at once; loading a new component into the ModalManager will\n * overwrite the previous one.\n */\nexport default class ModalManager extends Component {\n init() {\n this.showing = false;\n this.component = null;\n }\n\n view() {\n return {this.props.text}
\n{this.component && this.component.render()}
;\n }\n\n config(isInitialized, context) {\n if (isInitialized) return;\n\n // Since this component is 'above' the content of the page (that is, it is a\n // part of the global UI that persists between routes), we will flag the DOM\n // to be retained across route changes.\n context.retain = true;\n\n this.$().on('hidden.bs.modal', this.clear.bind(this)).on('shown.bs.modal', this.onready.bind(this));\n }\n\n /**\n * Show a modal dialog.\n *\n * @param {Modal} component\n * @public\n */\n show(component) {\n if (!(component instanceof Modal)) {\n throw new Error('The ModalManager component can only show Modal components');\n }\n\n clearTimeout(this.hideTimeout);\n\n this.showing = true;\n this.component = component;\n\n if (app.current) app.current.retain = true;\n\n m.redraw(true);\n\n const dismissible = !!this.component.isDismissible();\n this.$()\n .modal({\n backdrop: dismissible || 'static',\n keyboard: dismissible,\n })\n .modal('show');\n }\n\n /**\n * Close the modal dialog.\n *\n * @public\n */\n close() {\n if (!this.showing) return;\n\n // Don't hide the modal immediately, because if the consumer happens to call\n // the `show` method straight after to show another modal dialog, it will\n // cause Bootstrap's modal JS to misbehave. Instead we will wait for a tiny\n // bit to give the `show` method the opportunity to prevent this from going\n // ahead.\n this.hideTimeout = setTimeout(() => {\n this.$().modal('hide');\n this.showing = false;\n });\n }\n\n /**\n * Clear content from the modal area.\n *\n * @protected\n */\n clear() {\n if (this.component) {\n this.component.onhide();\n }\n\n this.component = null;\n\n app.current.retain = false;\n\n m.lazyRedraw();\n }\n\n /**\n * When the modal dialog is ready to be used, tell it!\n *\n * @protected\n */\n onready() {\n if (this.component && this.component.onready) {\n this.component.onready(this.$());\n }\n }\n}\n","import Component from '../Component';\nimport Alert from './Alert';\n\n/**\n * The `AlertManager` component provides an area in which `Alert` components can\n * be shown and dismissed.\n */\nexport default class AlertManager extends Component {\n init() {\n /**\n * An array of Alert components which are currently showing.\n *\n * @type {Alert[]}\n * @protected\n */\n this.components = [];\n }\n\n view() {\n return (\n \n {this.components.map((component) => (\n
\n );\n }\n\n config(isInitialized, context) {\n // Since this component is 'above' the content of the page (that is, it is a\n // part of the global UI that persists between routes), we will flag the DOM\n // to be retained across route changes.\n context.retain = true;\n }\n\n /**\n * Show an Alert in the alerts area.\n *\n * @param {Alert} component\n * @public\n */\n show(component) {\n if (!(component instanceof Alert)) {\n throw new Error('The AlertManager component can only show Alert components');\n }\n\n component.props.ondismiss = this.dismiss.bind(this, component);\n\n this.components.push(component);\n m.redraw();\n }\n\n /**\n * Dismiss an alert.\n *\n * @param {Alert} component\n * @public\n */\n dismiss(component) {\n const index = this.components.indexOf(component);\n\n if (index !== -1) {\n this.components.splice(index, 1);\n m.redraw();\n }\n }\n\n /**\n * Clear all alerts.\n *\n * @public\n */\n clear() {\n this.components = [];\n m.redraw();\n }\n}\n","import Modal from './Modal';\n\nexport default class RequestErrorModal extends Modal {\n className() {\n return 'RequestErrorModal Modal--large';\n }\n\n title() {\n return this.props.error.xhr ? this.props.error.xhr.status + ' ' + this.props.error.xhr.statusText : '';\n }\n\n content() {\n let responseText;\n\n try {\n responseText = JSON.stringify(JSON.parse(this.props.error.responseText), null, 2);\n } catch (e) {\n responseText = this.props.error.responseText;\n }\n\n return (\n {component}
\n ))}\n \n
\n );\n }\n}\n","import User from './models/User';\nimport username from './helpers/username';\nimport extract from './utils/extract';\n\n/**\n * Translator with the same API as Symfony's.\n *\n * Derived from https://github.com/willdurand/BazingaJsTranslationBundle\n * which is available under the MIT License.\n * Copyright (c) William Durand \n {this.props.error.options.method} {this.props.error.options.url}\n
\n
\n {responseText}\n \n