Jump to content

ips.core.reaction.js little improvement


Numbered

Recommended Posts

Posted

Hello IPS.

Big thanks for react_daily_exceeded error message fix, added to 4.2.6 (beta3).

But i want to propose very simple improvement of this js clickReaction method:

Current line 257:

if( !_.isUndefined( jqXHR.responseJSON ) && jqXHR.responseJSON.error == 'react_daily_exceeded' ){
	ips.ui.alert.show( {
		type: 'alert',
		icon: 'warn',
		message: ips.getString('reactDailyExceeded'),
		callbacks: {}
	});
} else {
	ips.ui.alert.show( {
		type: 'alert',
		icon: 'warn',
		message: ips.getString('reactError'),
		callbacks: {}
	});
}

change to:

if( !_.isUndefined( jqXHR.responseJSON ) && ips.getString(jqXHR.responseJSON.error) ) {
	ips.ui.alert.show( {
		type: 'alert',
		icon: 'warn',
		message: ips.getString(jqXHR.responseJSON.error),
		callbacks: {}
	});
} else {
	ips.ui.alert.show( {
		type: 'alert',
		icon: 'warn',
		message: ips.getString('reactError'),
		callbacks: {}
	});
}

It will not change default worked system. But it will add clear solution for other dev's to provide any custom error message, if they provide other error thrown with other language key and other error message.

For our special case we have that. We have custom reactions logic with two additional errors, which are thrown their error message. Of course i can create a mixin and redefine that method. But in future i need to check on every update some potencial changes in your default method for support them. If you aggree with me and implement this simple solution - than me (and may be others) can use that without mixins natively. It's very like to have.

If somebody needs that now, i share my custom mixin, which implement my realization of that proposal. All it contain absolutely same code, as default, except two lines about returned message:

ips.controller.mixin('clickReaction', 'core.front.core.reaction', true, function () {
    this.around('clickReaction', function (origFn, e) {
        e.preventDefault();

        // If this is a single reaction, and we're active, then we'll treat it as an 'unreact' action
        if (this._singleReaction && this._reactButton.hasClass('ipsReact_reacted')) {
            this.unreact(null);
            return;
        }

        // Mobile support - check whether we've activated the flyout first
        // Or, if this is a single reaction, ignore the flyout and just proceed with reacting
        if (ips.utils.events.isTouchDevice() && ( !this._singleReaction && !this._reactTypeContainer.hasClass('ipsReact_types_active') )) {
            return;
        }

        var self = this;
        var reaction = $(e.currentTarget);
        var url = reaction.attr('href');
        var currentButton = this.scope.find('[data-action="reactLaunch"] > [data-role="reaction"]');
        var newReaction = ( !$(e.currentTarget).closest('[data-action="reactLaunch"]').length || !this._reactButton.hasClass('ipsReact_reacted') );

        // Remove all 'active' classes to reset their states
        this._removeActiveReaction();

        // Trigger a pulse animation on the selected reaction
        reaction.addClass('ipsReact_active');

        // Add 'reacted' class to button
        this._reactButton.addClass('ipsReact_reacted');

        // If this isn't the current button already...
        if (reaction.closest('[data-action="reactLaunch"]').length == 0) {

            var _complete = function () {
                // Clone and swap the current/new reaction
                var currentButtonCopy = currentButton.clone();
                var reactionCopy = reaction.clone();
                currentButton.replaceWith(reactionCopy.removeClass('ipsReact_active'));
                reaction.replaceWith(currentButtonCopy.removeClass('ipsReact_active'));

                // Show the x button, hide the flyout and remove active styles
                setTimeout(function () {
                    self._reactClose.fadeIn();
                }, 400);
                self.unlaunchReaction();
                self._removeActiveReaction();
            };
        } else {
            var _complete = function () {
                // Show the x button, hide the flyout and remove active styles
                setTimeout(function () {
                    self._reactClose.fadeIn();
                }, 400);
                self.unlaunchReaction();
                self._removeActiveReaction();
            };
        }

        // Use a timeout here to allow time for the 'pulse' animation to finish
        setTimeout(_complete, 400);

        // Only bother with an ajax request if we're updating the reaction
        if (newReaction) {
            // Fire our ajax request to actually react
            if (this._ajaxObj && _.isFunction(this._ajaxObj.abort)) {
                this._ajaxObj.abort();
            }

            this._ajaxObj = ips.getAjax()(url)
                .done(function (response) {
                    self._updateReaction(response);
                })
                .fail(function (jqXHR, textStatus, errorThrown) {
                    Debug.log('fail');

                    if (!_.isUndefined(jqXHR.responseJSON) && ips.getString(jqXHR.responseJSON.error)) {
                        ips.ui.alert.show({
                            type: 'alert',
                            icon: 'warn',
                            message: ips.getString(jqXHR.responseJSON.error),
                            callbacks: {}
                        });
                    } else {
                        ips.ui.alert.show({
                            type: 'alert',
                            icon: 'warn',
                            message: ips.getString('reactError'),
                            callbacks: {}
                        });
                    }

                    // Undo all the hard work we did to make the reaction active :(
                    self._reactButton.removeClass('ipsReact_reacted');
                    self._reactClose.remove();
                });
        }
    });
});

It worked well for me and return any my thown message, which key exist an $langjs file of app/plugin.

Thanks for you work!

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...