Make spinner into a template

This commit is contained in:
JC Brand 2017-06-14 18:09:22 +02:00
parent e1dace59ae
commit 076af0970f
7 changed files with 23 additions and 15 deletions

View File

@ -1352,7 +1352,7 @@
text-align: center; text-align: center;
display: block; display: block;
margin: 0; margin: 0;
padding: 50% 0; } padding: 10% 0; }
#converse-embedded-chat .hor_centered, #converse-embedded-chat .hor_centered,
#conversejs .hor_centered { #conversejs .hor_centered {
text-align: center; text-align: center;

View File

@ -1352,7 +1352,7 @@
text-align: center; text-align: center;
display: block; display: block;
margin: 0; margin: 0;
padding: 50% 0; } padding: 10% 0; }
#converse-embedded-chat .hor_centered, #converse-embedded-chat .hor_centered,
#conversejs .hor_centered { #conversejs .hor_centered {
text-align: center; text-align: center;

View File

@ -135,7 +135,7 @@
text-align: center; text-align: center;
display: block; display: block;
margin: 0; margin: 0;
padding: 50% 0; padding: 10% 0;
} }
.hor_centered { .hor_centered {
text-align: center; text-align: center;

View File

@ -15,7 +15,8 @@
"tpl!message", "tpl!message",
"tpl!help_message", "tpl!help_message",
"tpl!toolbar", "tpl!toolbar",
"tpl!avatar" "tpl!avatar",
"tpl!spinner"
], factory); ], factory);
}(this, function ( }(this, function (
converse, converse,
@ -25,7 +26,8 @@
tpl_message, tpl_message,
tpl_help_message, tpl_help_message,
tpl_toolbar, tpl_toolbar,
tpl_avatar tpl_avatar,
tpl_spinner
) { ) {
"use strict"; "use strict";
var $ = converse.env.jQuery, var $ = converse.env.jQuery,
@ -196,7 +198,7 @@
addSpinner: function () { addSpinner: function () {
if (_.isNull(this.el.querySelector('.spinner'))) { if (_.isNull(this.el.querySelector('.spinner'))) {
this.$content.prepend('<span class="spinner"/>'); this.$content.prepend(tpl_spinner);
} }
}, },
@ -385,7 +387,7 @@
}))); })));
} }
if (spinner === true) { if (spinner === true) {
this.$content.append('<span class="spinner"/>'); this.$content.append(tpl_spinner);
} else if (spinner === false) { } else if (spinner === false) {
this.$content.find('span.spinner').remove(); this.$content.find('span.spinner').remove();
} }

View File

@ -29,6 +29,7 @@
"tpl!room_description", "tpl!room_description",
"tpl!room_item", "tpl!room_item",
"tpl!room_panel", "tpl!room_panel",
"tpl!spinner",
"awesomplete", "awesomplete",
"converse-chatview" "converse-chatview"
], factory); ], factory);
@ -51,6 +52,7 @@
tpl_room_description, tpl_room_description,
tpl_room_item, tpl_room_item,
tpl_room_panel, tpl_room_panel,
tpl_spinner,
Awesomplete Awesomplete
) { ) {
@ -401,7 +403,7 @@
if (_.isNull(body)) { if (_.isNull(body)) {
return; // The message has no text return; // The message has no text
} }
if (this.isNewMessage(stanza) && this.newMessageWillBeHidden()) { if (utils.isNewMessage(stanza) && this.newMessageWillBeHidden()) {
this.save({'num_unread_general': this.get('num_unread_general') + 1}); this.save({'num_unread_general': this.get('num_unread_general') + 1});
if (this.isUserMentioned(body.textContent)) { if (this.isUserMentioned(body.textContent)) {
this.save({'num_unread': this.get('num_unread') + 1}); this.save({'num_unread': this.get('num_unread') + 1});
@ -1537,7 +1539,7 @@
nick_el.classList.remove('error'); nick_el.classList.remove('error');
} }
this.$el.find('.chatroom-form-container') this.$el.find('.chatroom-form-container')
.replaceWith('<span class="spinner centered"/>'); .replaceWith(tpl_spinner);
this.join(nick); this.join(nick);
}, },
@ -1651,7 +1653,7 @@
submitPassword: function (ev) { submitPassword: function (ev) {
ev.preventDefault(); ev.preventDefault();
var password = this.$el.find('.chatroom-form').find('input[type=password]').val(); var password = this.$el.find('.chatroom-form').find('input[type=password]').val();
this.$el.find('.chatroom-form-container').replaceWith('<span class="spinner centered"/>'); this.$el.find('.chatroom-form-container').replaceWith(tpl_spinner);
this.join(this.model.get('nick'), password); this.join(this.model.get('nick'), password);
}, },
@ -1895,7 +1897,7 @@
showSpinner: function () { showSpinner: function () {
this.$('.chatroom-body').children().addClass('hidden'); this.$('.chatroom-body').children().addClass('hidden');
this.$el.find('.chatroom-body').prepend('<span class="spinner centered"/>'); this.$el.find('.chatroom-body').prepend(tpl_spinner);
}, },
hideSpinner: function () { hideSpinner: function () {
@ -2503,7 +2505,7 @@
this.$el.find('input.new-chatroom-name').removeClass('error'); this.$el.find('input.new-chatroom-name').removeClass('error');
$server.removeClass('error'); $server.removeClass('error');
$available_chatrooms.empty(); $available_chatrooms.empty();
$('input#show-rooms').hide().after('<span class="spinner"/>'); $('input#show-rooms').hide().after(tpl_spinner);
this.model.save({muc_domain: server}); this.model.save({muc_domain: server});
this.updateRoomsList(); this.updateRoomsList();
}, },
@ -2564,7 +2566,7 @@
$div.remove(); $div.remove();
} else { } else {
$parent.find('span.spinner').remove(); $parent.find('span.spinner').remove();
$parent.append('<span class="spinner hor_centered"/>'); $parent.append(tpl_spinner);
_converse.connection.disco.info( _converse.connection.disco.info(
$(target).attr('data-room-jid'), null, _.partial(this.insertRoomInfo, $parent[0]) $(target).attr('data-room-jid'), null, _.partial(this.insertRoomInfo, $parent[0])
); );

View File

@ -16,6 +16,7 @@
"tpl!register_tab", "tpl!register_tab",
"tpl!registration_form", "tpl!registration_form",
"tpl!registration_request", "tpl!registration_request",
"tpl!spinner",
"converse-controlbox" "converse-controlbox"
], factory); ], factory);
}(this, function ( }(this, function (
@ -24,7 +25,9 @@
tpl_register_panel, tpl_register_panel,
tpl_register_tab, tpl_register_tab,
tpl_registration_form, tpl_registration_form,
tpl_registration_request) { tpl_registration_request,
tpl_spinner
) {
"use strict"; "use strict";
@ -316,7 +319,7 @@
_converse.connection.reset(); _converse.connection.reset();
that = this; that = this;
this.$('form').hide(function () { this.$('form').hide(function () {
$(this).replaceWith('<span class="spinner centered"/>'); $(this).replaceWith(tpl_spinner);
if (that.fields.password && that.fields.username) { if (that.fields.password && that.fields.username) {
// automatically log the user in // automatically log the user in
_converse.connection.connect( _converse.connection.connect(

View File

@ -0,0 +1 @@
<span class="spinner centered"/>