blue-twilight/resources/assets/js/gallery.js

/**
 * This model is used by gallery/photo.blade.php, to handle comments and individual photo actions.
 * @constructor
 */
function PhotoViewModel(urls) {
    this.el = '#photo-app';

    this.data = {
        is_reply_form_loading: false,
        reply_comment_id: 0
    };

    this.computed = {
        replyFormStyle: function()
        {
            return {
                'display': this.is_reply_form_loading ? 'none' : 'block'
            };
        }
    };

    this.methods = {
        init: function() {
            var self = this;

            // Load the right comment reply form
            $('#comment-reply-modal').on('show.bs.modal', function (event) {
                var url = urls.reply_comment_form.replace(/-1$/, self.reply_comment_id);
                $.get(url, function(result)
                {
                    $('#comment-reply-form-content').html(result);
                    initTinyMce('#comment-text-reply');
                    self.is_reply_form_loading = false;
                });
            });

            $('#comment-reply-modal').on('hide.bs.modal', function (event) {
                tinymce.remove('#comment-text-reply');
            });
        },
        postCommentReply: function() {
            var form = $('form', '#comment-reply-form-content');
            var formUrl = $(form).attr('action');

            // Seems like the TinyMCE editor in the BS modal does not persist back to the textarea correctly - so do
            // this manually (bit of a hack!)
            $('#comment-text-reply', form).html(tinymce.get('comment-text-reply').getContent());

            var formData = form.serialize();

            $.post(formUrl, formData, function(result)
            {
                if (result.redirect_url)
                {
                    window.location = result.redirect_url;
                }
                else
                {
                    tinymce.remove('#comment-text-reply');
                    $('#comment-reply-form-content').html(result);
                    initTinyMce('#comment-text-reply');
                }
            });
        },
        replyToComment: function(e) {
            var replyButton = $(e.target).closest('.photo-comment');
            this.reply_comment_id = replyButton.data('comment-id');

            this.is_reply_form_loading = true;
            $('#comment-reply-modal').modal('show');

            e.preventDefault();
            return false;
        }
    };
}