Skip to content

Commit 82fc03f

Browse files
akinseyakinsey
committed
feat: initial port of editor html
1 parent 63d5f75 commit 82fc03f

File tree

1 file changed

+270
-0
lines changed

1 file changed

+270
-0
lines changed

‎src/components/layout/Editor.vue

+270
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
<template>
2+
<div class="messages-wrap">
3+
<div :class="editorPosition" v-if="showEditor">
4+
<!-- Editor Container-->
5+
<div class="editor-container" :class="{ 'new-message' : editorConvoMode, 'new-thread' : threadEditorMode, 'add-poll' : thread.addPoll }">
6+
<!-- Draft Alert -->
7+
<span class="alert-form-input">{{draftStatus}}</span>
8+
9+
<!-- Editor Header -->
10+
<div class="editor-top-bar">
11+
12+
<!-- Thread Editor Mode -->
13+
<div v-if="threadEditorMode">
14+
<!-- Thread Title -->
15+
<div class="padded-row">
16+
<div class="fill-row">
17+
<label>Thread Title</label>
18+
<!-- modal-focus="{{showEditor && threadEditorMode}}" -->
19+
<input type="text" id="threadTitle" v-model="thread.title" :class="{ 'rtl': rightToLeft }">
20+
</div>
21+
</div>
22+
<!-- Thread Options -->
23+
<div class="padded-row" v-if="canLock() || canSticky() || canModerate() || canCreatePoll()">
24+
<div class="fill-row">
25+
<label>Options:</label>
26+
<div class="option" v-if="canLock()">
27+
<input type="checkbox" id="lockThread" v-model="thread.locked">
28+
<label for="lockThread">Lock Thread</label>
29+
</div>
30+
31+
<div class="option" v-if="canSticky()">
32+
<input type="checkbox" id="stickyThread" v-model="thread.sticky">
33+
<label for="stickyThread">Sticky Thread</label>
34+
</div>
35+
36+
<div class="option" v-if="canModerate()">
37+
<input type="checkbox" id="moderateThread" v-model="thread.moderated">
38+
<label for="moderateThread">Moderate Thread</label>
39+
</div>
40+
41+
<div class="option" v-if="canCreatePoll()">
42+
<input type="checkbox" id="threadPoll" v-model="thread.addPoll">
43+
<label for="threadPoll">Add a Poll</label>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
49+
<!-- Message Editor Mode -->
50+
<div v-if="editorConvoMode">
51+
<!-- Select User -->
52+
<label>To</label>
53+
<input type="text"></div>
54+
<!-- <tags-input min-length="1" placeholder="Type username(s) to message" add-from-autocomplete-only="true" replace-spaces-with-dashes="false" display-property="username" allow-leftover-text="false" ng-model="receivers" modal-focus="{{showEditor && editorConvoMode}}">
55+
<auto-complete min-length="1" debounce-delay="250" source="loadTags($query)"></auto-complete>
56+
</tags-input> -->
57+
<!-- Subject -->
58+
<label>Subject</label>
59+
<input type="text" v-model="newMessage.content.subject" minlength="1" maxlength="255" />
60+
</div>
61+
62+
<!-- Post Editor Mode -->
63+
<div class="buttons" v-if="postEditorMode">
64+
<div class="left toolbar-title" title="Click to go to this post" v-if="posting.post.id">
65+
Editing Post:&nbsp;&nbsp;<a ui-sref="posts.data({ slug: thread.slug, page: posting.post.page, '#': posting.post.id })">{{ posting.post.id }}</a>
66+
</a>
67+
</div>
68+
69+
<div class="toolbar-title" v-if="!posting.post.id">
70+
New Post in "{{ thread.title}}"
71+
</div>
72+
</div>
73+
74+
<div class="editor-formatting" v-if="showFormatting">
75+
<a class="close-formatting" @click="showFormatting = false">Close</a>
76+
<div class="thin-underline fill-row">
77+
<a href="https://github.com/epochtalk/bbcode-parser" target="_blank">
78+
<h4>BBCode Lookup</h4>
79+
</a>
80+
</div>
81+
<div class="half-column">
82+
<strong>Bold</strong>:<div class="right">[b][/b]</div><br />
83+
<em>Italics</em>:<div class="right">[i][/i]</div><br />
84+
<u>Underline</u>:<div class="right">[u][/u]</div><br />
85+
<del>Strikethrough</del>:<div class="right">[s][/s]</div><br />
86+
BTC:<div class="right">[btc][/btc]</div><br />
87+
<span style="background-color: green">Glow</span>:
88+
<div class="right">[glow={color}][/glow]</div><br />
89+
<span style="text-shadow: red 1px 1px 5px;">Shadow</span>:
90+
<div class="right">[shadow={color}, {direction}, {blur}][/shadow]</div><br />
91+
Font Size:<div class="right">[size={size}][/size]</div><br />
92+
<sup>Superscript</sup>:<div class="right">[sup][/sup]</div><br />
93+
<sub>Subscript</sub>:<div class="right">[sub][/sub]</div><br />
94+
95+
<hr class="clear" />
96+
97+
<code class="preview">Code</code>:<div class="right">[code][/code]</div><br />
98+
<tt>TeleText</tt>:<div class="right">[tt][/tt]</div><br />
99+
Preformatted Text:<div class="right">[pre][/pre]</div><br />
100+
Justify Left:<div class="right">[left][/left]</div><br />
101+
Justify Right:<div class="right">[right][/right]</div><br />
102+
Justify Center:<div class="right">[center][/center]</div><br />
103+
104+
<hr class="clear" />
105+
106+
Horizontal Rule:<div class="right">[hr][/hr]</div><br /><br />
107+
</div>
108+
<div class="half-column">
109+
Black:<div class="right">[black][/black]</div><br />
110+
Blue:<div class="right">[blue][/blue]</div><br />
111+
Green:<div class="right">[green][/green]</div><br />
112+
Red:<div class="right">[red][/red]</div><br />
113+
White:<div class="right">[white][/white]</div><br />
114+
Additional Colors:<div class="right">[color={color}][/color]</div><br />
115+
116+
<hr class="clear" />
117+
118+
Image:<div class="right">[img]{URL}[/img]</div><br />
119+
URL:<div class="right">[url={URL}][/url]</div><br />
120+
Email:<div class="right">[email={email}][/email]</div><br />
121+
FTP:<div class="right">[ftp={URL}][/ftp]</div><br />
122+
123+
<hr class="clear" />
124+
125+
Lists:
126+
<div class="right">
127+
[list]<br />
128+
&nbsp;&nbsp;[li][/li]<br />
129+
&nbsp;&nbsp;[li][/li]<br />
130+
[/list]<br /><br />
131+
</div>
132+
133+
<hr class="clear" />
134+
135+
Tables:
136+
<div class="right">
137+
[table]<br />
138+
&nbsp;&nbsp;[tr]<br />
139+
&nbsp;&nbsp;&nbsp;&nbsp;[td][/td]<br />
140+
&nbsp;&nbsp;[/tr]<br />
141+
[/table]
142+
</div><br />
143+
</div>
144+
</div>
145+
</div>
146+
147+
<!-- Poll Creator -->
148+
<!-- <poll-creator poll="thread.poll" valid="thread.pollValid" ng-if="thread.addPoll"></poll-creator> -->
149+
150+
<!-- Editor -->
151+
<form name="form" class="editor-form" novalidate>
152+
<!-- START EDITOR -->
153+
<div class="editor-header">
154+
<a class="first" :class="{'selected': !preview }" tabindex="-1" @click="preview = false">Compose</a>
155+
<a :class="{'selected': preview }" tabindex="-1" @click="preview = true">Preview</a>
156+
</div>
157+
158+
<div class="editor-body">
159+
<div class="editor-column-input" :class="{ 'hidden': preview }">
160+
<textarea class="editor-input" :class="{ 'rtl': rtl }" placeholder="Enter your reply here. (BTW, you can drag and drop images directly into the editor panel)" :maxlength="{{post_max_length || 10000 }}"></textarea>
161+
<div class="editor-drag-container">
162+
<div class="editor-drag">
163+
<div class="editor-drag-text">Drag and Drop Images</div>
164+
</div>
165+
</div>
166+
</div>
167+
<div class="editor-column-preview" :class="{ 'hidden': !preview }">
168+
<!-- TODO(akinsey): post-processing="bodyHtml" style-fix="false" -->
169+
<div class="editor-preview" :class="{ 'rtl': rtl }" ></div>
170+
</div>
171+
</div>
172+
173+
<div class="editor-footer">
174+
<!-- <image-uploader class="editor-image-uploader" purpose="editor" reset="resetImages" on-done="insertImageUrl(data)"></image-uploader> -->
175+
</div>
176+
<!-- END EDITOR -->
177+
</form>
178+
179+
<div class="editor-tools">
180+
<div class="tools">
181+
<a data-balloon="Formatting Help" @click="showFormatting = true"><i class="fa fa-code"></i></a>
182+
<a :data-balloon="{{ isMinimized ? 'Expand Editor' : 'Minimize Editor' }}" @click="fullscreen()"><i class="fa expand" :class="{ 'fa-expand': isMinimized, 'fa-compress': !isMinimized }"></i></a>
183+
</div>
184+
</div>
185+
186+
<!-- Message Editor Controls -->
187+
<div class="editor-button-container" v-if="!threadEditorMode && !postEditorMode">
188+
<button class="inverted-button cancel" @click="cancel()">
189+
Cancel
190+
</button>
191+
<button class="no-animate send" v-if="editorConvoMode" @click="createAction().then(closeEditor);" :disabled="form.title.$error.required || !canCreate() || !newMessage.content.body.length || !newMessage.content.subject.length || !receivers.length">
192+
<i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Send
193+
</button>
194+
<button class="no-animate send" v-if="!editorConvoMode" class="send" @click="updateAction().then(closeEditor);" :disabled="form.title.$error.required || !canUpdate() || !newMessage.content.body.length">
195+
<i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Send Reply
196+
</button>
197+
198+
<span class="label alert" v-if="posting.error" v-html="posting.error.message"></span>
199+
</div>
200+
201+
<!-- Post Editor Controls -->
202+
<div class="editor-button-container" ng-if="postEditorMode">
203+
<button class="inverted-button cancel" ng-click="cancel()">
204+
Cancel
205+
</button>
206+
<button class="send" ng-click="createAction().then(closeEditor);" ng-disabled="form.title.$error.required || !canCreate()">
207+
<i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;{{ posting.post.id ? 'Edit Post' : 'Send Reply' }}
208+
</button>
209+
210+
<span class="label alert" ng-if="posting.error" ng-bind="posting.error.message"></span>
211+
</div>
212+
213+
<!-- Thread Editor Controls -->
214+
<div class="editor-button-container" ng-if="threadEditorMode">
215+
<button class="inverted-button cancel" ng-click="cancel()">
216+
Cancel
217+
</button>
218+
<button class="send" ng-click="createAction().then(closeEditor);" ng-disabled="!thread.title.length || form.title.$error.required || !canCreate() || (thread.addPoll && !thread.pollValid)">
219+
<i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Start Thread
220+
</button>
221+
222+
<span class="label alert" ng-if="posting.error" ng-bind="posting.error.message"></span>
223+
</div>
224+
</div>
225+
</div>
226+
</div>
227+
</template>
228+
229+
<script>
230+
import { reactive, toRefs } from 'vue'
231+
// import { useRoute, useRouter } from 'vue-router'
232+
233+
export default {
234+
props: ['editorConvoMode', 'threadEditorMode', 'postEditorMode', 'createAction'],
235+
setup(props) {
236+
237+
const canLock = () => true
238+
const canSticky = () => true
239+
const canModerate = () => true
240+
const canCreatePoll = () => true
241+
const fullscreen = () => console.log('fullscreen')
242+
const cancel = () => showEditor = false
243+
const closeEditor = () => showEditor = false
244+
/* Internal Data */
245+
// const $route = useRoute()
246+
// const $router = useRouter()
247+
248+
/* View Data */
249+
const v = reactive({
250+
isMinimized: true,
251+
editorPosition: null,
252+
showFormatting: false,
253+
preview: false,
254+
showEditor: false,
255+
draftStatus: null,
256+
receivers: [],
257+
posting: {},
258+
newMessage: { content: { subject: '', body: '', subject: '' } }
259+
rightToLeft: false,
260+
rtl: false
261+
})
262+
263+
return { ...toRefs(v) }
264+
}
265+
}
266+
</script>
267+
268+
<style lang="scss">
269+
270+
</style>

0 commit comments

Comments
 (0)