some editor updates

This commit is contained in:
Pachira 2016-08-05 22:53:29 +02:00
parent f3ff6ad6c2
commit e5ca1d8c64
5 changed files with 83 additions and 44 deletions

View file

@ -7,6 +7,10 @@ namespace Sakura
public static LoggedIn: boolean = false;
public static ChangelogUrl: string = "https://sakura.flash.moe/";
public static ChangelogApi: string = "api.php/";
public static ForumTitleMin: number = 0;
public static ForumTitleMax: number = 0;
public static ForumTextMin: number = 0;
public static ForumTextMax: number = 0;
public static Set(config: Object): void
{

View file

@ -0,0 +1,62 @@
namespace Sakura
{
export class Editor
{
private static UpdateTimeout: number = 0;
private static PreviewClient: AJAX;
private static PostClient: AJAX;
public static Prepare(): void
{
this.PostClient = new AJAX;
this.PreviewClient = new AJAX;
this.PreviewClient.SetUrl("/helper/bbcode/parse");
this.PreviewClient.Form();
}
public static Preview(target: HTMLElement, text: HTMLTextAreaElement): void
{
this.PreviewClient.SetSend({"text": text.value});
this.PreviewClient.AddCallback(200, (client: AJAX) => {
target.innerHTML = client.Response();
});
this.PreviewClient.Start(HTTPMethod.POST);
}
public static QuotePost(id: number, username: string, target: HTMLTextAreaElement): void
{
this.PostClient.SetUrl("/forum/post/1/raw".replace('1', id.toString()));
this.PostClient.AddCallback(200, (client: AJAX) => {
DOM.EnterAtCursor(target, "[quote=" + username + "]" + client.Response() + "[/quote]");
target.focus();
});
this.PostClient.Start(HTTPMethod.GET);
}
public static InsertBBCode(target: HTMLTextAreaElement, code: string, param: boolean): void
{
var start: string = "[" + code + (param ? "=" : "") + "]",
end: string = "[/" + code + "]",
selectionLength = DOM.GetSelectionLength(target);
DOM.EnterAtCursor(target, start);
DOM.SetPosition(target, DOM.GetPosition(target) + selectionLength + start.length);
DOM.EnterAtCursor(target, end);
DOM.SetPosition(target, DOM.GetPosition(target) - selectionLength);
DOM.SetPosition(target, DOM.GetPosition(target) + selectionLength, true);
}
public static PreviewTimeout(target: HTMLElement, text: HTMLTextAreaElement): void
{
if (this.UpdateTimeout !== 0) {
return;
}
this.UpdateTimeout = setTimeout(() => {
Editor.Preview(target, text);
clearTimeout(Editor.UpdateTimeout);
Editor.UpdateTimeout = 0;
}, 500);
}
}
}

View file

@ -1,20 +0,0 @@
/// <reference path="../Sakura.ts" />
namespace Yuuno
{
export class Editor
{
public static InsertBBCode(target: HTMLTextAreaElement, code: string, param: boolean): void
{
var start: string = "[" + code + (param ? "=" : "") + "]",
end: string = "[/" + code + "]",
selectionLength = Sakura.DOM.GetSelectionLength(target);
Sakura.DOM.EnterAtCursor(target, start);
Sakura.DOM.SetPosition(target, Sakura.DOM.GetPosition(target) + selectionLength + start.length);
Sakura.DOM.EnterAtCursor(target, end);
Sakura.DOM.SetPosition(target, Sakura.DOM.GetPosition(target) - selectionLength);
Sakura.DOM.SetPosition(target, Sakura.DOM.GetPosition(target) + selectionLength, true);
}
}
}

View file

@ -24,7 +24,7 @@
<div class="posting-buttons">
<div style="float: left;">
{% for code,meta in bbcode %}
<button onclick="Yuuno.Editor.InsertBBCode(Sakura.DOM.ID('postingText'), '{{ code }}'{% if meta[2] %}, true{% endif %});" type="button"{% if meta[0] %} title="{{ meta[0] }}"{% endif %} class="forumbtn{% if meta[1] %} fa fa-{{ meta[1] }}{% endif %}">{% if not meta[1] %}{{ code }}{% endif %}</button>
<button onclick="Sakura.Editor.InsertBBCode(Sakura.DOM.ID('postingText'), '{{ code }}'{% if meta[2] %}, true{% endif %});" type="button"{% if meta[0] %} title="{{ meta[0] }}"{% endif %} class="forumbtn{% if meta[1] %} fa fa-{{ meta[1] }}{% endif %}">{% if not meta[1] %}{{ code }}{% endif %}</button>
{% endfor %}
</div>
<div style="float: right;">
@ -37,11 +37,15 @@
</div>
<script type="text/javascript">
var titleMax = {{ config('forum.max_title_length') }},
titleMin = {{ config('forum.min_title_length') }},
textMax = {{ config('forum.max_post_length') }},
textMin = {{ config('forum.min_post_length') }},
preview = document.getElementById('postingPreview'),
Sakura.Config.Set({
ForumTitleMin: {{ config('forum.min_title_length') }},
ForumTitleMax: {{ config('forum.max_title_length') }},
ForumTextMin: {{ config('forum.min_post_length') }},
ForumTextMax: {{ config('forum.max_post_length') }},
});
Sakura.Editor.Prepare();
var preview = document.getElementById('postingPreview'),
pTitle = document.getElementById('postingTitle'),
pTitleCont = document.getElementById('postingTitleContainer'),
pText = document.getElementById('postingText'),
@ -51,17 +55,11 @@
tTitle = document.getElementById('topicTitle'),
rTitle = document.getElementById('previewTitle'),
rText = document.getElementById('previewText'),
lastParsed = Date.now(),
lastKeystroke = Date.now(),
parser = new Sakura.AJAX(),
postFetch = new Sakura.AJAX(),
parserActive = false,
op = {{ topic is defined ? topic.firstPost.id : 0 }},
topicName = "{{ topic is defined ? topic.firstPost.subject : '' }}";
parser.SetUrl("{{ route('helper.bbcode.parse') }}");
parser.ContentType("application/x-www-form-urlencoded");
pText.addEventListener("focus", function () {
preview.style.display = null;
});
@ -72,7 +70,7 @@
}
});
setInterval(function () {
/*setInterval(function () {
if (lastParsed < Date.now() - 1000
&& lastKeystroke > Date.now() - 1000
&& parserActive !== true) {
@ -108,11 +106,9 @@
parser.Start(Sakura.HTTPMethod.POST);
}
}
}, 1000);
}, 1000);*/
pText.addEventListener("keydown", function (e) {
lastKeystroke = Date.now();
if (e.keyCode == 9) {
e.preventDefault();
insertText('postingText', ' ');
@ -121,6 +117,8 @@
if (e.keyCode == 13 && e.ctrlKey) {
pForm.submit();
}
Sakura.Editor.PreviewTimeout(rText, pText);
});
pTitle.addEventListener("keyup", function (e) {
@ -128,12 +126,12 @@
if (title.length == 0) {
title = "";
} else if (title.length < titleMin) {
} else if (title.length < Sakura.Config.ForumTitleMin) {
title = "<span style='color: red;'>Too short!</span>";
tTitle.innerHTML = title;
rTitle.innerHTML = title;
return;
} else if (title.length > titleMax) {
} else if (title.length > Sakura.Config.ForumTitleMax) {
title = "<span style='color: red;'>Too long!</span>";
tTitle.innerHTML = title;
rTitle.innerHTML = title;
@ -144,11 +142,6 @@
rTitle.innerText = title;
});
function quotePost(id) {
pText.value = pText.value + "[quote=#" + id + "][/quote]";
pText.focus();
}
function editPost(id) {
pText.disabled = true;
pTitleCont.style.display = 'none';

View file

@ -100,7 +100,7 @@
<a class="fa fa-user-{% if user.isFriends(post.poster.id) == 0 %}plus{% else %}times{% endif %} forum-friend-toggle friend-{{ post.poster.id }}-toggle" title="{% if user.isFriends(post.poster.id) == 0 %}Add {{ post.poster.username }} as a friend{% else %}Remove friend{% endif %}" href="javascript:void(0);" onclick="Sakura.Friend.{% if user.isFriends(post.poster.id) == 0 %}Add({{ post.poster.id }}){% else %}Remove({{ post.poster.id }}){% endif %}"></a>
<a class="fa fa-flag" title="Report {{ post.poster.username }}" href="{{ route('user.report', post.poster.id) }}"></a>
{% endif %}
<a class="fa fa-reply" title="Quote this post" href="javascript:void(0);" onclick="quotePost({{ post.id }});"></a>
<a class="fa fa-reply" title="Quote this post" href="javascript:void(0);" onclick="Sakura.Editor.QuotePost({{ post.id }}, '{{ post.poster.username }}', pText);"></a>
</div>
{% endif %}
</div>