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;
        }
    };
}

/**
 * This model is used by gallery/user_profile.blade.php, to handle a user's profile.
 * @constructor
 */
function UserViewModel(urls)
{
    this.el = '#user-app';

    this.data = {
        feed_items: [],
        is_loading: true,
        selected_view: 'profile'
    };

    this.computed = {
        isFeed: function() {
            return this.selected_view === 'feed';
        },
        isProfile: function() {
            return this.selected_view === 'profile';
        }
    };

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

            $.get(urls.feed_url, function (data)
            {
                for (var i = 0; i < data.length; i++)
                {
                    // User name
                    if (data[i].params.user_name && data[i].params.user_url)
                    {
                        data[i].description = data[i].description
                            .replace(
                                ':user_name',
                                '<a href="' + data[i].params.user_url + '">' + data[i].params.user_name + '</a>'
                            );
                    }

                    // Photo name
                    if (data[i].params.photo_name && data[i].params.photo_url)
                    {
                        data[i].description = data[i].description
                            .replace(
                                ':photo_name',
                                '<a href="' + data[i].params.photo_url + '">' + data[i].params.photo_name + '</a>'
                            );
                    }
                }

                self.feed_items = data;
                self.is_loading = false;
            });
        },
        switchToFeed: function(e) {
            this.selected_view = 'feed';
            history.pushState('data to be passed', 'Title of the page', urls.current_url + '?tab=feed');

            e.preventDefault();
            return false;
        },
        switchToProfile: function(e) {
            this.selected_view = 'profile';
            history.pushState('data to be passed', 'Title of the page', urls.current_url + '?tab=profile');

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