aboutsummaryrefslogtreecommitdiff
path: root/htdocs/js/admin/11-write-form.js
blob: b49a5237797d949bd4a389273be3a46f3ee6da75 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
var AdminWriteForm = {
    form: null,
    previewTimeout: null,
    previewRequest: null,

    init: function(opts) {
        opts = opts || {};

        this.opts = opts;
        this.form = document.forms[opts.pages ? 'pageForm' : 'postForm'];
        this.isFixed = false;

        addEvent(this.form, 'submit', this.onSubmit);
        if (!opts.pages)
            addEvent(this.form.title, 'input', this.onInput);

        addEvent(this.form.text, 'input', this.onInput);
        addEvent(ge('toggle_wrap'), 'click', this.onToggleWrapClick);

        if (this.form.text.value !== '')
            this.showPreview();

        // TODO make it more clever and context-aware
        /*var draft = Draft.get();
        if (draft.title)
            this.form.title.value = draft.title;
        if (draft.text)
            this.form.text.value = draft.text;*/

        addEvent(window, 'scroll', this.onScroll);
        addEvent(window, 'resize', this.onResize);
    },

    showPreview: function() {
        if (this.previewRequest !== null) {
            this.previewRequest.abort();
        }
        this.previewRequest = ajax.post('/admin/markdown-preview.ajax', {
            title: this.form.elements.title.value,
            md: this.form.elements.text.value,
            use_image_previews: this.opts.pages ? 1 : 0
        }, function(err, response) {
            if (err)
                return console.error(err);
            ge('preview_html').innerHTML = response.html;
        });
    },

    onSubmit: function(event) {
        try {
            var fields = ['title', 'text'];
            if (!this.opts.pages)
                fields.push('tags');
            if (this.opts.edit) {
                fields.push('new_short_name');
            } else {
                fields.push('short_name');
            }
            for (var i = 0; i < fields.length; i++) {
                var field = fields[i];
                if (event.target.elements[field].value.trim() === '')
                    throw 'no_'+field
            }

            // Draft.reset();
        } catch (e) {
            var error = typeof e == 'string' ? lang((this.opts.pages ? 'err_pages_' : 'err_blog_')+e) : e.message;
            alert(error);
            console.error(e);
            return cancelEvent(event);
        }
    },

    onToggleWrapClick: function(e) {
        var textarea = this.form.elements.text;
        if (!hasClass(textarea, 'nowrap')) {
            addClass(textarea, 'nowrap');
        } else {
            removeClass(textarea, 'nowrap');
        }
        return cancelEvent(e);
    },

    onInput: function(e) {
        if (this.previewTimeout !== null) {
            clearTimeout(this.previewTimeout);
        }
        this.previewTimeout = setTimeout(function() {
            this.previewTimeout = null;
            this.showPreview();

            // Draft[e.target.name === 'title' ? 'setTitle' : 'setText'](e.target.value);
        }.bind(this), 300);
    },

    onScroll: function() {
        var ANCHOR_TOP = 10;

        var y    = window.pageYOffset;
        var form = this.form;
        var td   = ge('form_first_cell');
        var ph   = ge('form_placeholder');

        var rect = td.getBoundingClientRect();

        if (rect.top <= ANCHOR_TOP && !this.isFixed) {
            ph.style.height = form.getBoundingClientRect().height+'px';

            var w = (rect.width - (parseInt(getComputedStyle(td).paddingRight, 10) || 0));
            form.style.display = 'block';
            form.style.width = w+'px';
            form.style.position = 'fixed';
            form.style.top = ANCHOR_TOP+'px';

            this.isFixed = true;
        } else if (rect.top > ANCHOR_TOP && this.isFixed) {
            form.style.display = '';
            form.style.width = '';
            form.style.position = '';
            form.style.position = '';
            ph.style.height = '';

            this.isFixed = false;
        }
    },

    onResize: function() {
        if (this.isFixed) {
            var form = this.form;
            var td   = ge('form_first_cell');
            var ph   = ge('form_placeholder');

            var rect = td.getBoundingClientRect();
            var pr   = parseInt(getComputedStyle(td).paddingRight, 10) || 0;

            ph.style.height = form.getBoundingClientRect().height+'px';
            form.style.width = (rect.width - pr) + 'px';
        }
    }
};

bindEventHandlers(AdminWriteForm);