├── .npmignore
├── screenshots
    ├── mobile.png
    └── desktop.png
├── eslint.config.mjs
├── controllers.js
├── README.md
├── static
    ├── templates
    │   ├── modals
    │   │   └── topic-scheduler.tpl
    │   ├── partials
    │   │   ├── composer-write-preview.tpl
    │   │   ├── composer-tags.tpl
    │   │   ├── composer-formatting.tpl
    │   │   └── composer-title-container.tpl
    │   ├── admin
    │   │   └── plugins
    │   │   │   └── composer-default.tpl
    │   ├── compose.tpl
    │   └── composer.tpl
    ├── lib
    │   ├── admin.js
    │   ├── composer
    │   │   ├── post-queue.js
    │   │   ├── autocomplete.js
    │   │   ├── preview.js
    │   │   ├── controls.js
    │   │   ├── categoryList.js
    │   │   ├── resize.js
    │   │   ├── formatting.js
    │   │   ├── scheduler.js
    │   │   ├── tags.js
    │   │   ├── uploads.js
    │   │   └── drafts.js
    │   ├── client.js
    │   └── composer.js
    └── scss
    │   ├── textcomplete.scss
    │   ├── zen-mode.scss
    │   ├── page-compose.scss
    │   └── composer.scss
├── .gitattributes
├── package.json
├── LICENSE
├── plugin.json
├── websockets.js
├── .gitignore
└── library.js


/.npmignore:
--------------------------------------------------------------------------------
1 | sftp-config.json
2 | node_modules/
3 | 


--------------------------------------------------------------------------------
/screenshots/mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NodeBB/nodebb-plugin-composer-default/HEAD/screenshots/mobile.png


--------------------------------------------------------------------------------
/screenshots/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NodeBB/nodebb-plugin-composer-default/HEAD/screenshots/desktop.png


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import serverConfig from 'eslint-config-nodebb';
 4 | import publicConfig from 'eslint-config-nodebb/public';
 5 | 
 6 | export default [
 7 | 	...publicConfig,
 8 | 	...serverConfig,
 9 | ];
10 | 
11 | 


--------------------------------------------------------------------------------
/controllers.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const Controllers = {};
 4 | 
 5 | Controllers.renderAdminPage = function (req, res) {
 6 | 	res.render('admin/plugins/composer-default', {
 7 | 		title: 'Composer (Default)',
 8 | 	});
 9 | };
10 | 
11 | module.exports = Controllers;
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Default Composer for NodeBB
 2 | 
 3 | This plugin activates the default composer for NodeBB. It is activated by default, but can be swapped out as necessary.
 4 | 
 5 | ## Screenshots
 6 | 
 7 | ### Desktop
 8 | ![Desktop Composer](screenshots/desktop.png?raw=true)
 9 | 
10 | ### Mobile Devices
11 | ![Mobile Composer](screenshots/mobile.png?raw=true)


--------------------------------------------------------------------------------
/static/templates/modals/topic-scheduler.tpl:
--------------------------------------------------------------------------------
1 | <div class="datetime-picker">
2 | 	<input class="form-control" type="date" max="2100-12-31" pattern="[0-9]\{2}-[0-9]\{2}-[0-9]\{4}" required aria-label="[[modules:composer.schedule-date]]" tabindex="1">
3 | 	<input class="form-control" type="time" pattern="[0-9]{2}:[0-9]{2}" required aria-label="[[modules:composer.schedule-time]]" tabindex="1">
4 | </div>


--------------------------------------------------------------------------------
/static/lib/admin.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | define('admin/plugins/composer-default', ['settings'], function (Settings) {
 4 | 	const ACP = {};
 5 | 
 6 | 	ACP.init = function () {
 7 | 		Settings.load('composer-default', $('.composer-default-settings'));
 8 | 
 9 | 		$('#save').on('click', function () {
10 | 			Settings.save('composer-default', $('.composer-default-settings'));
11 | 		});
12 | 	};
13 | 
14 | 	return ACP;
15 | });
16 | 


--------------------------------------------------------------------------------
/static/scss/textcomplete.scss:
--------------------------------------------------------------------------------
 1 | .textcomplete-dropdown {
 2 | 	border: 1px solid $border-color;
 3 | 	background-color: $body-bg;
 4 | 	color: $body-color;
 5 | 	list-style: none;
 6 | 	padding: 0;
 7 | 	margin: 0;
 8 | 
 9 | 	li {
10 | 		margin: 0;
11 | 	}
12 | 
13 | 	.textcomplete-footer, .textcomplete-item {
14 | 		border-top: 1px solid $border-color;
15 | 	}
16 | 
17 | 	.textcomplete-item {
18 | 		padding: 2px 5px;
19 | 		cursor: pointer;
20 | 
21 | 		&:hover, &.active {
22 | 			color: $dropdown-link-hover-color;
23 | 			background-color: $dropdown-link-hover-bg;
24 | 		}
25 | 	}
26 | }


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | *.sln    merge=union
 7 | *.csproj merge=union
 8 | *.vbproj merge=union
 9 | *.fsproj merge=union
10 | *.dbproj merge=union
11 | 
12 | # Standard to msysgit
13 | *.doc	 diff=astextplain
14 | *.DOC	 diff=astextplain
15 | *.docx diff=astextplain
16 | *.DOCX diff=astextplain
17 | *.dot  diff=astextplain
18 | *.DOT  diff=astextplain
19 | *.pdf  diff=astextplain
20 | *.PDF	 diff=astextplain
21 | *.rtf	 diff=astextplain
22 | *.RTF	 diff=astextplain
23 | 


--------------------------------------------------------------------------------
/static/scss/zen-mode.scss:
--------------------------------------------------------------------------------
 1 | html.zen-mode {
 2 | 	overflow: hidden;
 3 | }
 4 | 
 5 | .zen-mode .composer {
 6 | 	&.resizable {
 7 | 		padding-top: 0;
 8 | 	}
 9 | 
10 | 	.composer-container {
11 | 		padding-top: 5px;
12 | 	}
13 | 
14 | 	.tag-row {
15 | 		display: none;
16 | 	}
17 | 
18 | 	.title-container .category-list-container {
19 | 		margin-top: 3px;
20 | 	}
21 | 
22 | 	.write, .preview {
23 | 		border: none;
24 | 		outline: none;
25 | 	}
26 | 
27 | 	.resizer {
28 | 		display: none;
29 | 	}
30 | 
31 | 	&.reply {
32 | 		.title-container {
33 | 			display: none;
34 | 		}
35 | 	}
36 | 
37 | 	@include media-breakpoint-up(md) {
38 | 		& {
39 | 			padding-left: 15px;
40 | 			padding-right: 15px;
41 | 		}
42 | 		.write-preview-container {
43 | 			margin-bottom: 0;
44 | 
45 | 			> div {
46 | 				padding: 0;
47 | 				margin: 0;
48 | 			}
49 | 		}
50 | 	}
51 | }


--------------------------------------------------------------------------------
/static/templates/partials/composer-write-preview.tpl:
--------------------------------------------------------------------------------
 1 | <div class="write-preview-container d-flex gap-2 flex-grow-1 overflow-auto">
 2 | 	<div class="write-container d-flex d-md-flex w-50 position-relative">
 3 | 		<div component="composer/post-queue/alert" class="m-2 alert alert-info fade pe-none position-absolute top-0 start-0 alert-dismissible">[[modules:composer.post-queue-alert]]<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>
 4 | 		<div class="draft-icon position-absolute end-0 top-0 mx-2 my-1 hidden-md hidden-lg"></div>
 5 | 		<textarea class="write shadow-none rounded-1 w-100 form-control" placeholder="[[modules:composer.textarea.placeholder]]">{body}</textarea>
 6 | 	</div>
 7 | 	<div class="preview-container d-none d-md-flex w-50">
 8 | 		<div class="preview w-100 overflow-auto"></div>
 9 | 	</div>
10 | </div>


--------------------------------------------------------------------------------
/static/lib/composer/post-queue.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | define('composer/post-queue', [], function () {
 4 | 	const postQueue = {};
 5 | 
 6 | 	postQueue.showAlert = async function (postContainer, postData) {
 7 | 		const alertEl = postContainer.find('[component="composer/post-queue/alert"]');
 8 | 		if (!config.postQueue || app.user.isAdmin || app.user.isGlobalMod || app.user.isMod) {
 9 | 			alertEl.remove();
10 | 			return;
11 | 		}
12 | 		const shouldQueue = await socket.emit('plugins.composer.shouldQueue', { postData: postData });
13 | 		alertEl.toggleClass('show', shouldQueue);
14 | 		alertEl.toggleClass('pe-none', !shouldQueue);
15 | 	};
16 | 
17 | 	postQueue.onChangeCategory = async function (postContainer, postData) {
18 | 		if (!config.postQueue) {
19 | 			return;
20 | 		}
21 | 		postQueue.showAlert(postContainer, postData);
22 | 	};
23 | 
24 | 	return postQueue;
25 | });
26 | 


--------------------------------------------------------------------------------
/static/scss/page-compose.scss:
--------------------------------------------------------------------------------
 1 | .page-compose .composer {
 2 | 	z-index: initial;
 3 | 	position: static;
 4 | 	[data-action="hide"] {
 5 | 		display: none;
 6 | 	}
 7 | 
 8 | 	@include media-breakpoint-down(md) {
 9 | 		.title-container {
10 | 			flex-wrap: wrap;
11 | 		}
12 | 		.category-list-container {
13 | 			[component="category-selector-selected"] > span {
14 | 				display: inline!important;
15 | 			}
16 | 			width: 100%;
17 | 		}
18 | 	}
19 | }
20 | 
21 | .zen-mode .page-compose .composer {
22 | 	position: absolute;
23 | }
24 | .page-compose {
25 | 	&.skin-noskin, &.skin-cosmo, &.skin-flatly,
26 | 	&.skin-journal, &.skin-litera, &.skin-minty, &.skin-pulse,
27 | 	&.skin-sandstone, &.skin-sketchy, &.skin-spacelab, &.skin-united,
28 | 	&.skin-cerulean, &.skin-lumen, &.skin-lux, &.skin-morph,
29 | 	&.skin-simplex, &.skin-yeti, &.skin-zephyr	{
30 | 		.composer {
31 | 			color: var(--bs-body-color) !important;
32 | 			background-color: var(--bs-body-bg) !important;
33 | 		}
34 | 	}
35 | }
36 | 


--------------------------------------------------------------------------------
/static/templates/admin/plugins/composer-default.tpl:
--------------------------------------------------------------------------------
 1 | <div class="acp-page-container">
 2 | 	<!-- IMPORT admin/partials/settings/header.tpl -->
 3 | 
 4 | 	<div class="row m-0">
 5 | 		<div id="spy-container" class="col-12 col-md-8 px-0 mb-4" tabindex="0">
 6 | 			<form role="form" class="composer-default-settings mb-4">
 7 | 				<div class="form-check form-switch">
 8 | 					<input id="composeRouteEnabled" class="form-check-input" type="checkbox" name="composeRouteEnabled" />
 9 | 					<label for="composeRouteEnabled" class="form-check-label">Use a separate route for the composer</label>
10 | 				</div>
11 | 
12 | 				<div class="form-check form-switch">
13 | 					<input type="checkbox" class="form-check-input" id="hidePreviewOnOpen" name="hidePreviewOnOpen" />
14 | 					<label for="hidePreviewOnOpen" class="form-check-label">Hide preview on open</label>
15 | 				</div>
16 | 			</form>
17 | 		</div>
18 | 
19 | 		<!-- IMPORT admin/partials/settings/toc.tpl -->
20 | 	</div>
21 | </div>
22 | 
23 | 


--------------------------------------------------------------------------------
/static/templates/partials/composer-tags.tpl:
--------------------------------------------------------------------------------
 1 | <div class="tag-row">
 2 | 	<div class="tags-container d-flex align-items-center {{{ if tagWhitelist.length }}}haswhitelist{{{ end }}}">
 3 | 		<div class="btn-group dropup me-2 {{{ if !tagWhitelist.length }}}hidden{{{ end }}}" component="composer/tag/dropdown">
 4 | 			<button class="btn btn-sm btn-link text-body dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 5 | 				<span class="visible-sm-inline visible-md-inline visible-lg-inline"><i class="fa fa-tags"></i></span>
 6 | 				[[tags:select-tags]]
 7 | 			</button>
 8 | 
 9 | 			<ul class="dropdown-menu p-1" role="menu">
10 | 				{{{ each tagWhitelist }}}
11 | 				<li data-tag="{@value}"><a class="dropdown-item rounded-1" href="#" role="menuitem">{@value}</a></li>
12 | 				{{{ end }}}
13 | 			</ul>
14 | 		</div>
15 | 		<input class="tags" type="text" class="" placeholder="[[tags:enter-tags-here, {minimumTagLength}, {maximumTagLength}]]" />
16 | 	</div>
17 | </div>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nodebb-plugin-composer-default",
 3 |   "version": "10.3.1",
 4 |   "description": "Default composer for NodeBB",
 5 |   "main": "library.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/NodeBB/nodebb-plugin-composer-default"
 9 |   },
10 |   "scripts": {
11 |     "lint": "eslint ."
12 |   },
13 |   "keywords": [
14 |     "nodebb",
15 |     "plugin",
16 |     "composer",
17 |     "markdown"
18 |   ],
19 |   "author": {
20 |     "name": "NodeBB Team",
21 |     "email": "sales@nodebb.org"
22 |   },
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/NodeBB/nodebb-plugin-composer-default/issues"
26 |   },
27 |   "readmeFilename": "README.md",
28 |   "nbbpm": {
29 |     "compatibility": "^4.5.0"
30 |   },
31 |   "dependencies": {
32 |     "screenfull": "^5.0.2",
33 |     "validator": "^13.7.0"
34 |   },
35 |   "devDependencies": {
36 |     "eslint": "^9.25.1",
37 |     "eslint-config-nodebb": "^1.1.4",
38 |     "eslint-plugin-import": "^2.31.0"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2016 NodeBB Inc.
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/static/templates/compose.tpl:
--------------------------------------------------------------------------------
 1 | <div component="composer" class="composer pb-3 h-100 {{{ if resizable }}} resizable{{{ end }}}{{{ if !isTopicOrMain }}} reply{{{ end }}}"{{{ if !disabled }}} style="visibility: inherit;"{{{ end }}}>
 2 | 	<div class="composer-container d-flex flex-column gap-1 h-100">
 3 | 		<form id="compose-form" method="post">
 4 | 			{{{ if pid }}}
 5 | 			<input type="hidden" name="pid" value="{pid}" />
 6 | 			<input type="hidden" name="thumb" value="{thumb}" />
 7 | 			{{{ end }}}
 8 | 			{{{ if tid }}}
 9 | 			<input type="hidden" name="tid" value="{tid}" />
10 | 			{{{ end }}}
11 | 			{{{ if cid }}}
12 | 			<input type="hidden" name="cid" value="{cid}" />
13 | 			{{{ end }}}
14 | 			<input type="hidden" name="_csrf" value="{config.csrf_token}" />
15 | 		</form>
16 | 
17 | 		<!-- IMPORT partials/composer-title-container.tpl -->
18 | 
19 | 		<!-- IMPORT partials/composer-formatting.tpl -->
20 | 
21 | 		<!-- IMPORT partials/composer-write-preview.tpl -->
22 | 
23 | 		{{{ if isTopicOrMain }}}
24 | 		<!-- IMPORT partials/composer-tags.tpl -->
25 | 		{{{ end }}}
26 | 	</div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/plugin.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"id": "nodebb-plugin-composer-default",
 3 | 	"url": "https://github.com/NodeBB/nodebb-plugin-composer-default",
 4 | 	"library": "library.js",
 5 | 	"hooks": [
 6 | 		{ "hook": "static:app.load", "method": "init" },
 7 | 		{ "hook": "filter:config.get", "method": "appendConfig" },
 8 | 		{ "hook": "filter:composer.build", "method": "filterComposerBuild" },
 9 | 		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
10 | 		{ "hook": "filter:meta.getLinkTags", "method": "addPrefetchTags" }
11 | 	],
12 | 	"scss": [
13 | 		"./static/scss/composer.scss"
14 | 	],
15 | 	"scripts": [
16 | 		"./static/lib/client.js",
17 | 		"./node_modules/screenfull/dist/screenfull.js"
18 | 	],
19 | 	"modules": {
20 | 		"composer.js": "./static/lib/composer.js",
21 | 		"composer/categoryList.js": "./static/lib/composer/categoryList.js",
22 | 		"composer/controls.js": "./static/lib/composer/controls.js",
23 | 		"composer/drafts.js": "./static/lib/composer/drafts.js",
24 | 		"composer/formatting.js": "./static/lib/composer/formatting.js",
25 | 		"composer/preview.js": "./static/lib/composer/preview.js",
26 | 		"composer/resize.js": "./static/lib/composer/resize.js",
27 | 		"composer/scheduler.js": "./static/lib/composer/scheduler.js",
28 | 		"composer/tags.js": "./static/lib/composer/tags.js",
29 | 		"composer/uploads.js": "./static/lib/composer/uploads.js",
30 | 		"composer/autocomplete.js": "./static/lib/composer/autocomplete.js",
31 | 		"composer/post-queue.js": "./static/lib/composer/post-queue.js",
32 | 		"../admin/plugins/composer-default.js": "./static/lib/admin.js"
33 | 	},
34 | 	"templates": "static/templates"
35 | }


--------------------------------------------------------------------------------
/static/lib/composer/autocomplete.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | define('composer/autocomplete', [
 4 | 	'composer/preview', 'autocomplete',
 5 | ], function (preview, Autocomplete) {
 6 | 	var autocomplete = {
 7 | 		_active: {},
 8 | 	};
 9 | 
10 | 	$(window).on('action:composer.discard', function (evt, data) {
11 | 		if (autocomplete._active.hasOwnProperty(data.post_uuid)) {
12 | 			autocomplete._active[data.post_uuid].destroy();
13 | 			delete autocomplete._active[data.post_uuid];
14 | 		}
15 | 	});
16 | 
17 | 	autocomplete.init = function (postContainer, post_uuid) {
18 | 		var element = postContainer.find('.write');
19 | 		var dropdownClass = 'composer-autocomplete-dropdown-' + post_uuid;
20 | 		var timer;
21 | 
22 | 		if (!element.length) {
23 | 			/**
24 | 			 * Some composers do their own thing before calling autocomplete.init() again.
25 | 			 * One reason is because they want to override the textarea with their own element.
26 | 			 * In those scenarios, they don't specify the "write" class, and this conditional
27 | 			 * looks for that and stops the autocomplete init process.
28 | 			 */
29 | 			return;
30 | 		}
31 | 
32 | 		var data = {
33 | 			element: element,
34 | 			strategies: [],
35 | 			options: {
36 | 				style: {
37 | 					'z-index': 20000,
38 | 				},
39 | 				className: dropdownClass + ' dropdown-menu textcomplete-dropdown',
40 | 			},
41 | 		};
42 | 
43 | 		element.on('keyup', function () {
44 | 			clearTimeout(timer);
45 | 			timer = setTimeout(function () {
46 | 				var dropdown = document.querySelector('.' + dropdownClass);
47 | 				if (dropdown) {
48 | 					var pos = dropdown.getBoundingClientRect();
49 | 
50 | 					var margin = parseFloat(dropdown.style.marginTop, 10) || 0;
51 | 
52 | 					var offset = window.innerHeight + margin - 10 - pos.bottom;
53 | 					dropdown.style.marginTop = Math.min(offset, 0) + 'px';
54 | 				}
55 | 			}, 0);
56 | 		});
57 | 
58 | 		$(window).trigger('composer:autocomplete:init', data);
59 | 
60 | 		autocomplete._active[post_uuid] = Autocomplete.setup(data);
61 | 
62 | 		data.element.on('textComplete:select', function () {
63 | 			preview.render(postContainer);
64 | 		});
65 | 	};
66 | 
67 | 	return autocomplete;
68 | });
69 | 


--------------------------------------------------------------------------------
/static/templates/composer.tpl:
--------------------------------------------------------------------------------
 1 | <div component="composer" class="composer {{{ if resizable }}} resizable{{{ end }}}{{{ if !isTopicOrMain }}} reply{{{ end }}}">
 2 | 	<div class="composer-container d-flex flex-column gap-1 h-100">
 3 | 		<!-- mobile header -->
 4 | 		<nav class="navbar fixed-top mobile-navbar hidden-md hidden-lg text-bg-primary flex-nowrap gap-1 px-1">
 5 | 			<div class="btn-group">
 6 | 				<button class="btn btn-sm btn-primary composer-discard" data-action="discard" tabindex="-1"><i class="fa fa-fw fa-times"></i></button>
 7 | 				<button class="btn btn-sm btn-primary composer-minimize" data-action="minimize" tabindex="-1"><i class="fa fa-fw fa-minus"></i></button>
 8 | 			</div>
 9 | 			{{{ if isTopic }}}
10 | 			<div class="category-name-container">
11 | 				<span class="category-name"></span> <i class="fa fa-sort"></i>
12 | 			</div>
13 | 			{{{ end }}}
14 | 			{{{ if !isTopicOrMain }}}
15 | 			<h4 class="title text-bg-primary">{{{ if isEditing }}}[[topic:composer.editing-in, "{topicTitle}"]]{{{ else }}}[[topic:composer.replying-to, "{topicTitle}"]]{{{ end }}}</h4>
16 | 			{{{ end }}}
17 | 			<div class="display-scheduler p-2 {{{ if !canSchedule }}} hidden{{{ end }}}">
18 | 				<i class="fa fa-clock-o"></i>
19 | 			</div>
20 | 			<div class="btn-group">
21 | 				<button class="btn btn-sm btn-primary composer-submit" data-action="post" tabindex="-1"><i class="fa fa-fw fa-chevron-right"></i></button>
22 | 			</div>
23 | 		</nav>
24 | 		<div class="p-2 d-flex flex-column gap-1 h-100">
25 | 			<!-- IMPORT partials/composer-title-container.tpl -->
26 | 
27 | 			<!-- IMPORT partials/composer-formatting.tpl -->
28 | 
29 | 			<!-- IMPORT partials/composer-write-preview.tpl -->
30 | 
31 | 			{{{ if isTopicOrMain }}}
32 | 			<!-- IMPORT partials/composer-tags.tpl -->
33 | 			{{{ end }}}
34 | 
35 | 			<div class="imagedrop"><div>[[topic:composer.drag-and-drop-images]]</div></div>
36 | 
37 | 			<div class="resizer position-absolute w-100 bottom-100 pe-3 border-bottom">
38 | 				<div class="trigger text-center">
39 | 					<div class="handle d-inline-block px-2 py-1 border bg-body">
40 | 						<i class="fa fa-fw fa-up-down"></i>
41 | 					</div>
42 | 				</div>
43 | 			</div>
44 | 		</div>
45 | 	</div>
46 | </div>
47 | 


--------------------------------------------------------------------------------
/static/lib/client.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | $(document).ready(function () {
 4 | 	$(window).on('action:app.load', function () {
 5 | 		require(['composer/drafts'], function (drafts) {
 6 | 			drafts.migrateGuest();
 7 | 			drafts.loadOpen();
 8 | 		});
 9 | 	});
10 | 
11 | 	$(window).on('action:composer.topic.new', function (ev, data) {
12 | 		if (config['composer-default'].composeRouteEnabled !== 'on') {
13 | 			require(['composer'], function (composer) {
14 | 				composer.newTopic({
15 | 					cid: data.cid,
16 | 					title: data.title || '',
17 | 					body: data.body || '',
18 | 					tags: data.tags || [],
19 | 				});
20 | 			});
21 | 		} else {
22 | 			ajaxify.go(
23 | 				'compose?cid=' + data.cid +
24 | 				(data.title ? '&title=' + encodeURIComponent(data.title) : '') +
25 | 				(data.body ? '&body=' + encodeURIComponent(data.body) : '')
26 | 			);
27 | 		}
28 | 	});
29 | 
30 | 	$(window).on('action:composer.post.edit', function (ev, data) {
31 | 		if (config['composer-default'].composeRouteEnabled !== 'on') {
32 | 			require(['composer'], function (composer) {
33 | 				composer.editPost({ pid: data.pid });
34 | 			});
35 | 		} else {
36 | 			ajaxify.go('compose?pid=' + data.pid);
37 | 		}
38 | 	});
39 | 
40 | 	$(window).on('action:composer.post.new', function (ev, data) {
41 | 		// backwards compatibility
42 | 		data.body = data.body || data.text;
43 | 		data.title = data.title || data.topicName;
44 | 		if (config['composer-default'].composeRouteEnabled !== 'on') {
45 | 			require(['composer'], function (composer) {
46 | 				composer.newReply({
47 | 					tid: data.tid,
48 | 					toPid: data.pid,
49 | 					title: data.title,
50 | 					body: data.body,
51 | 				});
52 | 			});
53 | 		} else {
54 | 			ajaxify.go(
55 | 				'compose?tid=' + data.tid +
56 | 				(data.pid ? '&toPid=' + data.pid : '') +
57 | 				(data.title ? '&title=' + encodeURIComponent(data.title) : '') +
58 | 				(data.body ? '&body=' + encodeURIComponent(data.body) : '')
59 | 			);
60 | 		}
61 | 	});
62 | 
63 | 	$(window).on('action:composer.addQuote', function (ev, data) {
64 | 		data.body = data.body || data.text;
65 | 		data.title = data.title || data.topicName;
66 | 		if (config['composer-default'].composeRouteEnabled !== 'on') {
67 | 			require(['composer'], function (composer) {
68 | 				var topicUUID = composer.findByTid(data.tid);
69 | 				composer.addQuote({
70 | 					tid: data.tid,
71 | 					toPid: data.pid,
72 | 					selectedPid: data.selectedPid,
73 | 					title: data.title,
74 | 					username: data.username,
75 | 					body: data.body,
76 | 					uuid: topicUUID,
77 | 				});
78 | 			});
79 | 		} else {
80 | 			ajaxify.go('compose?tid=' + data.tid + '&toPid=' + data.pid + '&quoted=1&username=' + data.username);
81 | 		}
82 | 	});
83 | 
84 | 	$(window).on('action:composer.enhance', function (ev, data) {
85 | 		require(['composer'], function (composer) {
86 | 			composer.enhance(data.container);
87 | 		});
88 | 	});
89 | });
90 | 


--------------------------------------------------------------------------------
/websockets.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const meta = require.main.require('./src/meta');
 4 | const privileges = require.main.require('./src/privileges');
 5 | const posts = require.main.require('./src/posts');
 6 | const topics = require.main.require('./src/topics');
 7 | const plugins = require.main.require('./src/plugins');
 8 | 
 9 | const Sockets = module.exports;
10 | 
11 | Sockets.push = async function (socket, pid) {
12 | 	const canRead = await privileges.posts.can('topics:read', pid, socket.uid);
13 | 	if (!canRead) {
14 | 		throw new Error('[[error:no-privileges]]');
15 | 	}
16 | 
17 | 	const postData = await posts.getPostFields(pid, ['content', 'sourceContent', 'tid', 'uid', 'handle', 'timestamp']);
18 | 	if (!postData && !postData.content) {
19 | 		throw new Error('[[error:invalid-pid]]');
20 | 	}
21 | 
22 | 	const [topic, isMain] = await Promise.all([
23 | 		topics.getTopicDataByPid(pid),
24 | 		posts.isMain(pid),
25 | 	]);
26 | 
27 | 	if (!topic) {
28 | 		throw new Error('[[error:no-topic]]');
29 | 	}
30 | 
31 | 	const result = await plugins.hooks.fire('filter:composer.push', {
32 | 		pid: pid,
33 | 		uid: postData.uid,
34 | 		handle: parseInt(meta.config.allowGuestHandles, 10) ? postData.handle : undefined,
35 | 		body: postData.sourceContent || postData.content,
36 | 		title: topic.title,
37 | 		thumbs: topic.thumbs,
38 | 		tags: topic.tags.map(t => t.value),
39 | 		isMain: isMain,
40 | 		timestamp: postData.timestamp,
41 | 	});
42 | 	return result;
43 | };
44 | 
45 | Sockets.editCheck = async function (socket, pid) {
46 | 	const isMain = await posts.isMain(pid);
47 | 	return { titleEditable: isMain };
48 | };
49 | 
50 | Sockets.renderPreview = async function (socket, content) {
51 | 	return await plugins.hooks.fire('filter:parse.raw', content);
52 | };
53 | 
54 | Sockets.renderHelp = async function () {
55 | 	const helpText = meta.config['composer:customHelpText'] || '';
56 | 	if (!meta.config['composer:showHelpTab']) {
57 | 		throw new Error('help-hidden');
58 | 	}
59 | 
60 | 	const parsed = await plugins.hooks.fire('filter:parse.raw', helpText);
61 | 	if (meta.config['composer:allowPluginHelp'] && plugins.hooks.hasListeners('filter:composer.help')) {
62 | 		return await plugins.hooks.fire('filter:composer.help', parsed) || helpText;
63 | 	}
64 | 	return helpText;
65 | };
66 | 
67 | Sockets.getFormattingOptions = async function () {
68 | 	return await require('./library').getFormattingOptions();
69 | };
70 | 
71 | Sockets.shouldQueue = async function (socket, data) {
72 | 	if (!data || !data.postData) {
73 | 		throw new Error('[[error:invalid-data]]');
74 | 	}
75 | 	if (socket.uid <= 0) {
76 | 		return false;
77 | 	}
78 | 
79 | 	let shouldQueue = false;
80 | 	const { postData } = data;
81 | 	if (postData.action === 'posts.reply') {
82 | 		shouldQueue = await posts.shouldQueue(socket.uid, {
83 | 			tid: postData.tid,
84 | 			content: postData.content || '',
85 | 		});
86 | 	} else if (postData.action === 'topics.post') {
87 | 		shouldQueue = await posts.shouldQueue(socket.uid, {
88 | 			cid: postData.cid,
89 | 			content: postData.content || '',
90 | 		});
91 | 	}
92 | 	return shouldQueue;
93 | };
94 | 


--------------------------------------------------------------------------------
/static/templates/partials/composer-formatting.tpl:
--------------------------------------------------------------------------------
 1 | <div class="d-flex justify-content-between gap-2 align-items-center formatting-bar m-0">
 2 | 	<ul class="list-unstyled mb-0 d-flex formatting-group gap-2 overflow-auto">
 3 | 		{{{ each formatting }}}
 4 | 			{{{ if ./spacer }}}
 5 | 			<li class="small spacer"></li>
 6 | 			{{{ else }}}
 7 | 			{{{ if (./visibility.desktop && ((isTopicOrMain && ./visibility.main) || (!isTopicOrMain && ./visibility.reply))) }}}
 8 | 			{{{ if ./dropdownItems.length }}}
 9 | 			<li class="dropdown dropdown-left bottom-sheet" title="{./title}">
10 | 				<button class="btn btn-sm btn-link text-reset" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{./title}">
11 | 					<i class="{./className}"></i>
12 | 				</button>
13 | 				<ul class="dropdown-menu p-1" role="menu">
14 | 				{{{ each ./dropdownItems }}}
15 | 					<li>
16 | 						<a href="#" data-format="{./name}" class="dropdown-item rounded-1 position-relative" role="menuitem">
17 | 							<i class="{./className} text-secondary"></i> {./text}
18 | 							{{{ if ./badge }}}
19 | 							<span class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info"></span>
20 | 							{{{ end }}}
21 | 						</a>
22 | 					</li>
23 | 				{{{ end }}}
24 | 				</ul>
25 | 			</li>
26 | 			{{{ else }}}
27 | 			<li title="{./title}">
28 | 				<button data-format="{./name}" class="btn btn-sm btn-link text-reset position-relative" aria-label="{./title}">
29 | 					<i class="{./className}"></i>
30 | 					{{{ if ./badge }}}
31 | 					<span class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info"></span>
32 | 					{{{ end }}}
33 | 				</button>
34 | 			</li>
35 | 			{{{ end }}}
36 | 			{{{ end }}}
37 | 			{{{ end }}}
38 | 		{{{ end }}}
39 | 
40 | 		{{{ if canUploadImage }}}
41 | 		<li title="[[modules:composer.upload-picture]]">
42 | 			<button data-format="picture" class="img-upload-btn btn btn-sm btn-link text-reset" aria-label="[[modules:composer.upload-picture]]">
43 | 				<i class="fa fa-file-image-o"></i>
44 | 			</button>
45 | 		</li>
46 | 		{{{ end }}}
47 | 
48 | 		{{{ if canUploadFile }}}
49 | 		<li title="[[modules:composer.upload-file]]">
50 | 			<button data-format="upload" class="file-upload-btn btn btn-sm btn-link text-reset" aria-label="[[modules:composer.upload-file]]">
51 | 				<i class="fa fa-file-o"></i>
52 | 			</button>
53 | 		</li>
54 | 		{{{ end }}}
55 | 
56 | 		<form id="fileForm" method="post" enctype="multipart/form-data">
57 | 			<input type="file" id="files" name="files[]" multiple class="hide"/>
58 | 		</form>
59 | 	</ul>
60 | 	<div class="d-flex align-items-center gap-1">
61 | 		<div class="draft-icon m-2 hidden-xs hidden-sm"></div>
62 | 		<button class="btn btn-sm btn-link py-2 text-body fw-semibold text-nowrap" data-action="preview">
63 | 			<i class="fa fa-eye"></i>
64 | 			<span class="d-none d-xl-inline show-text">[[modules:composer.show-preview]]</span>
65 | 			<span class="d-none d-xl-inline hide-text">[[modules:composer.hide-preview]]</span>
66 | 		</button>
67 | 		{{{ if composer:showHelpTab }}}
68 | 		<button class="btn btn-sm btn-link py-2 text-body fw-semibold text-nowrap" data-action="help">
69 | 			<i class="fa fa-question"></i>
70 | 			<span class="d-none d-xl-inline">[[modules:composer.help]]</span>
71 | 		</button>
72 | 		{{{ end }}}
73 | 	</div>
74 | </div>
75 | 
76 | 


--------------------------------------------------------------------------------
/static/templates/partials/composer-title-container.tpl:
--------------------------------------------------------------------------------
 1 | <div class="title-container align-items-center gap-2 d-flex">
 2 | 	{{{ if isTopic }}}
 3 | 	<div class="category-list-container {{{ if !template.compose }}}d-none d-md-block{{{ end }}} align-self-center">
 4 | 		<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
 5 | 	</div>
 6 | 	{{{ end }}}
 7 | 
 8 | 	{{{ if showHandleInput }}}
 9 | 	<div data-component="composer/handle">
10 | 		<input class="handle form-control h-100 border-0 shadow-none" type="text" placeholder="[[topic:composer.handle-placeholder]]" value="{handle}" />
11 | 	</div>
12 | 	{{{ end }}}
13 | 
14 | 	<div data-component="composer/title" class="position-relative flex-1" style="min-width: 0;">
15 | 		{{{ if isTopicOrMain }}}
16 | 		<input class="title form-control h-100 rounded-1 shadow-none" type="text" placeholder="[[topic:composer.title-placeholder]]" value="{topicTitle}" />
17 | 		{{{ else }}}
18 | 		<span class="{{{ if !template.compose }}}d-none d-md-block{{{ else }}}d-block{{{ end }}} title h-100 text-truncate">{{{ if isEditing }}}[[topic:composer.editing-in, "{topicTitle}"]]{{{ else }}}[[topic:composer.replying-to, "{topicTitle}"]]{{{ end }}}</span>
19 | 		{{{ end }}}
20 | 		<div id="quick-search-container" class="quick-search-container mt-2 dropdown-menu d-block p-2 hidden">
21 | 			<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
22 | 			<div class="quick-search-results-container"></div>
23 | 		</div>
24 | 	</div>
25 | 
26 | 	<div class="{{{ if !template.compose }}}d-none d-md-flex{{{ else }}}d-flex{{{ end }}} action-bar gap-1 align-items-center">
27 | 		<button class="btn btn-sm btn-link text-body fw-semibold composer-minimize" data-action="hide"><i class="fa fa-angle-down"></i> <span class="d-none d-md-inline">[[topic:composer.hide]]</span></button>
28 | 		<button class="btn btn-sm btn-link composer-discard text-body fw-semibold" data-action="discard"><i class="fa fa-trash"></i> <span class="d-none d-md-inline">[[topic:composer.discard]]</button>
29 | 		<div class="btn-group btn-group-sm" component="composer/submit/container">
30 | 			<button class="btn btn-primary composer-submit fw-bold {{{ if !(submitOptions.length || canSchedule) }}}rounded-1{{{ end }}}" data-action="post" data-text-variant=" [[topic:composer.schedule]]"><i class="fa fa-check"></i> <span class="d-none d-md-inline">[[topic:composer.submit]]</span></button>
31 | 			<div component="composer/submit/options/container" data-submit-options="{submitOptions.length}" class="btn-group btn-group-sm {{{ if !(submitOptions.length || canSchedule) }}}hidden{{{ end }}}">
32 | 				<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
33 | 					<i class="fa fa-caret-down"></i>
34 | 					<span class="sr-only">[[topic:composer.additional-options]]</span>
35 | 				</button>
36 | 				<ul class="dropdown-menu dropdown-menu-end p-1" role="menu">
37 | 					<li><a class="dropdown-item rounded-1 display-scheduler {{{ if !canSchedule }}}hidden{{{ end }}}" role="menuitem">[[topic:composer.post-later]]</a></li>
38 | 					<li><a class="dropdown-item rounded-1 cancel-scheduling hidden" role="menuitem">[[modules:composer.cancel-scheduling]]</a></li>
39 | 					{{{ each submitOptions }}}
40 | 					<li><a class="dropdown-item rounded-1" href="#" data-action="{./action}" role="menuitem">{./text}</a></li>
41 | 					{{{ end }}}
42 | 				</ul>
43 | 			</div>
44 | 		</div>
45 | 	</div>
46 | </div>
47 | 


--------------------------------------------------------------------------------
/static/lib/composer/preview.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | define('composer/preview', ['hooks'], function (hooks) {
  4 | 	var preview = {};
  5 | 
  6 | 	preview.render = function (postContainer, callback) {
  7 | 		callback = callback || function () {};
  8 | 		if (!postContainer.find('.preview-container').is(':visible')) {
  9 | 			return callback();
 10 | 		}
 11 | 
 12 | 		var textarea = postContainer.find('textarea');
 13 | 
 14 | 		socket.emit('plugins.composer.renderPreview', textarea.val(), function (err, preview) {
 15 | 			if (err) {
 16 | 				return;
 17 | 			}
 18 | 			preview = $('<div>' + preview + '</div>');
 19 | 			preview.find('img:not(.not-responsive)').addClass('img-fluid');
 20 | 			postContainer.find('.preview').html(preview);
 21 | 			hooks.fire('action:composer.preview', { postContainer, preview });
 22 | 			callback();
 23 | 		});
 24 | 	};
 25 | 
 26 | 	preview.matchScroll = function (postContainer) {
 27 | 		if (!postContainer.find('.preview-container').is(':visible')) {
 28 | 			return;
 29 | 		}
 30 | 		var textarea = postContainer.find('textarea');
 31 | 		var preview = postContainer.find('.preview');
 32 | 
 33 | 		if (textarea.length && preview.length) {
 34 | 			var diff = textarea[0].scrollHeight - textarea.height();
 35 | 
 36 | 			if (diff === 0) {
 37 | 				return;
 38 | 			}
 39 | 
 40 | 			var scrollPercent = textarea.scrollTop() / diff;
 41 | 
 42 | 			preview.scrollTop(Math.max(preview[0].scrollHeight - preview.height(), 0) * scrollPercent);
 43 | 		}
 44 | 	};
 45 | 
 46 | 	preview.handleToggler = function ($postContainer) {
 47 | 		const postContainer = $postContainer.get(0);
 48 | 		preview.env = utils.findBootstrapEnvironment();
 49 | 		const isMobile = ['xs', 'sm'].includes(preview.env);
 50 | 		const toggler = postContainer.querySelector('.formatting-bar [data-action="preview"]');
 51 | 		const showText = toggler.querySelector('.show-text');
 52 | 		const hideText = toggler.querySelector('.hide-text');
 53 | 		const previewToggled = localStorage.getItem('composer:previewToggled');
 54 | 		const hidePreviewOnOpen = config['composer-default'] && config['composer-default'].hidePreviewOnOpen === 'on';
 55 | 		let show = !isMobile && (
 56 | 			((previewToggled === null && !hidePreviewOnOpen) || previewToggled === 'true')
 57 | 		);
 58 | 		const previewContainer = postContainer.querySelector('.preview-container');
 59 | 		const writeContainer = postContainer.querySelector('.write-container');
 60 | 
 61 | 		if (!toggler) {
 62 | 			return;
 63 | 		}
 64 | 
 65 | 		function togglePreview(show) {
 66 | 			if (isMobile) {
 67 | 				previewContainer.classList.toggle('hide', false);
 68 | 				writeContainer.classList.toggle('maximized', false);
 69 | 
 70 | 				previewContainer.classList.toggle('d-none', !show);
 71 | 				previewContainer.classList.toggle('d-flex', show);
 72 | 				previewContainer.classList.toggle('w-100', show);
 73 | 
 74 | 				writeContainer.classList.toggle('d-flex', !show);
 75 | 				writeContainer.classList.toggle('d-none', show);
 76 | 				writeContainer.classList.toggle('w-100', !show);
 77 | 			} else {
 78 | 				previewContainer.classList.toggle('hide', !show);
 79 | 				writeContainer.classList.toggle('w-50', show);
 80 | 				writeContainer.classList.toggle('w-100', !show);
 81 | 				localStorage.setItem('composer:previewToggled', show);
 82 | 			}
 83 | 			showText.classList.toggle('hide', show);
 84 | 			hideText.classList.toggle('hide', !show);
 85 | 			if (show) {
 86 | 				preview.render($postContainer);
 87 | 			}
 88 | 			preview.matchScroll($postContainer);
 89 | 		}
 90 | 		preview.toggle = togglePreview;
 91 | 
 92 | 		toggler.addEventListener('click', (e) => {
 93 | 			if (e.button !== 0) {
 94 | 				return;
 95 | 			}
 96 | 
 97 | 			show = !show;
 98 | 			togglePreview(show);
 99 | 		});
100 | 
101 | 		togglePreview(show);
102 | 	};
103 | 
104 | 	return preview;
105 | });
106 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | #################
  2 | ## Eclipse
  3 | #################
  4 | 
  5 | *.pydevproject
  6 | .project
  7 | .metadata
  8 | bin/
  9 | tmp/
 10 | *.tmp
 11 | *.bak
 12 | *.swp
 13 | *~.nib
 14 | local.properties
 15 | .classpath
 16 | .settings/
 17 | .loadpath
 18 | 
 19 | # External tool builders
 20 | .externalToolBuilders/
 21 | 
 22 | # Locally stored "Eclipse launch configurations"
 23 | *.launch
 24 | 
 25 | # CDT-specific
 26 | .cproject
 27 | 
 28 | # PDT-specific
 29 | .buildpath
 30 | 
 31 | 
 32 | #################
 33 | ## Visual Studio
 34 | #################
 35 | 
 36 | .vscode
 37 | 
 38 | ## Ignore Visual Studio temporary files, build results, and
 39 | ## files generated by popular Visual Studio add-ons.
 40 | 
 41 | # User-specific files
 42 | *.suo
 43 | *.user
 44 | *.sln.docstates
 45 | 
 46 | # Build results
 47 | 
 48 | [Dd]ebug/
 49 | [Rr]elease/
 50 | x64/
 51 | build/
 52 | [Bb]in/
 53 | [Oo]bj/
 54 | 
 55 | # MSTest test Results
 56 | [Tt]est[Rr]esult*/
 57 | [Bb]uild[Ll]og.*
 58 | 
 59 | *_i.c
 60 | *_p.c
 61 | *.ilk
 62 | *.meta
 63 | *.obj
 64 | *.pch
 65 | *.pdb
 66 | *.pgc
 67 | *.pgd
 68 | *.rsp
 69 | *.sbr
 70 | *.tlb
 71 | *.tli
 72 | *.tlh
 73 | *.tmp
 74 | *.tmp_proj
 75 | *.log
 76 | *.vspscc
 77 | *.vssscc
 78 | .builds
 79 | *.pidb
 80 | *.log
 81 | *.scc
 82 | 
 83 | # Visual C++ cache files
 84 | ipch/
 85 | *.aps
 86 | *.ncb
 87 | *.opensdf
 88 | *.sdf
 89 | *.cachefile
 90 | 
 91 | # Visual Studio profiler
 92 | *.psess
 93 | *.vsp
 94 | *.vspx
 95 | 
 96 | # Guidance Automation Toolkit
 97 | *.gpState
 98 | 
 99 | # ReSharper is a .NET coding add-in
100 | _ReSharper*/
101 | *.[Rr]e[Ss]harper
102 | 
103 | # TeamCity is a build add-in
104 | _TeamCity*
105 | 
106 | # DotCover is a Code Coverage Tool
107 | *.dotCover
108 | 
109 | # NCrunch
110 | *.ncrunch*
111 | .*crunch*.local.xml
112 | 
113 | # Installshield output folder
114 | [Ee]xpress/
115 | 
116 | # DocProject is a documentation generator add-in
117 | DocProject/buildhelp/
118 | DocProject/Help/*.HxT
119 | DocProject/Help/*.HxC
120 | DocProject/Help/*.hhc
121 | DocProject/Help/*.hhk
122 | DocProject/Help/*.hhp
123 | DocProject/Help/Html2
124 | DocProject/Help/html
125 | 
126 | # Click-Once directory
127 | publish/
128 | 
129 | # Publish Web Output
130 | *.Publish.xml
131 | *.pubxml
132 | 
133 | # NuGet Packages Directory
134 | ## TODO: If you have NuGet Package Restore enabled, uncomment the next line
135 | #packages/
136 | 
137 | # Windows Azure Build Output
138 | csx
139 | *.build.csdef
140 | 
141 | # Windows Store app package directory
142 | AppPackages/
143 | 
144 | # Others
145 | sql/
146 | *.Cache
147 | ClientBin/
148 | [Ss]tyle[Cc]op.*
149 | ~$*
150 | *~
151 | *.dbmdl
152 | *.[Pp]ublish.xml
153 | *.pfx
154 | *.publishsettings
155 | 
156 | # RIA/Silverlight projects
157 | Generated_Code/
158 | 
159 | # Backup & report files from converting an old project file to a newer
160 | # Visual Studio version. Backup files are not needed, because we have git ;-)
161 | _UpgradeReport_Files/
162 | Backup*/
163 | UpgradeLog*.XML
164 | UpgradeLog*.htm
165 | 
166 | # SQL Server files
167 | App_Data/*.mdf
168 | App_Data/*.ldf
169 | 
170 | #############
171 | ## Windows detritus
172 | #############
173 | 
174 | # Windows image file caches
175 | Thumbs.db
176 | ehthumbs.db
177 | 
178 | # Folder config file
179 | Desktop.ini
180 | 
181 | # Recycle Bin used on file shares
182 | $RECYCLE.BIN/
183 | 
184 | # Mac crap
185 | .DS_Store
186 | 
187 | # can't have it committed because it interferes with the package-lock.json 
188 | # generated by each individual install
189 | package-lock.json
190 | yarn.lock
191 | 
192 | 
193 | #############
194 | ## Python
195 | #############
196 | 
197 | *.py[co]
198 | 
199 | # Packages
200 | *.egg
201 | *.egg-info
202 | dist/
203 | build/
204 | eggs/
205 | parts/
206 | var/
207 | sdist/
208 | develop-eggs/
209 | .installed.cfg
210 | 
211 | # Installer logs
212 | pip-log.txt
213 | 
214 | # Unit test / coverage reports
215 | .coverage
216 | .tox
217 | 
218 | #Translations
219 | *.mo
220 | 
221 | #Mr Developer
222 | .mr.developer.cfg
223 | 
224 | sftp-config.json
225 | node_modules/
226 | 
227 | *.sublime-project
228 | *.sublime-workspace


--------------------------------------------------------------------------------
/static/lib/composer/controls.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | define('composer/controls', ['composer/preview'], function (preview) {
  4 | 	var controls = {};
  5 | 
  6 | 	/** ********************************************** */
  7 | 	/* Rich Textarea Controls                        */
  8 | 	/** ********************************************** */
  9 | 	controls.insertIntoTextarea = function (textarea, value) {
 10 | 		var payload = {
 11 | 			context: this,
 12 | 			textarea: textarea,
 13 | 			value: value,
 14 | 			preventDefault: false,
 15 | 		};
 16 | 		$(window).trigger('action:composer.insertIntoTextarea', payload);
 17 | 
 18 | 		if (payload.preventDefault) {
 19 | 			return;
 20 | 		}
 21 | 
 22 | 		var $textarea = $(payload.textarea);
 23 | 		var currentVal = $textarea.val();
 24 | 		var postContainer = $textarea.parents('[component="composer"]');
 25 | 
 26 | 		$textarea.val(
 27 | 			currentVal.slice(0, payload.textarea.selectionStart) +
 28 | 			payload.value +
 29 | 			currentVal.slice(payload.textarea.selectionStart)
 30 | 		);
 31 | 
 32 | 		preview.render(postContainer);
 33 | 	};
 34 | 
 35 | 	controls.replaceSelectionInTextareaWith = function (textarea, value) {
 36 | 		var payload = {
 37 | 			context: this,
 38 | 			textarea: textarea,
 39 | 			value: value,
 40 | 			preventDefault: false,
 41 | 		};
 42 | 		$(window).trigger('action:composer.replaceSelectionInTextareaWith', payload);
 43 | 
 44 | 		if (payload.preventDefault) {
 45 | 			return;
 46 | 		}
 47 | 
 48 | 		var $textarea = $(payload.textarea);
 49 | 		var currentVal = $textarea.val();
 50 | 		var postContainer = $textarea.parents('[component="composer"]');
 51 | 
 52 | 		$textarea.val(
 53 | 			currentVal.slice(0, payload.textarea.selectionStart) +
 54 | 			payload.value +
 55 | 			currentVal.slice(payload.textarea.selectionEnd)
 56 | 		);
 57 | 
 58 | 		preview.render(postContainer);
 59 | 	};
 60 | 
 61 | 	controls.wrapSelectionInTextareaWith = function (textarea, leading, trailing) {
 62 | 		var payload = {
 63 | 			context: this,
 64 | 			textarea: textarea,
 65 | 			leading: leading,
 66 | 			trailing: trailing,
 67 | 			preventDefault: false,
 68 | 		};
 69 | 		$(window).trigger('action:composer.wrapSelectionInTextareaWith', payload);
 70 | 
 71 | 		if (payload.preventDefault) {
 72 | 			return;
 73 | 		}
 74 | 
 75 | 		if (trailing === undefined) {
 76 | 			trailing = leading;
 77 | 		}
 78 | 
 79 | 		var $textarea = $(textarea);
 80 | 		var currentVal = $textarea.val();
 81 | 
 82 | 		var matches = /^(\s*)([\s\S]*?)(\s*)$/.exec(currentVal.slice(textarea.selectionStart, textarea.selectionEnd));
 83 | 
 84 | 		if (!matches[2]) {
 85 | 			// selection is entirely whitespace
 86 | 			matches = [null, '', currentVal.slice(textarea.selectionStart, textarea.selectionEnd), ''];
 87 | 		}
 88 | 
 89 | 		$textarea.val(
 90 | 			currentVal.slice(0, textarea.selectionStart) +
 91 | 			matches[1] +
 92 | 			leading +
 93 | 			matches[2] +
 94 | 			trailing +
 95 | 			matches[3] +
 96 | 			currentVal.slice(textarea.selectionEnd)
 97 | 		);
 98 | 
 99 | 		return [matches[1].length, matches[3].length];
100 | 	};
101 | 
102 | 	controls.updateTextareaSelection = function (textarea, start, end) {
103 | 		var payload = {
104 | 			context: this,
105 | 			textarea: textarea,
106 | 			start: start,
107 | 			end: end,
108 | 			preventDefault: false,
109 | 		};
110 | 		$(window).trigger('action:composer.updateTextareaSelection', payload);
111 | 
112 | 		if (payload.preventDefault) {
113 | 			return;
114 | 		}
115 | 
116 | 		textarea.setSelectionRange(payload.start, payload.end);
117 | 		$(payload.textarea).focus();
118 | 	};
119 | 
120 | 	controls.getBlockData = function (textareaEl, query, selectionStart) {
121 | 		// Determines whether the cursor is sitting inside a block-type element (bold, italic, etc.)
122 | 		var value = textareaEl.value;
123 | 		query = query.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
124 | 		var regex = new RegExp(query, 'g');
125 | 		var match;
126 | 		var matchIndices = [];
127 | 		var payload;
128 | 
129 | 		// Isolate the line the cursor is on
130 | 		value = value.split('\n').reduce(function (memo, line) {
131 | 			if (memo !== null) {
132 | 				return memo;
133 | 			}
134 | 
135 | 			memo = selectionStart <= line.length ? line : null;
136 | 
137 | 			if (memo === null) {
138 | 				selectionStart -= (line.length + 1);
139 | 			}
140 | 
141 | 			return memo;
142 | 		}, null);
143 | 
144 | 		// Find query characters and determine return payload
145 | 		while ((match = regex.exec(value)) !== null) {
146 | 			matchIndices.push(match.index);
147 | 		}
148 | 
149 | 		payload = {
150 | 			in: !!(matchIndices.reduce(function (memo, cur) {
151 | 				if (selectionStart >= cur + 2) {
152 | 					memo += 1;
153 | 				}
154 | 
155 | 				return memo;
156 | 			}, 0) % 2),
157 | 			atEnd: matchIndices.reduce(function (memo, cur) {
158 | 				if (memo) {
159 | 					return memo;
160 | 				}
161 | 
162 | 				return selectionStart === cur;
163 | 			}, false),
164 | 		};
165 | 
166 | 		payload.atEnd = payload.in ? payload.atEnd : false;
167 | 		return payload;
168 | 	};
169 | 
170 | 	return controls;
171 | });
172 | 


--------------------------------------------------------------------------------
/static/lib/composer/categoryList.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | define('composer/categoryList', [
  4 | 	'categorySelector', 'taskbar', 'api',
  5 | ], function (categorySelector, taskbar, api) {
  6 | 	var categoryList = {};
  7 | 
  8 | 	var selector;
  9 | 
 10 | 	categoryList.init = function (postContainer, postData) {
 11 | 		var listContainer = postContainer.find('.category-list-container');
 12 | 		if (!listContainer.length) {
 13 | 			return;
 14 | 		}
 15 | 
 16 | 		postContainer.on('action:composer.resize', function () {
 17 | 			toggleDropDirection(postContainer);
 18 | 		});
 19 | 
 20 | 		categoryList.updateTaskbar(postContainer, postData);
 21 | 
 22 | 		selector = categorySelector.init(listContainer.find('[component="category-selector"]'), {
 23 | 			privilege: 'topics:create',
 24 | 			states: ['watching', 'tracking', 'notwatching', 'ignoring'],
 25 | 			onSelect: function (selectedCategory) {
 26 | 				if (postData.hasOwnProperty('cid')) {
 27 | 					changeCategory(postContainer, postData, selectedCategory);
 28 | 				}
 29 | 			},
 30 | 		});
 31 | 		if (!selector) {
 32 | 			return;
 33 | 		}
 34 | 		if (postData.cid && postData.category) {
 35 | 			selector.selectedCategory = { cid: postData.cid, name: postData.category.name };
 36 | 		} else if (ajaxify.data.template.compose && ajaxify.data.selectedCategory) {
 37 | 			// separate composer route
 38 | 			selector.selectedCategory = { cid: ajaxify.data.cid, name: ajaxify.data.selectedCategory };
 39 | 		}
 40 | 
 41 | 		// this is the mobile category selector
 42 | 		postContainer.find('.category-name')
 43 | 			.translateHtml(selector.selectedCategory ? selector.selectedCategory.name : '[[modules:composer.select-category]]')
 44 | 			.on('click', function () {
 45 | 				categorySelector.modal({
 46 | 					privilege: 'topics:create',
 47 | 					states: ['watching', 'tracking', 'notwatching', 'ignoring'],
 48 | 					openOnLoad: true,
 49 | 					showLinks: false,
 50 | 					onSubmit: function (selectedCategory) {
 51 | 						postContainer.find('.category-name').text(selectedCategory.name);
 52 | 						selector.selectCategory(selectedCategory.cid);
 53 | 						if (postData.hasOwnProperty('cid')) {
 54 | 							changeCategory(postContainer, postData, selectedCategory);
 55 | 						}
 56 | 					},
 57 | 				});
 58 | 			});
 59 | 
 60 | 		toggleDropDirection(postContainer);
 61 | 	};
 62 | 
 63 | 	function toggleDropDirection(postContainer) {
 64 | 		postContainer.find('.category-list-container [component="category-selector"]').toggleClass('dropup', postContainer.outerHeight() < $(window).height() / 2);
 65 | 	}
 66 | 
 67 | 	categoryList.getSelectedCid = function () {
 68 | 		var selectedCategory;
 69 | 		if (selector) {
 70 | 			selectedCategory = selector.getSelectedCategory();
 71 | 		}
 72 | 		return selectedCategory ? selectedCategory.cid : 0;
 73 | 	};
 74 | 
 75 | 	categoryList.updateTaskbar = function (postContainer, postData) {
 76 | 		if (parseInt(postData.cid, 10)) {
 77 | 			api.get(`/categories/${postData.cid}`, {}).then(function (category) {
 78 | 				updateTaskbarByCategory(postContainer, category);
 79 | 			});
 80 | 		}
 81 | 	};
 82 | 
 83 | 	function updateTaskbarByCategory(postContainer, category) {
 84 | 		if (category) {
 85 | 			var uuid = postContainer.attr('data-uuid');
 86 | 			taskbar.update('composer', uuid, {
 87 | 				image: category.backgroundImage,
 88 | 				color: category.color,
 89 | 				'background-color': category.bgColor,
 90 | 				icon: category.icon && category.icon.slice(3),
 91 | 			});
 92 | 		}
 93 | 	}
 94 | 
 95 | 	function updateTopicTemplate(postContainer, category, previousCategory) {
 96 | 		const currentText = postContainer.find('textarea.write').val();
 97 | 		const previousTopicTemplate = previousCategory && previousCategory.topicTemplate;
 98 | 		if (category && (!currentText.length || currentText === previousTopicTemplate) &&
 99 | 			currentText !== category.topicTemplate) {
100 | 			postContainer.find('textarea.write').val(category.topicTemplate).trigger('input');
101 | 		}
102 | 	}
103 | 
104 | 	async function changeCategory(postContainer, postData, selectedCategory) {
105 | 		const previousCategory = postData.category;
106 | 		postData.cid = selectedCategory.cid;
107 | 		const categoryData = await window.fetch(`${config.relative_path}/api/category/${encodeURIComponent(selectedCategory.cid)}`).then(r => r.json());
108 | 		postData.category = categoryData;
109 | 		updateTaskbarByCategory(postContainer, categoryData);
110 | 		updateTopicTemplate(postContainer, categoryData, previousCategory);
111 | 
112 | 		require(['composer/scheduler', 'composer/tags', 'composer/post-queue'], function (scheduler, tags, postQueue) {
113 | 			scheduler.onChangeCategory(categoryData);
114 | 			tags.onChangeCategory(postContainer, postData, selectedCategory.cid, categoryData);
115 | 			postQueue.onChangeCategory(postContainer, postData);
116 | 
117 | 			$(window).trigger('action:composer.changeCategory', {
118 | 				postContainer: postContainer,
119 | 				postData: postData,
120 | 				selectedCategory: selectedCategory,
121 | 				categoryData: categoryData,
122 | 			});
123 | 		});
124 | 	}
125 | 
126 | 	return categoryList;
127 | });
128 | 


--------------------------------------------------------------------------------
/static/lib/composer/resize.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 'use strict';
  3 | 
  4 | define('composer/resize', ['taskbar'], function (taskbar) {
  5 | 	var resize = {};
  6 | 	var oldRatio = 0;
  7 | 	var minimumRatio = 0.3;
  8 | 	var snapMargin = 0.05;
  9 | 	var smallMin = 768;
 10 | 
 11 | 	var $body = $('body');
 12 | 	var $window = $(window);
 13 | 	var $headerMenu = $('[component="navbar"]');
 14 | 	const content = document.getElementById('content');
 15 | 
 16 | 	var header = $headerMenu[0];
 17 | 
 18 | 	function getSavedRatio() {
 19 | 		return localStorage.getItem('composer:resizeRatio') || 0.5;
 20 | 	}
 21 | 
 22 | 	function saveRatio(ratio) {
 23 | 		localStorage.setItem('composer:resizeRatio', Math.min(ratio, 1));
 24 | 	}
 25 | 
 26 | 	function getBounds() {
 27 | 		var headerRect;
 28 | 		if (header) {
 29 | 			headerRect = header.getBoundingClientRect();
 30 | 		} else {
 31 | 			// Mock data
 32 | 			headerRect = { bottom: 0 };
 33 | 		}
 34 | 
 35 | 		var headerBottom = Math.max(headerRect.bottom, 0);
 36 | 
 37 | 		var rect = {
 38 | 			top: 0,
 39 | 			left: 0,
 40 | 			right: window.innerWidth,
 41 | 			bottom: window.innerHeight,
 42 | 		};
 43 | 
 44 | 		rect.width = rect.right;
 45 | 		rect.height = rect.bottom;
 46 | 
 47 | 		rect.boundedTop = headerBottom;
 48 | 		rect.boundedHeight = rect.bottom - headerBottom;
 49 | 
 50 | 		return rect;
 51 | 	}
 52 | 
 53 | 	function doResize(postContainer, ratio) {
 54 | 		var bounds = getBounds();
 55 | 		var elem = postContainer[0];
 56 | 		var style = window.getComputedStyle(elem);
 57 | 
 58 | 		// Adjust minimumRatio for shorter viewports
 59 | 		var minHeight = parseInt(style.getPropertyValue('min-height'), 10);
 60 | 		var adjustedMinimum = Math.max(minHeight / window.innerHeight, minimumRatio);
 61 | 
 62 | 		if (bounds.width >= smallMin) {
 63 | 			const boundedDifference = (bounds.height - bounds.boundedHeight) / bounds.height;
 64 | 			ratio = Math.min(Math.max(ratio, adjustedMinimum + boundedDifference), 1);
 65 | 
 66 | 			var top = ratio * bounds.boundedHeight / bounds.height;
 67 | 			elem.style.top = ((1 - top) * 100).toString() + '%';
 68 | 
 69 | 			// Add some extra space at the bottom of the body so that
 70 | 			// the user can still scroll to the last post w/ composer open
 71 | 			var rect = elem.getBoundingClientRect();
 72 | 			content.style.paddingBottom = (rect.bottom - rect.top).toString() + 'px';
 73 | 		} else {
 74 | 			elem.style.top = 0;
 75 | 			content.style.paddingBottom = 0;
 76 | 		}
 77 | 
 78 | 		postContainer.ratio = ratio;
 79 | 
 80 | 		taskbar.updateActive(postContainer.attr('data-uuid'));
 81 | 	}
 82 | 
 83 | 	var resizeIt = doResize;
 84 | 	var raf = window.requestAnimationFrame ||
 85 | 		window.webkitRequestAnimationFrame ||
 86 | 		window.mozRequestAnimationFrame;
 87 | 
 88 | 	if (raf) {
 89 | 		resizeIt = function (postContainer, ratio) {
 90 | 			raf(function () {
 91 | 				doResize(postContainer, ratio);
 92 | 
 93 | 				setTimeout(function () {
 94 | 					$window.trigger('action:composer.resize');
 95 | 					postContainer.trigger('action:composer.resize');
 96 | 				}, 0);
 97 | 			});
 98 | 		};
 99 | 	}
100 | 
101 | 	resize.reposition = function (postContainer) {
102 | 		var ratio = getSavedRatio();
103 | 
104 | 		if (ratio >= 1 - snapMargin) {
105 | 			ratio = 1;
106 | 			postContainer.addClass('maximized');
107 | 		}
108 | 
109 | 		resizeIt(postContainer, ratio);
110 | 	};
111 | 
112 | 	resize.maximize = function (postContainer, state) {
113 | 		if (state) {
114 | 			resizeIt(postContainer, 1);
115 | 		} else {
116 | 			resize.reposition(postContainer);
117 | 		}
118 | 	};
119 | 
120 | 	resize.handleResize = function (postContainer) {
121 | 		var resizeOffset = 0;
122 | 		var resizeBegin = 0;
123 | 		var resizeEnd = 0;
124 | 		var $resizer = postContainer.find('.resizer');
125 | 		var resizer = $resizer[0];
126 | 
127 | 		function resizeStart(e) {
128 | 			var resizeRect = resizer.getBoundingClientRect();
129 | 			var resizeCenterY = (resizeRect.top + resizeRect.bottom) / 2;
130 | 
131 | 			resizeOffset = (resizeCenterY - e.clientY) / 2;
132 | 			resizeBegin = e.clientY;
133 | 
134 | 			$window.on('mousemove', resizeAction);
135 | 			$window.on('mouseup', resizeStop);
136 | 			$body.on('touchmove', resizeTouchAction);
137 | 		}
138 | 
139 | 		function resizeAction(e) {
140 | 			var position = e.clientY - resizeOffset;
141 | 			var bounds = getBounds();
142 | 			var ratio = (bounds.height - position) / (bounds.boundedHeight);
143 | 
144 | 			resizeIt(postContainer, ratio);
145 | 		}
146 | 
147 | 		function resizeStop(e) {
148 | 			e.preventDefault();
149 | 			resizeEnd = e.clientY;
150 | 
151 | 			postContainer.find('textarea').focus();
152 | 			$window.off('mousemove', resizeAction);
153 | 			$window.off('mouseup', resizeStop);
154 | 			$body.off('touchmove', resizeTouchAction);
155 | 
156 | 			var position = resizeEnd - resizeOffset;
157 | 			var bounds = getBounds();
158 | 			var ratio = (bounds.height - position) / (bounds.boundedHeight);
159 | 
160 | 			if (resizeEnd - resizeBegin === 0 && postContainer.hasClass('maximized')) {
161 | 				postContainer.removeClass('maximized');
162 | 				ratio = (!oldRatio || oldRatio >= 1 - snapMargin) ? 0.5 : oldRatio;
163 | 				resizeIt(postContainer, ratio);
164 | 			} else if (resizeEnd - resizeBegin === 0 || ratio >= 1 - snapMargin) {
165 | 				resizeIt(postContainer, 1);
166 | 				postContainer.addClass('maximized');
167 | 				oldRatio = ratio;
168 | 			} else {
169 | 				postContainer.removeClass('maximized');
170 | 			}
171 | 
172 | 			saveRatio(ratio);
173 | 		}
174 | 
175 | 		function resizeTouchAction(e) {
176 | 			e.preventDefault();
177 | 			resizeAction(e.touches[0]);
178 | 		}
179 | 
180 | 		$resizer
181 | 			.on('mousedown', function (e) {
182 | 				if (e.button !== 0) {
183 | 					return;
184 | 				}
185 | 
186 | 				e.preventDefault();
187 | 				resizeStart(e);
188 | 			})
189 | 			.on('touchstart', function (e) {
190 | 				e.preventDefault();
191 | 				resizeStart(e.touches[0]);
192 | 			})
193 | 			.on('touchend', resizeStop);
194 | 	};
195 | 
196 | 	return resize;
197 | });
198 | 


--------------------------------------------------------------------------------
/static/lib/composer/formatting.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | define('composer/formatting', [
  4 | 	'composer/preview', 'composer/resize', 'topicThumbs', 'screenfull',
  5 | ], function (preview, resize, topicThumbs, screenfull) {
  6 | 	var formatting = {};
  7 | 
  8 | 	var formattingDispatchTable = {
  9 | 		picture: function () {
 10 | 			var postContainer = this;
 11 | 			postContainer.find('#files')
 12 | 				.attr('accept', 'image/*')
 13 | 				.click();
 14 | 		},
 15 | 
 16 | 		upload: function () {
 17 | 			var postContainer = this;
 18 | 			postContainer.find('#files')
 19 | 				.attr('accept', '')
 20 | 				.click();
 21 | 		},
 22 | 
 23 | 		thumbs: function () {
 24 | 			formatting.exitFullscreen();
 25 | 			var postContainer = this;
 26 | 			require(['composer'], function (composer) {
 27 | 				const uuid = postContainer.get(0).getAttribute('data-uuid');
 28 | 				const composerObj = composer.posts[uuid];
 29 | 
 30 | 				if (composerObj.action === 'topics.post' || (composerObj.action === 'posts.edit' && composerObj.isMain)) {
 31 | 					topicThumbs.modal.open({ id: uuid, postData: composerObj }).then(() => {
 32 | 						postContainer.trigger('thumb.uploaded');
 33 | 
 34 | 						// Update client-side with count
 35 | 						composer.updateThumbCount(uuid, postContainer);
 36 | 					});
 37 | 				}
 38 | 			});
 39 | 		},
 40 | 
 41 | 		tags: function () {
 42 | 			var postContainer = this;
 43 | 			postContainer.find('.tags-container').toggleClass('hidden');
 44 | 		},
 45 | 
 46 | 		zen: function () {
 47 | 			var postContainer = this;
 48 | 			$(window).one('resize', function () {
 49 | 				function onResize() {
 50 | 					if (!screenfull.isFullscreen) {
 51 | 						app.toggleNavbar(true);
 52 | 						$('html').removeClass('zen-mode');
 53 | 						resize.reposition(postContainer);
 54 | 						$(window).off('resize', onResize);
 55 | 					}
 56 | 				}
 57 | 
 58 | 				if (screenfull.isFullscreen) {
 59 | 					app.toggleNavbar(false);
 60 | 					$('html').addClass('zen-mode');
 61 | 					postContainer.find('.write').focus();
 62 | 
 63 | 					$(window).on('resize', onResize);
 64 | 					$(window).one('action:composer.topics.post action:composer.posts.reply action:composer.posts.edit action:composer.discard', screenfull.exit);
 65 | 				}
 66 | 			});
 67 | 
 68 | 			screenfull.toggle(postContainer.get(0));
 69 | 			$(window).trigger('action:composer.fullscreen', { postContainer: postContainer });
 70 | 		},
 71 | 	};
 72 | 
 73 | 	var buttons = [];
 74 | 
 75 | 	formatting.exitFullscreen = function () {
 76 | 		if (screenfull.isEnabled && screenfull.isFullscreen) {
 77 | 			screenfull.exit();
 78 | 		}
 79 | 	};
 80 | 
 81 | 	formatting.addComposerButtons = function () {
 82 | 		const formattingBarEl = $('.formatting-bar');
 83 | 		const fileForm = formattingBarEl.find('.formatting-group #fileForm');
 84 | 		buttons.forEach((btn) => {
 85 | 			let markup = ``;
 86 | 			if (Array.isArray(btn.dropdownItems) && btn.dropdownItems.length) {
 87 | 				markup = generateFormattingDropdown(btn);
 88 | 			} else {
 89 | 				markup = `
 90 | 					<li title="${btn.title || ''}">
 91 | 						<button data-format="${btn.name}" class="btn btn-sm btn-link text-reset position-relative" aria-label="${btn.title || ''}">
 92 | 							<i class="${btn.iconClass}"></i>
 93 | 							${generateBadgetHtml(btn)}
 94 | 						</button>
 95 | 					</li>
 96 | 				`;
 97 | 			}
 98 | 			fileForm.before(markup);
 99 | 		});
100 | 
101 | 		const els = formattingBarEl.find('.formatting-group>li');
102 | 		els.tooltip({
103 | 			container: '#content',
104 | 			animation: false,
105 | 			trigger: 'manual',
106 | 		}).on('mouseenter', function (ev) {
107 | 			const target = $(ev.target);
108 | 			const isDropdown = target.hasClass('dropdown-menu') || !!target.parents('.dropdown-menu').length;
109 | 			if (!isDropdown) {
110 | 				$(this).tooltip('show');
111 | 			}
112 | 		}).on('click mouseleave', function () {
113 | 			$(this).tooltip('hide');
114 | 		});
115 | 	};
116 | 
117 | 	function generateBadgetHtml(btn) {
118 | 		let badgeHtml = '';
119 | 		if (btn.badge) {
120 | 			badgeHtml = `<span class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info"></span>`;
121 | 		}
122 | 		return badgeHtml;
123 | 	}
124 | 
125 | 	function generateFormattingDropdown(btn) {
126 | 		const dropdownItemsHtml = btn.dropdownItems.map(function (btn) {
127 | 			return `
128 | 				<li>
129 | 					<a href="#" data-format="${btn.name}" class="dropdown-item rounded-1 position-relative" role="menuitem">
130 | 						<i class="${btn.iconClass} text-secondary"></i> ${btn.text}
131 | 						${generateBadgetHtml(btn)}
132 | 					</a>
133 | 				</li>
134 | 			`;
135 | 		});
136 | 		return `
137 | 			<li class="dropdown bottom-sheet" tab-index="-1" title="${btn.title}">
138 | 				<button class="btn btn-sm btn-link text-reset" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="${btn.title}">
139 | 					<i class="${btn.iconClass}"></i>
140 | 				</button>
141 | 				<ul class="dropdown-menu p-1" role="menu">
142 | 				${dropdownItemsHtml}
143 | 				</ul>
144 | 			</li>
145 | 		`;
146 | 	}
147 | 
148 | 	formatting.addButton = function (iconClass, onClick, title, name) {
149 | 		name = name || iconClass.replace('fa fa-', '');
150 | 		formattingDispatchTable[name] = onClick;
151 | 		buttons.push({
152 | 			name,
153 | 			iconClass,
154 | 			title,
155 | 		});
156 | 	};
157 | 
158 | 	formatting.addDropdown = function (data) {
159 | 		buttons.push({
160 | 			iconClass: data.iconClass,
161 | 			title: data.title,
162 | 			dropdownItems: data.dropdownItems,
163 | 		});
164 | 		data.dropdownItems.forEach((btn) => {
165 | 			if (btn.name && btn.onClick) {
166 | 				formattingDispatchTable[btn.name] = btn.onClick;
167 | 			}
168 | 		});
169 | 	};
170 | 
171 | 	formatting.getDispatchTable = function () {
172 | 		return formattingDispatchTable;
173 | 	};
174 | 
175 | 	formatting.addButtonDispatch = function (name, onClick) {
176 | 		formattingDispatchTable[name] = onClick;
177 | 	};
178 | 
179 | 	formatting.addHandler = function (postContainer) {
180 | 		postContainer.on('click', '.formatting-bar [data-format]', function (event) {
181 | 			var format = $(this).attr('data-format');
182 | 			var textarea = $(this).parents('[component="composer"]').find('textarea')[0];
183 | 
184 | 			if (formattingDispatchTable.hasOwnProperty(format)) {
185 | 				formattingDispatchTable[format].call(
186 | 					postContainer, textarea, textarea.selectionStart, textarea.selectionEnd, event
187 | 				);
188 | 				preview.render(postContainer);
189 | 			}
190 | 		});
191 | 	};
192 | 
193 | 	return formatting;
194 | });
195 | 


--------------------------------------------------------------------------------
/static/lib/composer/scheduler.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | define('composer/scheduler', ['benchpress', 'bootbox', 'alerts', 'translator'], function (
  4 | 	Benchpress,
  5 | 	bootbox,
  6 | 	alerts,
  7 | 	translator
  8 | ) {
  9 | 	const scheduler = {};
 10 | 	const state = {
 11 | 		timestamp: 0,
 12 | 		open: false,
 13 | 		edit: false,
 14 | 		posts: {},
 15 | 	};
 16 | 	let displayBtnCons = [];
 17 | 	let displayBtns;
 18 | 	let cancelBtn;
 19 | 	let submitContainer;
 20 | 	let submitOptionsCon;
 21 | 
 22 | 	const dropdownDisplayBtn = {
 23 | 		el: null,
 24 | 		defaultText: '',
 25 | 		activeText: '',
 26 | 	};
 27 | 
 28 | 	const submitBtn = {
 29 | 		el: null,
 30 | 		icon: null,
 31 | 		defaultText: '',
 32 | 		activeText: '',
 33 | 	};
 34 | 	let dateInput;
 35 | 	let timeInput;
 36 | 
 37 | 	$(window).on('action:composer.activate', handleOnActivate);
 38 | 
 39 | 	scheduler.init = function ($postContainer, posts) {
 40 | 		state.timestamp = 0;
 41 | 		state.posts = posts;
 42 | 
 43 | 		translator.translateKeys(['[[topic:composer.post-later]]', '[[modules:composer.change-schedule-date]]']).then((translated) => {
 44 | 			dropdownDisplayBtn.defaultText = translated[0];
 45 | 			dropdownDisplayBtn.activeText = translated[1];
 46 | 		});
 47 | 
 48 | 		displayBtnCons = $postContainer[0].querySelectorAll('.display-scheduler');
 49 | 		displayBtns = $postContainer[0].querySelectorAll('.display-scheduler i');
 50 | 		dropdownDisplayBtn.el = $postContainer[0].querySelector('.dropdown-item.display-scheduler');
 51 | 		cancelBtn = $postContainer[0].querySelector('.dropdown-item.cancel-scheduling');
 52 | 		submitContainer = $postContainer.find('[component="composer/submit/container"]');
 53 | 		submitOptionsCon = $postContainer.find('[component="composer/submit/options/container"]');
 54 | 
 55 | 		submitBtn.el = $postContainer[0].querySelector('.composer-submit:not(.btn-sm)');
 56 | 		submitBtn.icon = submitBtn.el.querySelector('i');
 57 | 		submitBtn.defaultText = submitBtn.el.lastChild.textContent;
 58 | 		submitBtn.activeText = submitBtn.el.getAttribute('data-text-variant');
 59 | 
 60 | 		cancelBtn.addEventListener('click', cancelScheduling);
 61 | 		displayBtnCons.forEach(el => el.addEventListener('click', openModal));
 62 | 	};
 63 | 
 64 | 	scheduler.getTimestamp = function () {
 65 | 		if (!scheduler.isActive() || isNaN(state.timestamp)) {
 66 | 			return 0;
 67 | 		}
 68 | 		return state.timestamp;
 69 | 	};
 70 | 
 71 | 	scheduler.isActive = function () {
 72 | 		return state.timestamp > 0;
 73 | 	};
 74 | 
 75 | 	scheduler.isOpen = function () {
 76 | 		return state.open;
 77 | 	};
 78 | 
 79 | 	scheduler.reset = function () {
 80 | 		state.timestamp = 0;
 81 | 	};
 82 | 
 83 | 	scheduler.onChangeCategory = function (categoryData) {
 84 | 		toggleDisplayButtons(categoryData.privileges['topics:schedule']);
 85 | 		toggleItems(false);
 86 | 		const optionsVisible = categoryData.privileges['topics:schedule'] || submitOptionsCon.attr('data-submit-options') > 0;
 87 | 		submitContainer.find('.composer-submit').toggleClass('rounded-1', !optionsVisible);
 88 | 		submitOptionsCon.toggleClass('hidden', !optionsVisible);
 89 | 		scheduler.reset();
 90 | 	};
 91 | 
 92 | 	async function openModal() {
 93 | 		const html = await Benchpress.render('modals/topic-scheduler');
 94 | 		bootbox.dialog({
 95 | 			message: html,
 96 | 			title: '[[modules:composer.schedule-for]]',
 97 | 			className: 'topic-scheduler',
 98 | 			onShown: initModal,
 99 | 			onHidden: handleOnHidden,
100 | 			onEscape: true,
101 | 			buttons: {
102 | 				cancel: {
103 | 					label: state.timestamp ? '[[modules:composer.cancel-scheduling]]' : '[[modules:bootbox.cancel]]',
104 | 					className: (state.timestamp ? 'btn-warning' : 'btn-outline-secondary') + (state.edit ? ' hidden' : ''),
105 | 					callback: cancelScheduling,
106 | 				},
107 | 				set: {
108 | 					label: '[[modules:composer.set-schedule-date]]',
109 | 					className: 'btn-primary',
110 | 					callback: setTimestamp,
111 | 				},
112 | 			},
113 | 		});
114 | 	}
115 | 
116 | 	function initModal(ev) {
117 | 		state.open = true;
118 | 		const schedulerContainer = ev.target.querySelector('.datetime-picker');
119 | 		dateInput = schedulerContainer.querySelector('input[type="date"]');
120 | 		timeInput = schedulerContainer.querySelector('input[type="time"]');
121 | 		initDateTimeInputs();
122 | 	}
123 | 
124 | 	function handleOnHidden() {
125 | 		state.open = false;
126 | 	}
127 | 
128 | 	function handleOnActivate(ev, { post_uuid }) {
129 | 		state.edit = false;
130 | 
131 | 		const postData = state.posts[post_uuid];
132 | 		if (postData && postData.isMain && postData.timestamp > Date.now()) {
133 | 			state.timestamp = postData.timestamp;
134 | 			state.edit = true;
135 | 			toggleItems();
136 | 		}
137 | 	}
138 | 
139 | 	function initDateTimeInputs() {
140 | 		const d = new Date();
141 | 		// Update min. selectable date and time
142 | 		const nowLocalISO = new Date(d.getTime() - (d.getTimezoneOffset() * 60000)).toJSON();
143 | 		dateInput.setAttribute('min', nowLocalISO.slice(0, 10));
144 | 		timeInput.setAttribute('min', nowLocalISO.slice(11, -8));
145 | 
146 | 		if (scheduler.isActive()) {
147 | 			const scheduleDate = new Date(state.timestamp - (d.getTimezoneOffset() * 60000)).toJSON();
148 | 			dateInput.value = scheduleDate.slice(0, 10);
149 | 			timeInput.value = scheduleDate.slice(11, -8);
150 | 		}
151 | 	}
152 | 
153 | 	function setTimestamp() {
154 | 		const bothFilled = dateInput.value && timeInput.value;
155 | 		const timestamp = new Date(`${dateInput.value} ${timeInput.value}`).getTime();
156 | 		if (!bothFilled || isNaN(timestamp) || timestamp < Date.now()) {
157 | 			state.timestamp = 0;
158 | 			const message = timestamp < Date.now() ? '[[error:scheduling-to-past]]' : '[[error:invalid-schedule-date]]';
159 | 			alerts.alert({
160 | 				type: 'danger',
161 | 				timeout: 3000,
162 | 				title: '',
163 | 				alert_id: 'post_error',
164 | 				message,
165 | 			});
166 | 			return false;
167 | 		}
168 | 		if (!state.timestamp) {
169 | 			toggleItems(true);
170 | 		}
171 | 		state.timestamp = timestamp;
172 | 	}
173 | 
174 | 	function cancelScheduling() {
175 | 		if (!state.timestamp) {
176 | 			return;
177 | 		}
178 | 		toggleItems(false);
179 | 		state.timestamp = 0;
180 | 	}
181 | 
182 | 	function toggleItems(active = true) {
183 | 		displayBtns.forEach(btn => btn.classList.toggle('active', active));
184 | 		if (submitBtn.icon) {
185 | 			submitBtn.icon.classList.toggle('fa-check', !active);
186 | 			submitBtn.icon.classList.toggle('fa-clock-o', active);
187 | 		}
188 | 		if (dropdownDisplayBtn.el) {
189 | 			dropdownDisplayBtn.el.textContent = active ? dropdownDisplayBtn.activeText : dropdownDisplayBtn.defaultText;
190 | 			cancelBtn.classList.toggle('hidden', !active);
191 | 		}
192 | 		// Toggle submit button text
193 | 		submitBtn.el.lastChild.textContent = active ? submitBtn.activeText : submitBtn.defaultText;
194 | 	}
195 | 
196 | 	function toggleDisplayButtons(show) {
197 | 		displayBtnCons.forEach(btn => btn.classList.toggle('hidden', !show));
198 | 	}
199 | 
200 | 	return scheduler;
201 | });
202 | 


--------------------------------------------------------------------------------
/static/scss/composer.scss:
--------------------------------------------------------------------------------
  1 | .composer {
  2 | 	background-color: var(--bs-body-bg);
  3 | 	color: var(--bs-body-color);
  4 | 	z-index: $zindex-dropdown;
  5 | 	visibility: hidden;
  6 | 	padding: 0;
  7 | 	position: fixed;
  8 | 	bottom: 0;
  9 | 	top: 0;
 10 | 	right: 0;
 11 | 	left: 0;
 12 | 
 13 | 	.mobile-navbar {
 14 | 		position: static;
 15 | 		min-height: 40px;
 16 | 		margin: 0;
 17 | 
 18 | 		.btn-group {
 19 | 			flex-shrink: 0;
 20 | 		}
 21 | 
 22 | 		button {
 23 | 			font-size: 20px;
 24 | 		}
 25 | 
 26 | 		display: flex;
 27 | 
 28 | 		.category-name-container, .title {
 29 | 			text-align: center;
 30 | 			text-overflow: ellipsis;
 31 | 			overflow: hidden;
 32 | 			white-space: nowrap;
 33 | 			flex-grow: 2;
 34 | 			font-size: 16px;
 35 | 			line-height: inherit;
 36 | 			padding: 9px 5px;
 37 | 			margin: 0;
 38 | 		}
 39 | 	}
 40 | 
 41 | 	.title-container {
 42 | 		> div[data-component="composer/handle"] {
 43 | 			flex: 0.33;
 44 | 		}
 45 | 
 46 | 		.category-list-container {
 47 | 
 48 | 			[component="category-selector"] {
 49 | 				.category-dropdown-menu {
 50 | 					max-height: 300px;
 51 | 				}
 52 | 			}
 53 | 		}
 54 | 
 55 | 		.category-list {
 56 | 			padding: 0 2rem;
 57 | 		}
 58 | 
 59 | 		.action-bar {
 60 | 			.dropdown-menu:empty {
 61 | 				& ~ .dropdown-toggle {
 62 | 					display: none;
 63 | 				}
 64 | 			}
 65 | 		}
 66 | 	}
 67 | 
 68 | 	.formatting-bar {
 69 | 		.spacer {
 70 | 			&:before {
 71 | 				content: ' | ';
 72 | 				color: $gray-200;
 73 | 			}
 74 | 		}
 75 | 	}
 76 | 
 77 | 	.tags-container {
 78 | 		[component="composer/tag/dropdown"] {
 79 | 			.dropdown-menu {
 80 | 				max-height: 400px;
 81 | 				overflow-y: auto;
 82 | 			}
 83 | 
 84 | 			> button {
 85 | 				border: 0;
 86 | 			}
 87 | 		}
 88 | 		// if picking tags from taglist dropdown hide the input
 89 | 		&.haswhitelist .bootstrap-tagsinput {
 90 | 			input {
 91 | 				display: none;
 92 | 			}
 93 | 		}
 94 | 		.bootstrap-tagsinput {
 95 | 			background: transparent;
 96 | 			flex-grow: 1;
 97 | 			border: 0;
 98 | 			padding: 0;
 99 | 			box-shadow: none;
100 | 			max-height: 80px;
101 | 			overflow: auto;
102 | 
103 | 			input {
104 | 				&::placeholder{
105 | 					color: $input-placeholder-color;
106 | 				}
107 | 				color: $body-color;
108 | 				font-size: 16px;
109 | 				width: 50%;
110 | 				height: 28px;
111 | 				padding: 4px 6px;
112 | 				@include media-breakpoint-down(md) {
113 | 					width: 100%;
114 | 				}
115 | 			}
116 | 
117 | 			.ui-autocomplete {
118 | 				max-height: 350px;
119 | 				overflow-x: hidden;
120 | 				overflow-y: auto;
121 | 			}
122 | 		}
123 | 	}
124 | 
125 | 	.resizer {
126 | 		background: linear-gradient(transparent, var(--bs-body-bg));
127 | 		margin-left: calc($spacer * -0.5);
128 | 		padding-left: $spacer;
129 | 
130 | 		.trigger {
131 | 			cursor: ns-resize;
132 | 
133 | 			.handle {
134 | 				border-top-left-radius: 50%;
135 | 				border-top-right-radius: 50%;
136 | 				border-bottom: 0 !important;
137 | 			}
138 | 		}
139 | 	}
140 | 
141 | 	.minimize {
142 | 		display: none;
143 | 		position: absolute;
144 | 		top: 0px;
145 | 		right: 10px;
146 | 		height: 0;
147 | 
148 | 		@include pointer;
149 | 
150 | 		.trigger {
151 | 			position: relative;
152 | 			display: block;
153 | 			top: -20px;
154 | 			right: 0px;
155 | 			margin: 0 auto;
156 | 			margin-left: 20px;
157 | 			line-height: 26px;
158 | 			@include transition(filter .15s linear);
159 | 
160 | 			&:hover {
161 | 				filter: invert(100%);
162 | 			}
163 | 
164 | 			i {
165 | 				width: 32px;
166 | 				height: 32px;
167 | 				background: #333;
168 | 				border: 1px solid #333;
169 | 				border-radius: 50%;
170 | 
171 | 				position: relative;
172 | 
173 | 				color: #FFF;
174 | 				font-size: 16px;
175 | 
176 | 				&:before {
177 | 					position: relative;
178 | 					top: 25%;
179 | 				}
180 | 			}
181 | 		}
182 | 	}
183 | 
184 | 	&.reply {
185 | 		.title-container {
186 | 			display: none;
187 | 		}
188 | 	}
189 | 
190 | 	&.resizable.maximized {
191 | 		.resizer {
192 | 			top: 0 !important;
193 | 			background: transparent;
194 | 
195 | 			.trigger {
196 | 				height: $spacer * 0.5;
197 | 
198 | 				.handle {
199 | 					border-top-left-radius: 0%;
200 | 					border-top-right-radius: 0%;
201 | 					border-bottom-left-radius: 50%;
202 | 					border-bottom-right-radius: 50%;
203 | 					border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
204 | 				}
205 | 
206 | 				i {
207 | 					&:before {
208 | 						content: fa-content($fa-var-chevron-down);
209 | 					}
210 | 				}
211 | 			}
212 | 		}
213 | 	}
214 | 
215 | 	.draft-icon {
216 | 		font-family: 'FontAwesome';
217 | 		color: $success;
218 | 		opacity: 0;
219 | 
220 | 		&::before {
221 | 			content: fa-content($fa-var-save);
222 | 		}
223 | 
224 | 		&.active {
225 | 			animation: draft-saved 3s ease;
226 | 		}
227 | 	}
228 | 
229 | 	textarea {
230 | 		resize: none;
231 | 	}
232 | 
233 | 	.preview {
234 | 		padding: $input-padding-y $input-padding-x;
235 | 	}
236 | }
237 | 
238 | .datetime-picker {
239 | 	display: flex;
240 | 	justify-content: center;
241 | 	flex-direction: row;
242 | 	min-width: 310px;
243 | 	max-width: 310px;
244 | 	margin: 0 auto;
245 | 
246 | 	input {
247 | 		flex: 3;
248 | 		line-height: inherit;
249 | 	}
250 | 
251 | 	input + input {
252 | 		border-left: none;
253 | 		flex: 2;
254 | 	}
255 | }
256 | 
257 | .modal.topic-scheduler {
258 | 	z-index: 1070;
259 | 	& + .modal-backdrop {
260 | 		z-index: 1060;
261 | 	}
262 | }
263 | 
264 | @keyframes draft-saved {
265 | 	0%, 100% {
266 | 		opacity: 0;
267 | 	}
268 | 
269 | 	15% {
270 | 		opacity: 1;
271 | 	}
272 | 
273 | 	30% {
274 | 		opacity: 0.5;
275 | 	}
276 | 
277 | 	45% {
278 | 		opacity: 1;
279 | 	}
280 | 
281 | 	85% {
282 | 		opacity: 1;
283 | 	}
284 | }
285 | 
286 | @keyframes pulse {
287 | 	from {
288 | 		transform: scale(1);
289 | 		color: inherit;
290 | 	}
291 | 	50% {
292 | 		transform: scale(.9);
293 | 	}
294 | 	to {
295 | 		transform: scale(1);
296 | 		color: #00adff;
297 | 	}
298 | }
299 | 
300 | @include media-breakpoint-down(lg) {
301 | 	html.composing .composer { z-index: $zindex-modal; }
302 | }
303 | 
304 | @include media-breakpoint-down(sm) {
305 | 	html.composing {
306 | 		.composer {
307 | 			height: 100%;
308 | 
309 | 			.draft-icon {
310 | 				position: absolute;
311 | 				bottom: 1em;
312 | 				right: 0em;
313 | 
314 | 				&::after {
315 | 					top: 7px;
316 | 				}
317 | 			}
318 | 
319 | 			.preview-container {
320 | 				max-width: initial;
321 | 			}
322 | 		}
323 | 
324 | 		body {
325 | 			padding-bottom: 0 !important;
326 | 		}
327 | 	}
328 | }
329 | 
330 | @include media-breakpoint-up(lg) {
331 | 	html.composing {
332 | 		.composer {
333 | 			left: 15%;
334 | 			width: 70%;
335 | 			min-height: 400px;
336 | 
337 | 			.resizer {
338 | 				display: block;
339 | 			}
340 | 
341 | 			.minimize {
342 | 				display: block;
343 | 			}
344 | 		}
345 | 	}
346 | }
347 | 
348 | @include media-breakpoint-up(md) {
349 | 	// without this formatting elements that are dropdowns are not visible on desktop.
350 | 	// on mobile dropdowns use bottom-sheet and overflow is auto
351 | 	.formatting-group {
352 | 		overflow: visible!important;
353 | 	}
354 | }
355 | 
356 | @import './zen-mode';
357 | @import './page-compose';
358 | @import './textcomplete';
359 | 
360 | 
361 | .skin-noskin, .skin-cosmo, .skin-flatly,
362 | .skin-journal, .skin-litera, .skin-minty, .skin-pulse,
363 | .skin-sandstone, .skin-sketchy, .skin-spacelab, .skin-united {
364 | 	.composer {
365 | 		color: var(--bs-secondary) !important;
366 | 		background-color: var(--bs-light) !important;
367 | 	}
368 | }
369 | 
370 | .skin-cerulean, .skin-lumen, .skin-lux, .skin-morph,
371 | .skin-simplex, .skin-yeti, .skin-zephyr {
372 | 	.composer {
373 | 		color: var(--bs-body) !important;
374 | 		background-color: var(--bs-light) !important;
375 | 	}
376 | }
377 | 
378 | @include color-mode(dark) {
379 | 	.skin-noskin .composer {
380 | 		color: var(--bs-secondary)!important;
381 | 		background-color: var(--bs-body-bg)!important;
382 | 	}
383 | }


--------------------------------------------------------------------------------
/static/lib/composer/tags.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 'use strict';
  3 | 
  4 | define('composer/tags', ['alerts'], function (alerts) {
  5 | 	var tags = {};
  6 | 
  7 | 	var minTags;
  8 | 	var maxTags;
  9 | 
 10 | 	tags.init = function (postContainer, postData) {
 11 | 		var tagEl = postContainer.find('.tags');
 12 | 		if (!tagEl.length) {
 13 | 			return;
 14 | 		}
 15 | 
 16 | 		minTags = ajaxify.data.hasOwnProperty('minTags') ? ajaxify.data.minTags : config.minimumTagsPerTopic;
 17 | 		maxTags = ajaxify.data.hasOwnProperty('maxTags') ? ajaxify.data.maxTags : config.maximumTagsPerTopic;
 18 | 
 19 | 		tagEl.tagsinput({
 20 | 			tagClass: 'badge bg-info rounded-1',
 21 | 			confirmKeys: [13, 44],
 22 | 			trimValue: true,
 23 | 		});
 24 | 		var input = postContainer.find('.bootstrap-tagsinput input');
 25 | 
 26 | 		toggleTagInput(postContainer, postData, ajaxify.data);
 27 | 
 28 | 		app.loadJQueryUI(function () {
 29 | 			input.autocomplete({
 30 | 				delay: 100,
 31 | 				position: { my: 'left bottom', at: 'left top', collision: 'flip' },
 32 | 				appendTo: postContainer.find('.bootstrap-tagsinput'),
 33 | 				open: function () {
 34 | 					$(this).autocomplete('widget').css('z-index', 20000);
 35 | 				},
 36 | 				source: function (request, response) {
 37 | 					socket.emit('topics.autocompleteTags', {
 38 | 						query: request.term,
 39 | 						cid: postData.cid,
 40 | 					}, function (err, tags) {
 41 | 						if (err) {
 42 | 							return alerts.error(err);
 43 | 						}
 44 | 						if (tags) {
 45 | 							response(tags);
 46 | 						}
 47 | 						$('.ui-autocomplete a').attr('data-ajaxify', 'false');
 48 | 					});
 49 | 				},
 50 | 				select: function (/* event, ui */) {
 51 | 					// when autocomplete is selected from the dropdown simulate a enter key down to turn it into a tag
 52 | 					triggerEnter(input);
 53 | 				},
 54 | 			});
 55 | 
 56 | 			addTags(postData.tags, tagEl);
 57 | 
 58 | 			tagEl.on('beforeItemAdd', function (event) {
 59 | 				var reachedMaxTags = maxTags && maxTags <= tags.getTags(postContainer.attr('data-uuid')).length;
 60 | 				var cleanTag = utils.cleanUpTag(event.item, config.maximumTagLength);
 61 | 				var different = cleanTag !== event.item;
 62 | 				event.cancel = different ||
 63 | 					event.item.length < config.minimumTagLength ||
 64 | 					event.item.length > config.maximumTagLength ||
 65 | 					reachedMaxTags;
 66 | 
 67 | 				if (event.item.length < config.minimumTagLength) {
 68 | 					return alerts.error('[[error:tag-too-short, ' + config.minimumTagLength + ']]');
 69 | 				} else if (event.item.length > config.maximumTagLength) {
 70 | 					return alerts.error('[[error:tag-too-long, ' + config.maximumTagLength + ']]');
 71 | 				} else if (reachedMaxTags) {
 72 | 					return alerts.error('[[error:too-many-tags, ' + maxTags + ']]');
 73 | 				}
 74 | 				var cid = postData.hasOwnProperty('cid') ? postData.cid : ajaxify.data.cid;
 75 | 				$(window).trigger('action:tag.beforeAdd', {
 76 | 					cid,
 77 | 					tagEl,
 78 | 					tag: event.item,
 79 | 					event,
 80 | 					inputAutocomplete: input,
 81 | 				});
 82 | 				if (different) {
 83 | 					tagEl.tagsinput('add', cleanTag);
 84 | 				}
 85 | 				if (event.cancel && input.length) {
 86 | 					input.autocomplete('close');
 87 | 				}
 88 | 			});
 89 | 
 90 | 			tagEl.on('itemRemoved', function (event) {
 91 | 				if (!event.item || (event.options && event.options.skipRemoveCheck)) {
 92 | 					return;
 93 | 				}
 94 | 
 95 | 				socket.emit('topics.canRemoveTag', { tag: event.item }, function (err, allowed) {
 96 | 					if (err) {
 97 | 						return alerts.error(err);
 98 | 					}
 99 | 					if (!allowed) {
100 | 						alerts.error('[[error:cant-remove-system-tag]]');
101 | 						tagEl.tagsinput('add', event.item, { skipAddCheck: true });
102 | 					}
103 | 				});
104 | 			});
105 | 
106 | 			tagEl.on('itemAdded', function (event) {
107 | 				if (event.options && event.options.skipAddCheck) {
108 | 					return;
109 | 				}
110 | 				var cid = postData.hasOwnProperty('cid') ? postData.cid : ajaxify.data.cid;
111 | 				socket.emit('topics.isTagAllowed', { tag: event.item, cid: cid || 0 }, function (err, allowed) {
112 | 					if (err) {
113 | 						return alerts.error(err);
114 | 					}
115 | 					if (!allowed) {
116 | 						return tagEl.tagsinput('remove', event.item, { skipRemoveCheck: true });
117 | 					}
118 | 					$(window).trigger('action:tag.added', {
119 | 						cid,
120 | 						tagEl,
121 | 						tag: event.item,
122 | 						inputAutocomplete: input,
123 | 					});
124 | 					if (input.length) {
125 | 						input.autocomplete('close');
126 | 					}
127 | 				});
128 | 			});
129 | 		});
130 | 
131 | 		input.attr('tabIndex', tagEl.attr('tabIndex'));
132 | 		input.on('blur', function () {
133 | 			triggerEnter(input);
134 | 		});
135 | 
136 | 		$('[component="composer/tag/dropdown"]').on('click', 'li', function () {
137 | 			var tag = $(this).attr('data-tag');
138 | 			if (tag) {
139 | 				addTags([tag], tagEl);
140 | 			}
141 | 			return false;
142 | 		});
143 | 	};
144 | 
145 | 	tags.isEnoughTags = function (post_uuid) {
146 | 		return tags.getTags(post_uuid).length >= minTags;
147 | 	};
148 | 
149 | 	tags.minTagCount = function () {
150 | 		return minTags;
151 | 	};
152 | 
153 | 	tags.onChangeCategory = function (postContainer, postData, cid, categoryData) {
154 | 		var tagDropdown = postContainer.find('[component="composer/tag/dropdown"]');
155 | 		if (!tagDropdown.length) {
156 | 			return;
157 | 		}
158 | 
159 | 		toggleTagInput(postContainer, postData, categoryData);
160 | 		tagDropdown.toggleClass('hidden', !categoryData.tagWhitelist || !categoryData.tagWhitelist.length);
161 | 		if (categoryData.tagWhitelist) {
162 | 			app.parseAndTranslate('composer', 'tagWhitelist', { tagWhitelist: categoryData.tagWhitelist }, function (html) {
163 | 				tagDropdown.find('.dropdown-menu').html(html);
164 | 			});
165 | 		}
166 | 	};
167 | 
168 | 	function toggleTagInput(postContainer, postData, data) {
169 | 		var tagEl = postContainer.find('.tags');
170 | 		var input = postContainer.find('.bootstrap-tagsinput input');
171 | 		if (!input.length) {
172 | 			return;
173 | 		}
174 | 
175 | 		if (data.hasOwnProperty('minTags')) {
176 | 			minTags = data.minTags;
177 | 		}
178 | 		if (data.hasOwnProperty('maxTags')) {
179 | 			maxTags = data.maxTags;
180 | 		}
181 | 
182 | 		if (data.tagWhitelist && data.tagWhitelist.length) {
183 | 			input.attr('readonly', '');
184 | 			input.attr('placeholder', '');
185 | 
186 | 			tagEl.tagsinput('items').slice().forEach(function (tag) {
187 | 				if (data.tagWhitelist.indexOf(tag) === -1) {
188 | 					tagEl.tagsinput('remove', tag);
189 | 				}
190 | 			});
191 | 		} else {
192 | 			input.removeAttr('readonly');
193 | 			input.attr('placeholder', postContainer.find('input.tags').attr('placeholder'));
194 | 		}
195 | 		postContainer.find('.tags-container').toggleClass('haswhitelist', !!(data.tagWhitelist && data.tagWhitelist.length));
196 | 		postContainer.find('.tags-container').toggleClass('hidden', (
197 | 			data.privileges && data.privileges.hasOwnProperty('topics:tag') && !data.privileges['topics:tag']) ||
198 | 			(maxTags === 0 && !postData && !postData.tags && !postData.tags.length));
199 | 
200 | 		if (data.privileges && data.privileges.hasOwnProperty('topics:tag') && !data.privileges['topics:tag']) {
201 | 			tagEl.tagsinput('removeAll');
202 | 		}
203 | 
204 | 		$(window).trigger('action:tag.toggleInput', {
205 | 			postContainer: postContainer,
206 | 			tagWhitelist: data.tagWhitelist,
207 | 			tagsInput: input,
208 | 		});
209 | 	}
210 | 
211 | 	function triggerEnter(input) {
212 | 		// http://stackoverflow.com/a/3276819/583363
213 | 		var e = jQuery.Event('keypress');
214 | 		e.which = 13;
215 | 		e.keyCode = 13;
216 | 		setTimeout(function () {
217 | 			input.trigger(e);
218 | 		}, 100);
219 | 	}
220 | 
221 | 	function addTags(tags, tagEl) {
222 | 		if (tags && tags.length) {
223 | 			for (var i = 0; i < tags.length; ++i) {
224 | 				tagEl.tagsinput('add', tags[i]);
225 | 			}
226 | 		}
227 | 	}
228 | 
229 | 	tags.getTags = function (post_uuid) {
230 | 		return $('.composer[data-uuid="' + post_uuid + '"] .tags').tagsinput('items');
231 | 	};
232 | 
233 | 	return tags;
234 | });
235 | 


--------------------------------------------------------------------------------
/static/lib/composer/uploads.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | define('composer/uploads', [
  4 | 	'composer/preview',
  5 | 	'composer/categoryList',
  6 | 	'translator',
  7 | 	'alerts',
  8 | 	'uploadHelpers',
  9 | 	'jquery-form',
 10 | ], function (preview, categoryList, translator, alerts, uploadHelpers) {
 11 | 	var uploads = {
 12 | 		inProgress: {},
 13 | 	};
 14 | 
 15 | 	var uploadingText = '';
 16 | 
 17 | 	uploads.initialize = function (post_uuid) {
 18 | 		initializeDragAndDrop(post_uuid);
 19 | 		initializePaste(post_uuid);
 20 | 
 21 | 		addChangeHandlers(post_uuid);
 22 | 
 23 | 		translator.translate('[[modules:composer.uploading, ' + 0 + '%]]', function (translated) {
 24 | 			uploadingText = translated;
 25 | 		});
 26 | 	};
 27 | 
 28 | 	function addChangeHandlers(post_uuid) {
 29 | 		var postContainer = $('.composer[data-uuid="' + post_uuid + '"]');
 30 | 
 31 | 		postContainer.find('#files').on('change', function (e) {
 32 | 			var files = (e.target || {}).files ||
 33 | 				($(this).val() ? [{ name: $(this).val(), type: utils.fileMimeType($(this).val()) }] : null);
 34 | 			if (files) {
 35 | 				uploadContentFiles({ files: files, post_uuid: post_uuid, route: '/api/post/upload' });
 36 | 			}
 37 | 		});
 38 | 	}
 39 | 
 40 | 	function initializeDragAndDrop(post_uuid) {
 41 | 		var postContainer = $('.composer[data-uuid="' + post_uuid + '"]');
 42 | 		uploadHelpers.handleDragDrop({
 43 | 			container: postContainer,
 44 | 			callback: function (upload) {
 45 | 				uploadContentFiles({
 46 | 					files: upload.files,
 47 | 					post_uuid: post_uuid,
 48 | 					route: '/api/post/upload',
 49 | 					formData: upload.formData,
 50 | 				});
 51 | 			},
 52 | 		});
 53 | 	}
 54 | 
 55 | 	function initializePaste(post_uuid) {
 56 | 		var postContainer = $('.composer[data-uuid="' + post_uuid + '"]');
 57 | 		uploadHelpers.handlePaste({
 58 | 			container: postContainer,
 59 | 			callback: function (upload) {
 60 | 				uploadContentFiles({
 61 | 					files: upload.files,
 62 | 					fileNames: upload.fileNames,
 63 | 					post_uuid: post_uuid,
 64 | 					route: '/api/post/upload',
 65 | 					formData: upload.formData,
 66 | 				});
 67 | 			},
 68 | 		});
 69 | 	}
 70 | 
 71 | 	function escapeRegExp(text) {
 72 | 		return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 73 | 	}
 74 | 
 75 | 	function insertText(str, index, insert) {
 76 | 		return str.slice(0, index) + insert + str.slice(index);
 77 | 	}
 78 | 
 79 | 	function uploadContentFiles(params) {
 80 | 		var files = [...params.files];
 81 | 		var post_uuid = params.post_uuid;
 82 | 		var postContainer = $('.composer[data-uuid="' + post_uuid + '"]');
 83 | 		var textarea = postContainer.find('textarea');
 84 | 		var text = textarea.val();
 85 | 		var uploadForm = postContainer.find('#fileForm');
 86 | 		var doneUploading = false;
 87 | 		uploadForm.attr('action', config.relative_path + params.route);
 88 | 
 89 | 		var cid = categoryList.getSelectedCid();
 90 | 		if (!cid && ajaxify.data.cid) {
 91 | 			cid = ajaxify.data.cid;
 92 | 		}
 93 | 		var i = 0;
 94 | 		var isImage = false;
 95 | 		for (i = 0; i < files.length; ++i) {
 96 | 			isImage = files[i].type.match(/image./);
 97 | 			if ((isImage && !app.user.privileges['upload:post:image']) || (!isImage && !app.user.privileges['upload:post:file'])) {
 98 | 				return alerts.error('[[error:no-privileges]]');
 99 | 			}
100 | 		}
101 | 
102 | 		var filenameMapping = [];
103 | 		let filesText = '';
104 | 		for (i = 0; i < files.length; ++i) {
105 | 			// The filename map has datetime and iterator prepended so that they can be properly tracked even if the
106 | 			// filenames are identical.
107 | 			filenameMapping.push(i + '_' + Date.now() + '_' + (params.fileNames ? params.fileNames[i] : files[i].name));
108 | 			isImage = files[i].type.match(/image./);
109 | 
110 | 			if (!app.user.isAdmin && files[i].size > parseInt(config.maximumFileSize, 10) * 1024) {
111 | 				uploadForm[0].reset();
112 | 				return alerts.error('[[error:file-too-big, ' + config.maximumFileSize + ']]');
113 | 			}
114 | 			filesText += (isImage ? '!' : '') + '[' + filenameMapping[i] + '](' + uploadingText + ') ';
115 | 		}
116 | 
117 | 		const cursorPosition = textarea.getCursorPosition();
118 | 		const textLen = text.length;
119 | 		text = insertText(text, cursorPosition, filesText);
120 | 
121 | 		if (uploadForm.length) {
122 | 			postContainer.find('[data-action="post"]').prop('disabled', true);
123 | 		}
124 | 		textarea.val(text);
125 | 
126 | 		$(window).trigger('action:composer.uploadStart', {
127 | 			post_uuid: post_uuid,
128 | 			files: filenameMapping.map(function (filename, i) {
129 | 				return {
130 | 					filename: filename.replace(/^\d+_\d{13}_/, ''),
131 | 					isImage: /image./.test(files[i].type),
132 | 				};
133 | 			}),
134 | 			text: uploadingText,
135 | 		});
136 | 
137 | 		uploadForm.off('submit').submit(function () {
138 | 			function updateTextArea(filename, text, trim) {
139 | 				var newFilename;
140 | 				if (trim) {
141 | 					newFilename = filename.replace(/^\d+_\d{13}_/, '');
142 | 				}
143 | 				var current = textarea.val();
144 | 				var re = new RegExp(escapeRegExp(filename) + ']\\([^)]+\\)', 'g');
145 | 				textarea.val(current.replace(re, (newFilename || filename) + '](' + text + ')'));
146 | 
147 | 				$(window).trigger('action:composer.uploadUpdate', {
148 | 					post_uuid: post_uuid,
149 | 					filename: filename,
150 | 					text: text,
151 | 				});
152 | 			}
153 | 
154 | 			uploads.inProgress[post_uuid] = uploads.inProgress[post_uuid] || [];
155 | 			uploads.inProgress[post_uuid].push(1);
156 | 
157 | 			if (params.formData) {
158 | 				params.formData.append('cid', cid);
159 | 			}
160 | 
161 | 			$(this).ajaxSubmit({
162 | 				headers: {
163 | 					'x-csrf-token': config.csrf_token,
164 | 				},
165 | 				resetForm: true,
166 | 				clearForm: true,
167 | 				formData: params.formData,
168 | 				data: { cid: cid },
169 | 
170 | 				error: function (xhr) {
171 | 					doneUploading = true;
172 | 					postContainer.find('[data-action="post"]').prop('disabled', false);
173 | 					const errorMsg = onUploadError(xhr, post_uuid);
174 | 					for (var i = 0; i < files.length; ++i) {
175 | 						updateTextArea(filenameMapping[i], errorMsg, true);
176 | 					}
177 | 					preview.render(postContainer);
178 | 				},
179 | 
180 | 				uploadProgress: function (event, position, total, percent) {
181 | 					translator.translate('[[modules:composer.uploading, ' + percent + '%]]', function (translated) {
182 | 						if (doneUploading) {
183 | 							return;
184 | 						}
185 | 						for (var i = 0; i < files.length; ++i) {
186 | 							updateTextArea(filenameMapping[i], translated);
187 | 						}
188 | 					});
189 | 				},
190 | 
191 | 				success: function (res) {
192 | 					const uploads = res.response.images;
193 | 					doneUploading = true;
194 | 					if (uploads && uploads.length) {
195 | 						for (var i = 0; i < uploads.length; ++i) {
196 | 							uploads[i].filename = filenameMapping[i].replace(/^\d+_\d{13}_/, '');
197 | 							uploads[i].isImage = /image./.test(files[i].type);
198 | 							updateTextArea(filenameMapping[i], uploads[i].url, true);
199 | 						}
200 | 					}
201 | 					preview.render(postContainer);
202 | 					textarea.prop('selectionEnd', cursorPosition + textarea.val().length - textLen);
203 | 					textarea.focus();
204 | 					postContainer.find('[data-action="post"]').prop('disabled', false);
205 | 					$(window).trigger('action:composer.upload', {
206 | 						post_uuid: post_uuid,
207 | 						files: uploads,
208 | 					});
209 | 				},
210 | 
211 | 				complete: function () {
212 | 					uploadForm[0].reset();
213 | 					uploads.inProgress[post_uuid].pop();
214 | 				},
215 | 			});
216 | 
217 | 			return false;
218 | 		});
219 | 
220 | 		uploadForm.submit();
221 | 	}
222 | 
223 | 	function onUploadError(xhr, post_uuid) {
224 | 		var msg = (xhr.responseJSON &&
225 | 			(xhr.responseJSON.error || (xhr.responseJSON.status && xhr.responseJSON.status.message))) ||
226 | 			'[[error:parse-error]]';
227 | 
228 | 		if (xhr && xhr.status === 413) {
229 | 			msg = xhr.statusText || 'Request Entity Too Large';
230 | 		}
231 | 		alerts.error(msg);
232 | 		$(window).trigger('action:composer.uploadError', {
233 | 			post_uuid: post_uuid,
234 | 			message: msg,
235 | 		});
236 | 		return msg;
237 | 	}
238 | 
239 | 	return uploads;
240 | });
241 | 
242 | 


--------------------------------------------------------------------------------
/library.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const url = require('url');
  4 | 
  5 | const nconf = require.main.require('nconf');
  6 | const validator = require('validator');
  7 | 
  8 | const plugins = require.main.require('./src/plugins');
  9 | const topics = require.main.require('./src/topics');
 10 | const categories = require.main.require('./src/categories');
 11 | const posts = require.main.require('./src/posts');
 12 | const user = require.main.require('./src/user');
 13 | const meta = require.main.require('./src/meta');
 14 | const privileges = require.main.require('./src/privileges');
 15 | const translator = require.main.require('./src/translator');
 16 | const utils = require.main.require('./src/utils');
 17 | const helpers = require.main.require('./src/controllers/helpers');
 18 | const SocketPlugins = require.main.require('./src/socket.io/plugins');
 19 | const socketMethods = require('./websockets');
 20 | 
 21 | const plugin = module.exports;
 22 | 
 23 | plugin.socketMethods = socketMethods;
 24 | 
 25 | plugin.init = async function (data) {
 26 | 	const { router } = data;
 27 | 	const routeHelpers = require.main.require('./src/routes/helpers');
 28 | 	const controllers = require('./controllers');
 29 | 	SocketPlugins.composer = socketMethods;
 30 | 	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/composer-default', controllers.renderAdminPage);
 31 | };
 32 | 
 33 | plugin.appendConfig = async function (config) {
 34 | 	config['composer-default'] = await meta.settings.get('composer-default');
 35 | 	return config;
 36 | };
 37 | 
 38 | plugin.addAdminNavigation = async function (header) {
 39 | 	header.plugins.push({
 40 | 		route: '/plugins/composer-default',
 41 | 		icon: 'fa-edit',
 42 | 		name: 'Composer (Default)',
 43 | 	});
 44 | 	return header;
 45 | };
 46 | 
 47 | plugin.addPrefetchTags = async function (hookData) {
 48 | 	const prefetch = [
 49 | 		'/assets/src/modules/composer.js', '/assets/src/modules/composer/uploads.js', '/assets/src/modules/composer/drafts.js',
 50 | 		'/assets/src/modules/composer/tags.js', '/assets/src/modules/composer/categoryList.js', '/assets/src/modules/composer/resize.js',
 51 | 		'/assets/src/modules/composer/autocomplete.js', '/assets/templates/composer.tpl',
 52 | 		`/assets/language/${meta.config.defaultLang || 'en-GB'}/topic.json`,
 53 | 		`/assets/language/${meta.config.defaultLang || 'en-GB'}/modules.json`,
 54 | 		`/assets/language/${meta.config.defaultLang || 'en-GB'}/tags.json`,
 55 | 	];
 56 | 
 57 | 	hookData.links = hookData.links.concat(prefetch.map(path => ({
 58 | 		rel: 'prefetch',
 59 | 		href: `${nconf.get('relative_path') + path}?${meta.config['cache-buster']}`,
 60 | 	})));
 61 | 
 62 | 	return hookData;
 63 | };
 64 | 
 65 | plugin.getFormattingOptions = async function () {
 66 | 	const defaultVisibility = {
 67 | 		mobile: true,
 68 | 		desktop: true,
 69 | 
 70 | 		// op or reply
 71 | 		main: true,
 72 | 		reply: true,
 73 | 	};
 74 | 	let payload = {
 75 | 		defaultVisibility,
 76 | 		options: [
 77 | 			{
 78 | 				name: 'tags',
 79 | 				title: '[[global:tags.tags]]',
 80 | 				className: 'fa fa-tags',
 81 | 				visibility: {
 82 | 					...defaultVisibility,
 83 | 					desktop: false,
 84 | 				},
 85 | 			},
 86 | 			{
 87 | 				name: 'zen',
 88 | 				title: '[[modules:composer.zen-mode]]',
 89 | 				className: 'fa fa-arrows-alt',
 90 | 				visibility: defaultVisibility,
 91 | 			},
 92 | 		],
 93 | 	};
 94 | 	if (parseInt(meta.config.allowTopicsThumbnail, 10) === 1) {
 95 | 		payload.options.push({
 96 | 			name: 'thumbs',
 97 | 			title: '[[topic:composer.thumb-title]]',
 98 | 			className: 'fa fa-address-card-o',
 99 | 			badge: true,
100 | 			visibility: {
101 | 				...defaultVisibility,
102 | 				reply: false,
103 | 			},
104 | 		});
105 | 	}
106 | 
107 | 	payload = await plugins.hooks.fire('filter:composer.formatting', payload);
108 | 
109 | 	payload.options.forEach((option) => {
110 | 		option.visibility = {
111 | 			...defaultVisibility,
112 | 			...option.visibility || {},
113 | 		};
114 | 	});
115 | 
116 | 	return payload ? payload.options : null;
117 | };
118 | 
119 | plugin.filterComposerBuild = async function (hookData) {
120 | 	const { req } = hookData;
121 | 	const { res } = hookData;
122 | 
123 | 	if (req.query.p) {
124 | 		try {
125 | 			const a = url.parse(req.query.p, true, true);
126 | 			return helpers.redirect(res, `/${(a.path || '').replace(/^\/*/, '')}`);
127 | 		} catch (e) {
128 | 			return helpers.redirect(res, '/');
129 | 		}
130 | 	} else if (!req.query.pid && !req.query.tid && !req.query.cid) {
131 | 		return helpers.redirect(res, '/');
132 | 	}
133 | 
134 | 	await checkPrivileges(req, res);
135 | 
136 | 	const [
137 | 		isMainPost,
138 | 		postData,
139 | 		topicData,
140 | 		categoryData,
141 | 		isAdmin,
142 | 		isMod,
143 | 		formatting,
144 | 		tagWhitelist,
145 | 		globalPrivileges,
146 | 		canTagTopics,
147 | 		canScheduleTopics,
148 | 	] = await Promise.all([
149 | 		posts.isMain(req.query.pid),
150 | 		getPostData(req),
151 | 		getTopicData(req),
152 | 		categories.getCategoryFields(req.query.cid, [
153 | 			'name', 'icon', 'color', 'bgColor', 'backgroundImage', 'imageClass', 'minTags', 'maxTags',
154 | 		]),
155 | 		user.isAdministrator(req.uid),
156 | 		isModerator(req),
157 | 		plugin.getFormattingOptions(),
158 | 		getTagWhitelist(req.query, req.uid),
159 | 		privileges.global.get(req.uid),
160 | 		canTag(req),
161 | 		canSchedule(req),
162 | 	]);
163 | 
164 | 	const isEditing = !!req.query.pid;
165 | 	const isGuestPost = postData && parseInt(postData.uid, 10) === 0;
166 | 	const save_id = utils.generateSaveId(req.uid);
167 | 	const discardRoute = generateDiscardRoute(req, topicData);
168 | 	const body = await generateBody(req, postData);
169 | 
170 | 	let action = 'topics.post';
171 | 	let isMain = isMainPost;
172 | 	if (req.query.tid) {
173 | 		action = 'posts.reply';
174 | 	} else if (req.query.pid) {
175 | 		action = 'posts.edit';
176 | 	} else {
177 | 		isMain = true;
178 | 	}
179 | 	globalPrivileges['topics:tag'] = canTagTopics;
180 | 	const cid = parseInt(req.query.cid, 10);
181 | 	const topicTitle = topicData && topicData.title ? topicData.title.replace(/%/g, '&#37;').replace(/,/g, '&#44;') : validator.escape(String(req.query.title || ''));
182 | 	return {
183 | 		req: req,
184 | 		res: res,
185 | 		templateData: {
186 | 			disabled: !req.query.pid && !req.query.tid && !req.query.cid,
187 | 			pid: parseInt(req.query.pid, 10),
188 | 			tid: parseInt(req.query.tid, 10),
189 | 			cid: cid || (topicData ? topicData.cid : null),
190 | 			action: action,
191 | 			toPid: parseInt(req.query.toPid, 10),
192 | 			discardRoute: discardRoute,
193 | 
194 | 			resizable: false,
195 | 			allowTopicsThumbnail: parseInt(meta.config.allowTopicsThumbnail, 10) === 1 && isMain,
196 | 
197 | 			// can't use title property as that is used for page title
198 | 			topicTitle: topicTitle,
199 | 			titleLength: topicTitle ? topicTitle.length : 0,
200 | 			topic: topicData,
201 | 			thumb: topicData ? topicData.thumb : '',
202 | 			body: body,
203 | 
204 | 			isMain: isMain,
205 | 			isTopicOrMain: !!req.query.cid || isMain,
206 | 			maximumTitleLength: meta.config.maximumTitleLength,
207 | 			maximumPostLength: meta.config.maximumPostLength,
208 | 			minimumTagLength: meta.config.minimumTagLength || 3,
209 | 			maximumTagLength: meta.config.maximumTagLength || 15,
210 | 			tagWhitelist: tagWhitelist,
211 | 			selectedCategory: cid ? categoryData : null,
212 | 			minTags: categoryData.minTags,
213 | 			maxTags: categoryData.maxTags,
214 | 
215 | 			isTopic: !!req.query.cid,
216 | 			isEditing: isEditing,
217 | 			canSchedule: canScheduleTopics,
218 | 			showHandleInput: meta.config.allowGuestHandles === 1 &&
219 | 				(req.uid === 0 || (isEditing && isGuestPost && (isAdmin || isMod))),
220 | 			handle: postData ? postData.handle || '' : undefined,
221 | 			formatting: formatting,
222 | 			isAdminOrMod: isAdmin || isMod,
223 | 			save_id: save_id,
224 | 			privileges: globalPrivileges,
225 | 			'composer:showHelpTab': meta.config['composer:showHelpTab'] === 1,
226 | 		},
227 | 	};
228 | };
229 | 
230 | async function checkPrivileges(req, res) {
231 | 	const notAllowed = (
232 | 		(req.query.cid && !await privileges.categories.can('topics:create', req.query.cid, req.uid)) ||
233 | 		(req.query.tid && !await privileges.topics.can('topics:reply', req.query.tid, req.uid)) ||
234 | 		(req.query.pid && !await privileges.posts.can('posts:edit', req.query.pid, req.uid))
235 | 	);
236 | 
237 | 	if (notAllowed) {
238 | 		await helpers.notAllowed(req, res);
239 | 	}
240 | }
241 | 
242 | function generateDiscardRoute(req, topicData) {
243 | 	if (req.query.cid) {
244 | 		return `${nconf.get('relative_path')}/category/${validator.escape(String(req.query.cid))}`;
245 | 	} else if ((req.query.tid || req.query.pid)) {
246 | 		if (topicData) {
247 | 			return `${nconf.get('relative_path')}/topic/${topicData.slug}`;
248 | 		}
249 | 		return `${nconf.get('relative_path')}/`;
250 | 	}
251 | }
252 | 
253 | async function generateBody(req, postData) {
254 | 	let body = '';
255 | 	// Quoted reply
256 | 	if (req.query.toPid && parseInt(req.query.quoted, 10) === 1 && postData) {
257 | 		const username = await user.getUserField(postData.uid, 'username');
258 | 		const translated = await translator.translate(`[[modules:composer.user-said, ${username}]]`);
259 | 		body = `${translated}\n` +
260 | 			`> ${postData ? `${postData.content.replace(/\n/g, '\n> ')}\n\n` : ''}`;
261 | 	} else if (req.query.body || req.query.content) {
262 | 		body = validator.escape(String(req.query.body || req.query.content));
263 | 	}
264 | 	body = postData ? postData.content : '';
265 | 	return translator.escape(body);
266 | }
267 | 
268 | async function getPostData(req) {
269 | 	if (!req.query.pid && !req.query.toPid) {
270 | 		return null;
271 | 	}
272 | 
273 | 	return await posts.getPostData(req.query.pid || req.query.toPid);
274 | }
275 | 
276 | async function getTopicData(req) {
277 | 	if (req.query.tid) {
278 | 		return await topics.getTopicData(req.query.tid);
279 | 	} else if (req.query.pid) {
280 | 		return await topics.getTopicDataByPid(req.query.pid);
281 | 	}
282 | 	return null;
283 | }
284 | 
285 | async function isModerator(req) {
286 | 	if (!req.loggedIn) {
287 | 		return false;
288 | 	}
289 | 	const cid = cidFromQuery(req.query);
290 | 	return await user.isModerator(req.uid, cid);
291 | }
292 | 
293 | async function canTag(req) {
294 | 	if (parseInt(req.query.cid, 10)) {
295 | 		return await privileges.categories.can('topics:tag', req.query.cid, req.uid);
296 | 	}
297 | 	return true;
298 | }
299 | 
300 | async function canSchedule(req) {
301 | 	if (parseInt(req.query.cid, 10)) {
302 | 		return await privileges.categories.can('topics:schedule', req.query.cid, req.uid);
303 | 	}
304 | 	return false;
305 | }
306 | 
307 | async function getTagWhitelist(query, uid) {
308 | 	const cid = await cidFromQuery(query);
309 | 	const [tagWhitelist, isAdminOrMod] = await Promise.all([
310 | 		categories.getTagWhitelist([cid]),
311 | 		privileges.categories.isAdminOrMod(cid, uid),
312 | 	]);
313 | 	return categories.filterTagWhitelist(tagWhitelist[0], isAdminOrMod);
314 | }
315 | 
316 | async function cidFromQuery(query) {
317 | 	if (query.cid) {
318 | 		return query.cid;
319 | 	} else if (query.tid) {
320 | 		return await topics.getTopicField(query.tid, 'cid');
321 | 	} else if (query.pid) {
322 | 		return await posts.getCidByPid(query.pid);
323 | 	}
324 | 	return null;
325 | }
326 | 


--------------------------------------------------------------------------------
/static/lib/composer/drafts.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
  4 | 	const drafts = {};
  5 | 	const draftSaveDelay = 1000;
  6 | 	drafts.init = function (postContainer, postData) {
  7 | 		const draftIconEl = postContainer.find('.draft-icon');
  8 | 		const uuid = postContainer.attr('data-uuid');
  9 | 		function doSaveDraft() {
 10 | 			// check if composer is still around,
 11 | 			// it might have been gone by the time this timeout triggers
 12 | 			if (!$(`[component="composer"][data-uuid="${uuid}"]`).length) {
 13 | 				return;
 14 | 			}
 15 | 
 16 | 			if (!postData.save_id) {
 17 | 				postData.save_id = utils.generateSaveId(app.user.uid);
 18 | 			}
 19 | 			// Post is modified, save to list of opened drafts
 20 | 			drafts.addToDraftList('available', postData.save_id);
 21 | 			drafts.addToDraftList('open', postData.save_id);
 22 | 			saveDraft(postContainer, draftIconEl, postData);
 23 | 		}
 24 | 
 25 | 		postContainer.on('keyup', 'textarea, input.handle, input.title', utils.debounce(doSaveDraft, draftSaveDelay));
 26 | 		postContainer.on('click', 'input[type="checkbox"]', utils.debounce(doSaveDraft, draftSaveDelay));
 27 | 		postContainer.on('click', '[component="category/list"] [data-cid]', utils.debounce(doSaveDraft, draftSaveDelay));
 28 | 		postContainer.on('itemAdded', '.tags', utils.debounce(doSaveDraft, draftSaveDelay));
 29 | 		postContainer.on('thumb.uploaded', doSaveDraft);
 30 | 
 31 | 		draftIconEl.on('animationend', function () {
 32 | 			$(this).toggleClass('active', false);
 33 | 		});
 34 | 
 35 | 		$(window).on('unload', function () {
 36 | 			// remove all drafts from the open list
 37 | 			const open = drafts.getList('open');
 38 | 			if (open.length) {
 39 | 				open.forEach(save_id => drafts.removeFromDraftList('open', save_id));
 40 | 			}
 41 | 		});
 42 | 
 43 | 		drafts.migrateGuest();
 44 | 	};
 45 | 
 46 | 	function getStorage(uid) {
 47 | 		return parseInt(uid, 10) > 0 ? localStorage : sessionStorage;
 48 | 	}
 49 | 
 50 | 	drafts.get = function (save_id) {
 51 | 		if (!save_id) {
 52 | 			return null;
 53 | 		}
 54 | 		const uid = save_id.split(':')[1];
 55 | 		const storage = getStorage(uid);
 56 | 		try {
 57 | 			const draftJson = storage.getItem(save_id);
 58 | 			const draft = JSON.parse(draftJson) || null;
 59 | 			if (!draft) {
 60 | 				throw new Error(`can't parse draft json for ${save_id}`);
 61 | 			}
 62 | 			draft.save_id = save_id;
 63 | 			if (draft.timestamp) {
 64 | 				draft.timestampISO = utils.toISOString(draft.timestamp);
 65 | 			}
 66 | 			$(window).trigger('action:composer.drafts.get', {
 67 | 				save_id: save_id,
 68 | 				draft: draft,
 69 | 				storage: storage,
 70 | 			});
 71 | 			return draft;
 72 | 		} catch (e) {
 73 | 			console.warn(`[composer/drafts] Could not get draft ${save_id}, removing`);
 74 | 			drafts.removeFromDraftList('available');
 75 | 			drafts.removeFromDraftList('open');
 76 | 			return null;
 77 | 		}
 78 | 	};
 79 | 
 80 | 	function saveDraft(postContainer, draftIconEl, postData) {
 81 | 		if (canSave(app.user.uid ? 'localStorage' : 'sessionStorage') && postData && postData.save_id && postContainer.length) {
 82 | 			const titleEl = postContainer.find('input.title');
 83 | 			const title = titleEl && titleEl.length && titleEl.val();
 84 | 			const raw = postContainer.find('textarea').val();
 85 | 			const storage = getStorage(app.user.uid);
 86 | 
 87 | 			if (raw.length || (title && title.length)) {
 88 | 				const draftData = {
 89 | 					save_id: postData.save_id,
 90 | 					action: postData.action,
 91 | 					text: raw,
 92 | 					uuid: postContainer.attr('data-uuid'),
 93 | 					timestamp: Date.now(),
 94 | 				};
 95 | 
 96 | 				if (postData.action === 'topics.post') {
 97 | 					// New topic only
 98 | 					const tags = postContainer.find('input.tags').val();
 99 | 					draftData.tags = tags;
100 | 					draftData.title = title;
101 | 					draftData.cid = postData.cid;
102 | 					draftData.thumbs = postData.thumbs || [];
103 | 				} else if (postData.action === 'posts.reply') {
104 | 					// new reply only
105 | 					draftData.title = postData.title;
106 | 					draftData.tid = postData.tid;
107 | 					draftData.toPid = postData.toPid;
108 | 				} else if (postData.action === 'posts.edit') {
109 | 					draftData.pid = postData.pid;
110 | 					draftData.title = title || postData.title;
111 | 					draftData.thumbs = postData.thumbs || [];
112 | 				}
113 | 				if (!app.user.uid) {
114 | 					draftData.handle = postContainer.find('input.handle').val();
115 | 				}
116 | 
117 | 				// save all draft data into single item as json
118 | 				storage.setItem(postData.save_id, JSON.stringify(draftData));
119 | 
120 | 				$(window).trigger('action:composer.drafts.save', {
121 | 					storage: storage,
122 | 					postData: postData,
123 | 					postContainer: postContainer,
124 | 				});
125 | 				draftIconEl.toggleClass('active', true);
126 | 			} else {
127 | 				drafts.removeDraft(postData.save_id);
128 | 			}
129 | 		}
130 | 	}
131 | 
132 | 	drafts.removeDraft = function (save_id) {
133 | 		if (!save_id) {
134 | 			return;
135 | 		}
136 | 
137 | 		// Remove save_id from list of open and available drafts
138 | 		drafts.removeFromDraftList('available', save_id);
139 | 		drafts.removeFromDraftList('open', save_id);
140 | 		const uid = save_id.split(':')[1];
141 | 		const storage = getStorage(uid);
142 | 		storage.removeItem(save_id);
143 | 
144 | 		$(window).trigger('action:composer.drafts.remove', {
145 | 			storage: storage,
146 | 			save_id: save_id,
147 | 		});
148 | 	};
149 | 
150 | 	drafts.getList = function (set) {
151 | 		try {
152 | 			const draftIds = localStorage.getItem(`drafts:${set}`);
153 | 			return JSON.parse(draftIds) || [];
154 | 		} catch (e) {
155 | 			console.warn('[composer/drafts] Could not read list of available drafts');
156 | 			return [];
157 | 		}
158 | 	};
159 | 
160 | 	drafts.addToDraftList = function (set, save_id) {
161 | 		if (!canSave(app.user.uid ? 'localStorage' : 'sessionStorage') || !save_id) {
162 | 			return;
163 | 		}
164 | 		const list = drafts.getList(set);
165 | 		if (!list.includes(save_id)) {
166 | 			list.push(save_id);
167 | 			localStorage.setItem('drafts:' + set, JSON.stringify(list));
168 | 		}
169 | 	};
170 | 
171 | 	drafts.removeFromDraftList = function (set, save_id) {
172 | 		if (!canSave(app.user.uid ? 'localStorage' : 'sessionStorage') || !save_id) {
173 | 			return;
174 | 		}
175 | 		const list = drafts.getList(set);
176 | 		if (list.includes(save_id)) {
177 | 			list.splice(list.indexOf(save_id), 1);
178 | 			localStorage.setItem('drafts:' + set, JSON.stringify(list));
179 | 		}
180 | 	};
181 | 
182 | 	drafts.migrateGuest = function () {
183 | 		// If any drafts are made while as guest, and user then logs in, assume control of those drafts
184 | 		if (canSave('localStorage') && app.user.uid) {
185 | 			// composer:<uid>:<timestamp>
186 | 			const test = /^composer:\d+:\d$/;
187 | 			const keys = Object.keys(sessionStorage).filter(function (key) {
188 | 				return test.test(key);
189 | 			});
190 | 			const migrated = new Set([]);
191 | 			const renamed = keys.map(function (key) {
192 | 				const parts = key.split(':');
193 | 				parts[1] = app.user.uid;
194 | 
195 | 				migrated.add(parts.join(':'));
196 | 				return parts.join(':');
197 | 			});
198 | 
199 | 			keys.forEach(function (key, idx) {
200 | 				localStorage.setItem(renamed[idx], sessionStorage.getItem(key));
201 | 				sessionStorage.removeItem(key);
202 | 			});
203 | 
204 | 			migrated.forEach(function (save_id) {
205 | 				drafts.addToDraftList('available', save_id);
206 | 			});
207 | 
208 | 			return migrated;
209 | 		}
210 | 	};
211 | 
212 | 	drafts.listAvailable = function () {
213 | 		const available = drafts.getList('available');
214 | 		return available.map(drafts.get).filter(Boolean);
215 | 	};
216 | 
217 | 	drafts.getAvailableCount = function () {
218 | 		return drafts.listAvailable().length;
219 | 	};
220 | 
221 | 	drafts.open = function (save_id) {
222 | 		if (!save_id) {
223 | 			return;
224 | 		}
225 | 		const draft = drafts.get(save_id);
226 | 		openComposer(save_id, draft);
227 | 	};
228 | 
229 | 	drafts.loadOpen = function () {
230 | 		if (ajaxify.data.template.login || ajaxify.data.template.register || (config.hasOwnProperty('openDraftsOnPageLoad') && !config.openDraftsOnPageLoad)) {
231 | 			return;
232 | 		}
233 | 		// Load drafts if they were open
234 | 		const available = drafts.getList('available');
235 | 		const open = drafts.getList('open');
236 | 
237 | 		if (available.length) {
238 | 			// Deconstruct each save_id and open up composer
239 | 			available.forEach(function (save_id) {
240 | 				if (!save_id || open.includes(save_id)) {
241 | 					return;
242 | 				}
243 | 				const draft = drafts.get(save_id);
244 | 				if (!draft || (!draft.text && !draft.title)) {
245 | 					drafts.removeFromDraftList('available', save_id);
246 | 					drafts.removeFromDraftList('open', save_id);
247 | 					return;
248 | 				}
249 | 				openComposer(save_id, draft);
250 | 			});
251 | 		}
252 | 	};
253 | 
254 | 	function openComposer(save_id, draft) {
255 | 		const saveObj = save_id.split(':');
256 | 		const uid = saveObj[1];
257 | 		// Don't open other peoples' drafts
258 | 		if (parseInt(app.user.uid, 10) !== parseInt(uid, 10)) {
259 | 			return;
260 | 		}
261 | 		require(['composer'], function (composer) {
262 | 			if (draft.action === 'topics.post') {
263 | 				composer.newTopic({
264 | 					save_id: draft.save_id,
265 | 					cid: draft.cid,
266 | 					handle: app.user && app.user.uid ? undefined : utils.escapeHTML(draft.handle),
267 | 					title: utils.escapeHTML(draft.title),
268 | 					body: draft.text,
269 | 					tags: String(draft.tags || '').split(','),
270 | 					thumbs: draft.thumbs || [],
271 | 				});
272 | 			} else if (draft.action === 'posts.reply') {
273 | 				api.get('/topics/' + draft.tid, {}, function (err, topicObj) {
274 | 					if (err) {
275 | 						return alerts.error(err);
276 | 					}
277 | 
278 | 					composer.newReply({
279 | 						save_id: draft.save_id,
280 | 						tid: draft.tid,
281 | 						toPid: draft.toPid,
282 | 						title: topicObj.title,
283 | 						body: draft.text,
284 | 					});
285 | 				});
286 | 			} else if (draft.action === 'posts.edit') {
287 | 				composer.editPost({
288 | 					save_id: draft.save_id,
289 | 					pid: draft.pid,
290 | 					title: draft.title ? utils.escapeHTML(draft.title) : undefined,
291 | 					body: draft.text,
292 | 					thumbs: draft.thumbs || [],
293 | 				});
294 | 			}
295 | 		});
296 | 	}
297 | 
298 | 	// Feature detection courtesy of: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
299 | 	function canSave(type) {
300 | 		var storage;
301 | 		try {
302 | 			storage = window[type];
303 | 			var x = '__storage_test__';
304 | 			storage.setItem(x, x);
305 | 			storage.removeItem(x);
306 | 			return true;
307 | 		} catch (e) {
308 | 			return e instanceof DOMException && (
309 | 				// everything except Firefox
310 | 				e.code === 22 ||
311 | 				// Firefox
312 | 				e.code === 1014 ||
313 | 				// test name field too, because code might not be present
314 | 				// everything except Firefox
315 | 				e.name === 'QuotaExceededError' ||
316 | 				// Firefox
317 | 				e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
318 | 				// acknowledge QuotaExceededError only if there's something already stored
319 | 				(storage && storage.length !== 0);
320 | 		}
321 | 	}
322 | 
323 | 	return drafts;
324 | });
325 | 


--------------------------------------------------------------------------------
/static/lib/composer.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | define('composer', [
  4 | 	'taskbar',
  5 | 	'translator',
  6 | 	'composer/uploads',
  7 | 	'composer/formatting',
  8 | 	'composer/drafts',
  9 | 	'composer/tags',
 10 | 	'composer/categoryList',
 11 | 	'composer/preview',
 12 | 	'composer/resize',
 13 | 	'composer/autocomplete',
 14 | 	'composer/scheduler',
 15 | 	'composer/post-queue',
 16 | 	'scrollStop',
 17 | 	'topicThumbs',
 18 | 	'api',
 19 | 	'bootbox',
 20 | 	'alerts',
 21 | 	'hooks',
 22 | 	'messages',
 23 | 	'search',
 24 | 	'screenfull',
 25 | ], function (taskbar, translator, uploads, formatting, drafts, tags,
 26 | 	categoryList, preview, resize, autocomplete, scheduler, postQueue, scrollStop,
 27 | 	topicThumbs, api, bootbox, alerts, hooks, messagesModule, search, screenfull) {
 28 | 	var composer = {
 29 | 		active: undefined,
 30 | 		posts: {},
 31 | 		bsEnvironment: undefined,
 32 | 		formatting: undefined,
 33 | 	};
 34 | 
 35 | 	$(window).off('resize', onWindowResize).on('resize', onWindowResize);
 36 | 	onWindowResize();
 37 | 
 38 | 	$(window).on('action:composer.topics.post', function (ev, data) {
 39 | 		localStorage.removeItem('category:' + data.data.cid + ':bookmark');
 40 | 		localStorage.removeItem('category:' + data.data.cid + ':bookmark:clicked');
 41 | 	});
 42 | 
 43 | 	$(window).on('popstate', function () {
 44 | 		var env = utils.findBootstrapEnvironment();
 45 | 		if (composer.active && (env === 'xs' || env === 'sm')) {
 46 | 			if (!composer.posts[composer.active].modified) {
 47 | 				composer.discard(composer.active);
 48 | 				if (composer.discardConfirm && composer.discardConfirm.length) {
 49 | 					composer.discardConfirm.modal('hide');
 50 | 					delete composer.discardConfirm;
 51 | 				}
 52 | 				return;
 53 | 			}
 54 | 
 55 | 			translator.translate('[[modules:composer.discard]]', function (translated) {
 56 | 				composer.discardConfirm = bootbox.confirm(translated, function (confirm) {
 57 | 					if (confirm) {
 58 | 						composer.discard(composer.active);
 59 | 					} else {
 60 | 						composer.posts[composer.active].modified = true;
 61 | 					}
 62 | 				});
 63 | 				composer.posts[composer.active].modified = false;
 64 | 			});
 65 | 		}
 66 | 	});
 67 | 
 68 | 	function removeComposerHistory() {
 69 | 		var env = composer.bsEnvironment;
 70 | 		if (ajaxify.data.template.compose === true || env === 'xs' || env === 'sm') {
 71 | 			history.back();
 72 | 		}
 73 | 	}
 74 | 
 75 | 	function onWindowResize() {
 76 | 		var env = utils.findBootstrapEnvironment();
 77 | 		var isMobile = env === 'xs' || env === 'sm';
 78 | 
 79 | 		if (preview.toggle) {
 80 | 			if (preview.env !== env && isMobile) {
 81 | 				preview.env = env;
 82 | 				preview.toggle(false);
 83 | 			}
 84 | 			preview.env = env;
 85 | 		}
 86 | 
 87 | 		if (composer.active !== undefined) {
 88 | 			resize.reposition($('.composer[data-uuid="' + composer.active + '"]'));
 89 | 
 90 | 			if (!isMobile && window.location.pathname.startsWith(config.relative_path + '/compose')) {
 91 | 				/*
 92 | 				 * If this conditional is met, we're no longer in mobile/tablet
 93 | 				 * resolution but we've somehow managed to have a mobile
 94 | 				 * composer load, so let's go back to the topic
 95 | 				 */
 96 | 				history.back();
 97 | 			} else if (isMobile && !window.location.pathname.startsWith(config.relative_path + '/compose')) {
 98 | 				/*
 99 | 				 * In this case, we're in mobile/tablet resolution but the composer
100 | 				 * that loaded was a regular composer, so let's fix the address bar
101 | 				 */
102 | 				mobileHistoryAppend();
103 | 			}
104 | 		}
105 | 		composer.bsEnvironment = env;
106 | 	}
107 | 
108 | 	function alreadyOpen(post) {
109 | 		// If a composer for the same cid/tid/pid is already open, return the uuid, else return bool false
110 | 		var type;
111 | 		var id;
112 | 
113 | 		if (post.hasOwnProperty('cid')) {
114 | 			type = 'cid';
115 | 		} else if (post.hasOwnProperty('tid')) {
116 | 			type = 'tid';
117 | 		} else if (post.hasOwnProperty('pid')) {
118 | 			type = 'pid';
119 | 		}
120 | 
121 | 		id = post[type];
122 | 
123 | 		// Find a match
124 | 		for (const uuid of Object.keys(composer.posts)) {
125 | 			if (composer.posts[uuid].hasOwnProperty(type) && id === composer.posts[uuid][type]) {
126 | 				return uuid;
127 | 			}
128 | 		}
129 | 
130 | 		// No matches...
131 | 		return false;
132 | 	}
133 | 
134 | 	function push(post) {
135 | 		if (!post) {
136 | 			return;
137 | 		}
138 | 
139 | 		var uuid = utils.generateUUID();
140 | 		var existingUUID = alreadyOpen(post);
141 | 
142 | 		if (existingUUID) {
143 | 			taskbar.updateActive(existingUUID);
144 | 			return composer.load(existingUUID);
145 | 		}
146 | 
147 | 		var actionText = '[[topic:composer.new-topic]]';
148 | 		if (post.action === 'posts.reply') {
149 | 			actionText = '[[topic:composer.replying-to]]';
150 | 		} else if (post.action === 'posts.edit') {
151 | 			actionText = '[[topic:composer.editing-in]]';
152 | 		}
153 | 
154 | 		translator.translate(actionText, function (translatedAction) {
155 | 			taskbar.push('composer', uuid, {
156 | 				title: translatedAction.replace('%1', '"' + post.title + '"'),
157 | 			});
158 | 		});
159 | 
160 | 		composer.posts[uuid] = post;
161 | 		composer.load(uuid);
162 | 	}
163 | 
164 | 	async function composerAlert(post_uuid, message) {
165 | 		$('.composer[data-uuid="' + post_uuid + '"]').find('.composer-submit').removeAttr('disabled');
166 | 
167 | 		const { showAlert } = await hooks.fire('filter:composer.error', { post_uuid, message, showAlert: true });
168 | 
169 | 		if (showAlert) {
170 | 			alerts.alert({
171 | 				type: 'danger',
172 | 				timeout: 10000,
173 | 				title: '',
174 | 				message: message,
175 | 				alert_id: 'post_error',
176 | 			});
177 | 		}
178 | 	}
179 | 
180 | 	composer.findByTid = function (tid) {
181 | 		// Iterates through the initialised composers and returns the uuid of the matching composer
182 | 		for (const uuid of Object.keys(composer.posts)) {
183 | 			if (composer.posts[uuid].hasOwnProperty('tid') && String(composer.posts[uuid].tid) === String(tid)) {
184 | 				return uuid;
185 | 			}
186 | 		}
187 | 
188 | 		return null;
189 | 	};
190 | 
191 | 	composer.addButton = function (iconClass, onClick, title) {
192 | 		formatting.addButton(iconClass, onClick, title);
193 | 	};
194 | 
195 | 	composer.newTopic = async (data) => {
196 | 		let pushData = {
197 | 			save_id: data.save_id,
198 | 			action: 'topics.post',
199 | 			cid: data.cid,
200 | 			handle: data.handle,
201 | 			title: data.title || '',
202 | 			body: data.body || '',
203 | 			tags: data.tags || [],
204 | 			thumbs: data.thumbs || [],
205 | 			modified: !!((data.title && data.title.length) || (data.body && data.body.length)),
206 | 			isMain: true,
207 | 		};
208 | 
209 | 		({ pushData } = await hooks.fire('filter:composer.topic.push', {
210 | 			data: data,
211 | 			pushData: pushData,
212 | 		}));
213 | 
214 | 		push(pushData);
215 | 	};
216 | 
217 | 	composer.addQuote = function (data) {
218 | 		// tid, toPid, selectedPid, title, username, text, uuid
219 | 		data.uuid = data.uuid || composer.active;
220 | 
221 | 		var escapedTitle = (data.title || '')
222 | 			.replace(/([\\`*_{}[\]()#+\-.!])/g, '\\$1')
223 | 			.replace(/\[/g, '&#91;')
224 | 			.replace(/\]/g, '&#93;')
225 | 			.replace(/%/g, '&#37;')
226 | 			.replace(/,/g, '&#44;');
227 | 
228 | 		if (data.body) {
229 | 			data.body = '> ' + data.body.replace(/\n/g, '\n> ') + '\n\n';
230 | 		}
231 | 		var link = '[' + escapedTitle + '](' + config.relative_path + '/post/' + encodeURIComponent(data.selectedPid || data.toPid) + ')';
232 | 		if (data.uuid === undefined) {
233 | 			if (data.title && (data.selectedPid || data.toPid)) {
234 | 				composer.newReply({
235 | 					tid: data.tid,
236 | 					toPid: data.toPid,
237 | 					title: data.title,
238 | 					body: '[[modules:composer.user-said-in, ' + data.username + ', ' + link + ']]\n' + data.body,
239 | 				});
240 | 			} else {
241 | 				composer.newReply({
242 | 					tid: data.tid,
243 | 					toPid: data.toPid,
244 | 					title: data.title,
245 | 					body: '[[modules:composer.user-said, ' + data.username + ']]\n' + data.body,
246 | 				});
247 | 			}
248 | 			return;
249 | 		} else if (data.uuid !== composer.active) {
250 | 			// If the composer is not currently active, activate it
251 | 			composer.load(data.uuid);
252 | 		}
253 | 
254 | 		var postContainer = $('.composer[data-uuid="' + data.uuid + '"]');
255 | 		var bodyEl = postContainer.find('textarea');
256 | 		var prevText = bodyEl.val();
257 | 		if (data.title && (data.selectedPid || data.toPid)) {
258 | 			translator.translate('[[modules:composer.user-said-in, ' + data.username + ', ' + link + ']]\n', config.defaultLang, onTranslated);
259 | 		} else {
260 | 			translator.translate('[[modules:composer.user-said, ' + data.username + ']]\n', config.defaultLang, onTranslated);
261 | 		}
262 | 
263 | 		function onTranslated(translated) {
264 | 			composer.posts[data.uuid].body = (prevText.length ? prevText + '\n\n' : '') + translated + data.body;
265 | 			bodyEl.val(composer.posts[data.uuid].body);
266 | 			focusElements(postContainer);
267 | 			preview.render(postContainer);
268 | 		}
269 | 	};
270 | 
271 | 	composer.newReply = function (data) {
272 | 		translator.translate(data.body, config.defaultLang, function (translated) {
273 | 			push({
274 | 				save_id: data.save_id,
275 | 				action: 'posts.reply',
276 | 				tid: data.tid,
277 | 				toPid: data.toPid,
278 | 				title: data.title,
279 | 				body: translated,
280 | 				modified: !!(translated && translated.length),
281 | 				isMain: false,
282 | 			});
283 | 		});
284 | 	};
285 | 
286 | 	composer.editPost = function (data) {
287 | 		// pid, text
288 | 		socket.emit('plugins.composer.push', data.pid, function (err, postData) {
289 | 			if (err) {
290 | 				return alerts.error(err);
291 | 			}
292 | 			postData.save_id = data.save_id;
293 | 			postData.action = 'posts.edit';
294 | 			postData.pid = data.pid;
295 | 			postData.modified = false;
296 | 			if (data.body) {
297 | 				postData.body = data.body;
298 | 				postData.modified = true;
299 | 			}
300 | 			if (data.title) {
301 | 				postData.title = data.title;
302 | 				postData.modified = true;
303 | 			}
304 | 			push(postData);
305 | 		});
306 | 	};
307 | 
308 | 	composer.load = function (post_uuid) {
309 | 		var postContainer = $('.composer[data-uuid="' + post_uuid + '"]');
310 | 		if (postContainer.length) {
311 | 			activate(post_uuid);
312 | 			resize.reposition(postContainer);
313 | 			focusElements(postContainer);
314 | 			onShow();
315 | 		} else if (composer.formatting) {
316 | 			createNewComposer(post_uuid);
317 | 		} else {
318 | 			socket.emit('plugins.composer.getFormattingOptions', function (err, options) {
319 | 				if (err) {
320 | 					return alerts.error(err);
321 | 				}
322 | 				composer.formatting = options;
323 | 				createNewComposer(post_uuid);
324 | 			});
325 | 		}
326 | 	};
327 | 
328 | 	composer.enhance = function (postContainer, post_uuid, postData) {
329 | 		/*
330 | 			This method enhances a composer container with client-side sugar (preview, etc)
331 | 			Everything in here also applies to the /compose route
332 | 		*/
333 | 
334 | 		if (!post_uuid && !postData) {
335 | 			post_uuid = utils.generateUUID();
336 | 			composer.posts[post_uuid] = ajaxify.data;
337 | 			postData = ajaxify.data;
338 | 			postContainer.attr('data-uuid', post_uuid);
339 | 		}
340 | 
341 | 		categoryList.init(postContainer, composer.posts[post_uuid]);
342 | 		scheduler.init(postContainer, composer.posts);
343 | 
344 | 		formatting.addHandler(postContainer);
345 | 		formatting.addComposerButtons();
346 | 		preview.handleToggler(postContainer);
347 | 		postQueue.showAlert(postContainer, postData);
348 | 		uploads.initialize(post_uuid);
349 | 		tags.init(postContainer, composer.posts[post_uuid]);
350 | 		autocomplete.init(postContainer, post_uuid);
351 | 
352 | 		postContainer.on('change', 'input, textarea', function () {
353 | 			composer.posts[post_uuid].modified = true;
354 | 		});
355 | 
356 | 		postContainer.on('click', '.composer-submit', function (e) {
357 | 			e.preventDefault();
358 | 			e.stopPropagation(); // Other click events bring composer back to active state which is undesired on submit
359 | 
360 | 			$(this).attr('disabled', true);
361 | 			post(post_uuid);
362 | 		});
363 | 
364 | 		require(['mousetrap'], function (mousetrap) {
365 | 			mousetrap(postContainer.get(0)).bind('mod+enter', function () {
366 | 				postContainer.find('.composer-submit').attr('disabled', true);
367 | 				post(post_uuid);
368 | 			});
369 | 		});
370 | 
371 | 		postContainer.find('.composer-discard').on('click', function (e) {
372 | 			e.preventDefault();
373 | 
374 | 			if (!composer.posts[post_uuid].modified) {
375 | 				composer.discard(post_uuid);
376 | 				return removeComposerHistory();
377 | 			}
378 | 
379 | 			formatting.exitFullscreen();
380 | 
381 | 			var btn = $(this).prop('disabled', true);
382 | 			translator.translate('[[modules:composer.discard]]', function (translated) {
383 | 				bootbox.confirm(translated, function (confirm) {
384 | 					if (confirm) {
385 | 						composer.discard(post_uuid);
386 | 						removeComposerHistory();
387 | 					}
388 | 					btn.prop('disabled', false);
389 | 				});
390 | 			});
391 | 		});
392 | 
393 | 		postContainer.find('.composer-minimize, .minimize .trigger').on('click', function (e) {
394 | 			e.preventDefault();
395 | 			e.stopPropagation();
396 | 			composer.minimize(post_uuid);
397 | 		});
398 | 
399 | 		const textareaEl = postContainer.find('textarea');
400 | 		textareaEl.on('input propertychange', utils.debounce(function () {
401 | 			preview.render(postContainer);
402 | 		}, 250));
403 | 
404 | 		textareaEl.on('scroll', function () {
405 | 			preview.matchScroll(postContainer);
406 | 		});
407 | 
408 | 		drafts.init(postContainer, postData);
409 | 		const draft = drafts.get(postData.save_id);
410 | 
411 | 		preview.render(postContainer, function () {
412 | 			preview.matchScroll(postContainer);
413 | 		});
414 | 
415 | 		if (postData.action === 'posts.edit' && !utils.isNumber(postData.pid)) {
416 | 			handleRemotePid(postContainer);
417 | 		}
418 | 		handleHelp(postContainer);
419 | 		handleSearch(postContainer);
420 | 		focusElements(postContainer);
421 | 		if (postData.action === 'posts.edit' || postData.action === 'topics.post') {
422 | 			composer.updateThumbCount(post_uuid, postContainer);
423 | 		}
424 | 
425 | 		// Hide "zen mode" if fullscreen API is not enabled/available (ahem, iOS...)
426 | 		if (!screenfull.isEnabled) {
427 | 			$('[data-format="zen"]').parent().addClass('hidden');
428 | 		}
429 | 
430 | 		hooks.fire('action:composer.enhanced', { postContainer, postData, draft });
431 | 	};
432 | 
433 | 	async function getSelectedCategory(postData) {
434 | 		const { template } = ajaxify.data;
435 | 		const { cid } = postData;
436 | 		if ((template.category || template.world) && String(cid) === String(ajaxify.data.cid)) {
437 | 			// no need to load data if we are already on the category page
438 | 			return ajaxify.data;
439 | 		} else if (cid) {
440 | 			const categoryUrl = cid !== -1 ? `/api/category/${encodeURIComponent(postData.cid)}` : `/api/world`;
441 | 			return await api.get(categoryUrl, {});
442 | 		}
443 | 		return null;
444 | 	}
445 | 
446 | 	async function createNewComposer(post_uuid) {
447 | 		var postData = composer.posts[post_uuid];
448 | 
449 | 		var isTopic = postData ? postData.hasOwnProperty('cid') : false;
450 | 		var isMain = postData ? !!postData.isMain : false;
451 | 		var isEditing = postData ? !!postData.pid : false;
452 | 		var isGuestPost = postData ? parseInt(postData.uid, 10) === 0 : false;
453 | 		const isScheduled = postData.timestamp > Date.now();
454 | 
455 | 		// see
456 | 		// https://github.com/NodeBB/NodeBB/issues/2994 and
457 | 		// https://github.com/NodeBB/NodeBB/issues/1951
458 | 		// remove when 1951 is resolved
459 | 
460 | 		var title = postData.title.replace(/%/g, '&#37;').replace(/,/g, '&#44;');
461 | 		postData.category = await getSelectedCategory(postData);
462 | 		const privileges = postData.category ? postData.category.privileges : ajaxify.data.privileges;
463 | 		const topicTemplate = isTopic && postData.category ? postData.category.topicTemplate : null;
464 | 		var data = {
465 | 			topicTitle: title,
466 | 			titleLength: title.length,
467 | 			body: translator.escape(utils.escapeHTML(topicTemplate || postData.body)),
468 | 			mobile: composer.bsEnvironment === 'xs' || composer.bsEnvironment === 'sm',
469 | 			resizable: true,
470 | 			thumb: postData.thumb,
471 | 			isTopicOrMain: isTopic || isMain,
472 | 			maximumTitleLength: config.maximumTitleLength,
473 | 			maximumPostLength: config.maximumPostLength,
474 | 			minimumTagLength: config.minimumTagLength,
475 | 			maximumTagLength: config.maximumTagLength,
476 | 			'composer:showHelpTab': config['composer:showHelpTab'],
477 | 			isTopic: isTopic,
478 | 			isEditing: isEditing,
479 | 			canSchedule: !!(isMain && privileges &&
480 | 				((privileges['topics:schedule'] && !isEditing) || (isScheduled && privileges.view_scheduled))),
481 | 			canUploadImage: app.user.privileges['upload:post:image'] && (config.maximumFileSize > 0 || app.user.isAdmin),
482 | 			canUploadFile: app.user.privileges['upload:post:file'] && (config.maximumFileSize > 0 || app.user.isAdmin),
483 | 			showHandleInput: config.allowGuestHandles &&
484 | 				(app.user.uid === 0 || (isEditing && isGuestPost && app.user.isAdmin)),
485 | 			handle: postData ? postData.handle || '' : undefined,
486 | 			formatting: composer.formatting,
487 | 			tagWhitelist: postData.category ? postData.category.tagWhitelist : ajaxify.data.tagWhitelist,
488 | 			privileges: app.user.privileges,
489 | 			selectedCategory: postData.category,
490 | 			submitOptions: [
491 | 				// Add items using `filter:composer.create`, or just add them to the <ul> in DOM
492 | 				// {
493 | 				//  action: 'foobar',
494 | 				//  text: 'Text Label',
495 | 				// }
496 | 			],
497 | 		};
498 | 
499 | 		if (data.mobile) {
500 | 			mobileHistoryAppend();
501 | 
502 | 			app.toggleNavbar(false);
503 | 		}
504 | 
505 | 		postData.mobile = composer.bsEnvironment === 'xs' || composer.bsEnvironment === 'sm';
506 | 
507 | 		({ postData, createData: data } = await hooks.fire('filter:composer.create', {
508 | 			postData: postData,
509 | 			createData: data,
510 | 		}));
511 | 
512 | 		app.parseAndTranslate('composer', data, function (composerTemplate) {
513 | 			if ($('.composer.composer[data-uuid="' + post_uuid + '"]').length) {
514 | 				return;
515 | 			}
516 | 			composerTemplate = $(composerTemplate);
517 | 
518 | 			composerTemplate.find('.title').each(function () {
519 | 				$(this).text(translator.unescape($(this).text()));
520 | 			});
521 | 
522 | 			composerTemplate.attr('data-uuid', post_uuid);
523 | 
524 | 			$(document.body).append(composerTemplate);
525 | 
526 | 			var postContainer = $(composerTemplate[0]);
527 | 
528 | 			resize.reposition(postContainer);
529 | 			composer.enhance(postContainer, post_uuid, postData);
530 | 			/*
531 | 				Everything after this line is applied to the resizable composer only
532 | 				Want something done to both resizable composer and the one in /compose?
533 | 				Put it in composer.enhance().
534 | 
535 | 				Eventually, stuff after this line should be moved into composer.enhance().
536 | 			*/
537 | 
538 | 			activate(post_uuid);
539 | 
540 | 			postContainer.on('click', function () {
541 | 				if (!taskbar.isActive(post_uuid)) {
542 | 					taskbar.updateActive(post_uuid);
543 | 				}
544 | 			});
545 | 
546 | 			resize.handleResize(postContainer);
547 | 
548 | 			if (composer.bsEnvironment === 'xs' || composer.bsEnvironment === 'sm') {
549 | 				var submitBtns = postContainer.find('.composer-submit');
550 | 				var mobileSubmitBtn = postContainer.find('.mobile-navbar .composer-submit');
551 | 				var textareaEl = postContainer.find('.write');
552 | 				var idx = textareaEl.attr('tabindex');
553 | 
554 | 				submitBtns.removeAttr('tabindex');
555 | 				mobileSubmitBtn.attr('tabindex', parseInt(idx, 10) + 1);
556 | 			}
557 | 
558 | 			$(window).trigger('action:composer.loaded', {
559 | 				postContainer: postContainer,
560 | 				post_uuid: post_uuid,
561 | 				composerData: composer.posts[post_uuid],
562 | 				formatting: composer.formatting,
563 | 			});
564 | 
565 | 			scrollStop.apply(postContainer.find('.write'));
566 | 			focusElements(postContainer);
567 | 			onShow();
568 | 		});
569 | 	}
570 | 
571 | 	function mobileHistoryAppend() {
572 | 		var path = 'compose?p=' + window.location.pathname;
573 | 		var returnPath = window.location.pathname.slice(1) + window.location.search;
574 | 
575 | 		// Remove relative path from returnPath
576 | 		if (returnPath.startsWith(config.relative_path.slice(1))) {
577 | 			returnPath = returnPath.slice(config.relative_path.length);
578 | 		}
579 | 
580 | 		// Add in return path to be caught by ajaxify when post is completed, or if back is pressed
581 | 		window.history.replaceState({
582 | 			url: null,
583 | 			returnPath: returnPath,
584 | 		}, returnPath, config.relative_path + '/' + returnPath);
585 | 
586 | 		// Update address bar in case f5 is pressed
587 | 		window.history.pushState({
588 | 			url: path,
589 | 		}, path, `${config.relative_path}/${returnPath}`);
590 | 	}
591 | 
592 | 	function handleRemotePid(postContainer) {
593 | 		alerts.alert({
594 | 			title: '[[modules:composer.remote-pid-editing]]',
595 | 			message: '[[modules:composer.remote-pid-content-immutable]]',
596 | 			timeout: 15000,
597 | 		});
598 | 		var container = postContainer.find('.write-container');
599 | 		container.addClass('hidden');
600 | 	}
601 | 
602 | 	function handleHelp(postContainer) {
603 | 		const helpBtn = postContainer.find('[data-action="help"]');
604 | 		helpBtn.on('click', async function () {
605 | 			const html = await socket.emit('plugins.composer.renderHelp');
606 | 			if (html && html.length > 0) {
607 | 				bootbox.dialog({
608 | 					size: 'large',
609 | 					message: html,
610 | 					onEscape: true,
611 | 					backdrop: true,
612 | 					onHidden: function () {
613 | 						helpBtn.focus();
614 | 					},
615 | 				});
616 | 			}
617 | 		});
618 | 	}
619 | 
620 | 	function handleSearch(postContainer) {
621 | 		var uuid = postContainer.attr('data-uuid');
622 | 		var isEditing = composer.posts[uuid] && composer.posts[uuid].action === 'posts.edit';
623 | 		var env = utils.findBootstrapEnvironment();
624 | 		var isMobile = env === 'xs' || env === 'sm';
625 | 		if (isEditing || isMobile) {
626 | 			return;
627 | 		}
628 | 
629 | 		search.enableQuickSearch({
630 | 			searchElements: {
631 | 				inputEl: postContainer.find('input.title'),
632 | 				resultEl: postContainer.find('.quick-search-container'),
633 | 			},
634 | 			searchOptions: {
635 | 				composer: 1,
636 | 			},
637 | 			hideOnNoMatches: true,
638 | 			hideDuringSearch: true,
639 | 		});
640 | 	}
641 | 
642 | 	function activate(post_uuid) {
643 | 		if (composer.active && composer.active !== post_uuid) {
644 | 			composer.minimize(composer.active);
645 | 		}
646 | 
647 | 		composer.active = post_uuid;
648 | 		const postContainer = $('.composer[data-uuid="' + post_uuid + '"]');
649 | 		postContainer.css('visibility', 'visible');
650 | 		$(window).trigger('action:composer.activate', {
651 | 			post_uuid: post_uuid,
652 | 			postContainer: postContainer,
653 | 		});
654 | 	}
655 | 
656 | 	function focusElements(postContainer) {
657 | 		setTimeout(function () {
658 | 			var title = postContainer.find('input.title');
659 | 
660 | 			if (title.length) {
661 | 				title.focus();
662 | 			} else {
663 | 				postContainer.find('textarea').focus().putCursorAtEnd();
664 | 			}
665 | 		}, 20);
666 | 	}
667 | 
668 | 	async function post(post_uuid) {
669 | 		var postData = composer.posts[post_uuid];
670 | 		var postContainer = $('.composer[data-uuid="' + post_uuid + '"]');
671 | 		var handleEl = postContainer.find('.handle');
672 | 		var titleEl = postContainer.find('.title');
673 | 		var bodyEl = postContainer.find('textarea');
674 | 		var thumbEl = postContainer.find('input#topic-thumb-url');
675 | 		var onComposeRoute = postData.hasOwnProperty('template') && postData.template.compose === true;
676 | 		const submitBtn = postContainer.find('.composer-submit');
677 | 
678 | 		titleEl.val(titleEl.val().trim());
679 | 		bodyEl.val(utils.rtrim(bodyEl.val()));
680 | 		if (thumbEl.length) {
681 | 			thumbEl.val(thumbEl.val().trim());
682 | 		}
683 | 
684 | 		var action = postData.action;
685 | 
686 | 		var checkTitle = (postData.hasOwnProperty('cid') || parseInt(postData.pid, 10)) && postContainer.find('input.title').length;
687 | 		var isCategorySelected = !checkTitle || (checkTitle && postData.cid);
688 | 
689 | 		// Specifically for checking title/body length via plugins
690 | 		var payload = {
691 | 			post_uuid: post_uuid,
692 | 			postData: postData,
693 | 			postContainer: postContainer,
694 | 			titleEl: titleEl,
695 | 			titleLen: titleEl.val().length,
696 | 			bodyEl: bodyEl,
697 | 			bodyLen: bodyEl.val().length,
698 | 		};
699 | 
700 | 		await hooks.fire('filter:composer.check', payload);
701 | 		$(window).trigger('action:composer.check', payload);
702 | 
703 | 		if (payload.error) {
704 | 			return composerAlert(post_uuid, payload.error);
705 | 		}
706 | 
707 | 		if (uploads.inProgress[post_uuid] && uploads.inProgress[post_uuid].length) {
708 | 			return composerAlert(post_uuid, '[[error:still-uploading]]');
709 | 		} else if (checkTitle && payload.titleLen < parseInt(config.minimumTitleLength, 10)) {
710 | 			return composerAlert(post_uuid, '[[error:title-too-short, ' + config.minimumTitleLength + ']]');
711 | 		} else if (checkTitle && payload.titleLen > parseInt(config.maximumTitleLength, 10)) {
712 | 			return composerAlert(post_uuid, '[[error:title-too-long, ' + config.maximumTitleLength + ']]');
713 | 		} else if (action === 'topics.post' && !isCategorySelected) {
714 | 			return composerAlert(post_uuid, '[[error:category-not-selected]]');
715 | 		} else if (payload.bodyLen < parseInt(config.minimumPostLength, 10)) {
716 | 			return composerAlert(post_uuid, '[[error:content-too-short, ' + config.minimumPostLength + ']]');
717 | 		} else if (payload.bodyLen > parseInt(config.maximumPostLength, 10)) {
718 | 			return composerAlert(post_uuid, '[[error:content-too-long, ' + config.maximumPostLength + ']]');
719 | 		} else if (checkTitle && !tags.isEnoughTags(post_uuid)) {
720 | 			return composerAlert(post_uuid, '[[error:not-enough-tags, ' + tags.minTagCount() + ']]');
721 | 		} else if (scheduler.isActive() && scheduler.getTimestamp() <= Date.now()) {
722 | 			return composerAlert(post_uuid, '[[error:scheduling-to-past]]');
723 | 		}
724 | 
725 | 		let composerData = {
726 | 			uuid: post_uuid,
727 | 		};
728 | 		let method = 'post';
729 | 		let route = '';
730 | 
731 | 		if (action === 'topics.post') {
732 | 			route = '/topics';
733 | 			composerData = {
734 | 				...composerData,
735 | 				handle: handleEl ? handleEl.val() : undefined,
736 | 				title: titleEl.val(),
737 | 				content: bodyEl.val(),
738 | 				thumb: thumbEl.val() || '',
739 | 				cid: categoryList.getSelectedCid(),
740 | 				tags: tags.getTags(post_uuid),
741 | 				thumbs: postData.thumbs || [],
742 | 				timestamp: scheduler.getTimestamp(),
743 | 			};
744 | 		} else if (action === 'posts.reply') {
745 | 			route = `/topics/${postData.tid}`;
746 | 			composerData = {
747 | 				...composerData,
748 | 				tid: postData.tid,
749 | 				handle: handleEl ? handleEl.val() : undefined,
750 | 				content: bodyEl.val(),
751 | 				toPid: postData.toPid,
752 | 			};
753 | 		} else if (action === 'posts.edit') {
754 | 			method = 'put';
755 | 			route = `/posts/${encodeURIComponent(postData.pid)}`;
756 | 			composerData = {
757 | 				...composerData,
758 | 				pid: postData.pid,
759 | 				handle: handleEl ? handleEl.val() : undefined,
760 | 				content: bodyEl.val(),
761 | 				title: titleEl.val(),
762 | 				thumbs: postData.thumbs || [],
763 | 				tags: tags.getTags(post_uuid),
764 | 				timestamp: scheduler.getTimestamp(),
765 | 			};
766 | 		}
767 | 		var submitHookData = {
768 | 			composerEl: postContainer,
769 | 			action: action,
770 | 			composerData: composerData,
771 | 			postData: postData,
772 | 			redirect: true,
773 | 		};
774 | 
775 | 		await hooks.fire('filter:composer.submit', submitHookData);
776 | 		hooks.fire('action:composer.submit', Object.freeze(submitHookData));
777 | 
778 | 		// Minimize composer (and set textarea as readonly) while submitting
779 | 		var taskbarIconEl = $('#taskbar .composer[data-uuid="' + post_uuid + '"] i');
780 | 		var textareaEl = postContainer.find('.write');
781 | 		taskbarIconEl.removeClass('fa-plus').addClass('fa-circle-o-notch fa-spin');
782 | 		composer.minimize(post_uuid);
783 | 		textareaEl.prop('readonly', true);
784 | 
785 | 		api[method](route, composerData)
786 | 			.then((data) => {
787 | 				submitBtn.removeAttr('disabled');
788 | 				postData.submitted = true;
789 | 
790 | 				composer.discard(post_uuid);
791 | 				drafts.removeDraft(postData.save_id);
792 | 
793 | 				if (data.queued) {
794 | 					alerts.alert({
795 | 						type: 'success',
796 | 						title: '[[global:alert.success]]',
797 | 						message: data.message,
798 | 						timeout: 10000,
799 | 						clickfn: function () {
800 | 							ajaxify.go(`/post-queue/${data.id}`);
801 | 						},
802 | 					});
803 | 				} else if (action === 'topics.post') {
804 | 					if (submitHookData.redirect) {
805 | 						ajaxify.go('topic/' + data.slug, undefined, (onComposeRoute || composer.bsEnvironment === 'xs' || composer.bsEnvironment === 'sm'));
806 | 					}
807 | 				} else if (action === 'posts.reply') {
808 | 					if (onComposeRoute || composer.bsEnvironment === 'xs' || composer.bsEnvironment === 'sm') {
809 | 						window.history.back();
810 | 					} else if (submitHookData.redirect &&
811 | 						((ajaxify.data.template.name !== 'topic') ||
812 | 						(ajaxify.data.template.topic && parseInt(postData.tid, 10) !== parseInt(ajaxify.data.tid, 10)))
813 | 					) {
814 | 						ajaxify.go('post/' + data.pid);
815 | 					}
816 | 				} else {
817 | 					removeComposerHistory();
818 | 				}
819 | 
820 | 				hooks.fire('action:composer.' + action, { composerData: composerData, data: data });
821 | 			})
822 | 			.catch((err) => {
823 | 				// Restore composer on error
824 | 				composer.load(post_uuid);
825 | 				textareaEl.prop('readonly', false);
826 | 				if (err.message === '[[error:email-not-confirmed]]') {
827 | 					return messagesModule.showEmailConfirmWarning(err.message);
828 | 				}
829 | 				composerAlert(post_uuid, err.message);
830 | 			});
831 | 	}
832 | 
833 | 	function onShow() {
834 | 		$('html').addClass('composing');
835 | 	}
836 | 
837 | 	function onHide() {
838 | 		$('#content').css({ paddingBottom: 0 });
839 | 		$('html').removeClass('composing');
840 | 		app.toggleNavbar(true);
841 | 		formatting.exitFullscreen();
842 | 	}
843 | 
844 | 	composer.discard = function (post_uuid) {
845 | 		if (composer.posts[post_uuid]) {
846 | 			var postData = composer.posts[post_uuid];
847 | 			var postContainer = $('.composer[data-uuid="' + post_uuid + '"]');
848 | 			postContainer.remove();
849 | 			drafts.removeDraft(postData.save_id);
850 | 			topicThumbs.deleteAll(post_uuid);
851 | 
852 | 			taskbar.discard('composer', post_uuid);
853 | 			$('[data-action="post"]').removeAttr('disabled');
854 | 
855 | 			hooks.fire('action:composer.discard', {
856 | 				post_uuid: post_uuid,
857 | 				postData: postData,
858 | 			});
859 | 			delete composer.posts[post_uuid];
860 | 			composer.active = undefined;
861 | 		}
862 | 		scheduler.reset();
863 | 		onHide();
864 | 	};
865 | 
866 | 	// Alias to .discard();
867 | 	composer.close = composer.discard;
868 | 
869 | 	composer.minimize = function (post_uuid) {
870 | 		var postContainer = $('.composer[data-uuid="' + post_uuid + '"]');
871 | 		postContainer.css('visibility', 'hidden');
872 | 		composer.active = undefined;
873 | 		taskbar.minimize('composer', post_uuid);
874 | 		$(window).trigger('action:composer.minimize', {
875 | 			post_uuid: post_uuid,
876 | 		});
877 | 
878 | 		onHide();
879 | 	};
880 | 
881 | 	composer.minimizeActive = function () {
882 | 		if (composer.active) {
883 | 			composer.miminize(composer.active);
884 | 		}
885 | 	};
886 | 
887 | 	composer.updateThumbCount = function (uuid, postContainer) {
888 | 		const composerObj = composer.posts[uuid];
889 | 		if (composerObj && (composerObj.action === 'topics.post' || (composerObj.action === 'posts.edit' && composerObj.isMain))) {
890 | 			const thumbCount = composerObj.thumbs ? composerObj.thumbs.length : 0;
891 | 			const formatEl = postContainer.find('[data-format="thumbs"]');
892 | 			formatEl.find('.badge')
893 | 				.text(thumbCount)
894 | 				.toggleClass('hidden', !thumbCount);
895 | 		}
896 | 	};
897 | 
898 | 	return composer;
899 | });
900 | 


--------------------------------------------------------------------------------