Skip to content

Commit

Permalink
loading animation on some buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@dtbaker
dtbaker committed Sep 10, 2015
1 parent 4718ff0 commit 7d205d7
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 26 deletions.
9 changes: 9 additions & 0 deletions assets/css/social.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,4 +449,13 @@ span.buyer_badge,
}
#shub_continuous_more{
text-align: center;
}
.linked_user_details li{
margin:0;
padding: 0;
}
.dtbaker_loading_button_current{
color:#CCC !important;
text-align: center;

}
95 changes: 92 additions & 3 deletions assets/js/social.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,13 @@ ucm.social = {
jQuery('.support_hub_date_field').datepicker({ dateFormat: 'yy-mm-dd' });
jQuery('.support_hub_time_field').timepicker();
jQuery('body').delegate('.shub_modal','click',function() {
ucm.social.open_modal(jQuery(this).attr('href'), jQuery(this).data('modaltitle'), jQuery(this).data());
return false;
var width = jQuery(window).width();
if(width > 782) {
// only show modal on desktop
ucm.social.open_modal(jQuery(this).attr('href'), jQuery(this).data('modaltitle'), jQuery(this).data());
return false;
}
return true;
}).delegate('.shub_request_extra', 'click', function(){
var $f = jQuery(this).parents('.message_edit_form').first();
// find out how far away this button is from the parent form
Expand All @@ -31,6 +36,13 @@ ucm.social = {
}
return false;
}).delegate('.shub_request_extra_generate', 'click', function(){
if(jQuery(this).hasClass('shub_button_loading')){
// we show some progress indicator
var loading_button = dtbaker_loading_button(this);
if(!loading_button){
return false;
}
}
var $f = jQuery(this).parents('.message_edit_form').first();
$f.find('.extra_details_message').text('');
// send a message with these extra details.
Expand Down Expand Up @@ -58,6 +70,11 @@ ucm.social = {
}else{
$f.find('.extra_details_message').text("Unknown error, please try again: "+r);
}
},
complete: function(){
if(typeof loading_button != 'undefined'){
loading_button.done();
}
}
});
return false;
Expand Down Expand Up @@ -110,6 +127,15 @@ ucm.social = {
return false;
}).delegate('.shub_send_message_reply_button','click',function(){
// send a message!

if(jQuery(this).hasClass('shub_button_loading')){
// we show some progress indicator
var loading_button = dtbaker_loading_button(this);
if(!loading_button){
return false;
}
}

var pt = jQuery(this).parents('.shub_message_reply_box').first();
var txt = pt.find('textarea');
var message = txt.val();
Expand Down Expand Up @@ -220,13 +246,29 @@ ucm.social = {
}else{
pt.html("Unknown error, please check logs or try reconnecting in settings. "+r);
}
},
complete: function(){
if(typeof loading_button != 'undefined'){
loading_button.done();
}
}
});
pt.html('Sending...');
pt.find('.shub_message_actions').hide();
}else{
if(typeof loading_button != 'undefined'){
loading_button.done();
}
}
return false;
}).delegate('.shub_message_action','click',function(){
if(jQuery(this).hasClass('shub_button_loading')){
// we show some progress indicator
var loading_button = dtbaker_loading_button(this);
if(!loading_button){
return false;
}
}
// action a message (archive / unarchive)
var post_data = {
action: 'support_hub_' + jQuery(this).data('action'),
Expand All @@ -246,6 +288,11 @@ ucm.social = {
dataType: 'script',
success: function(r){
ucm.social.close_modal();
},
complete: function(){
if(typeof loading_button != 'undefined'){
setTimeout(loading_button.done,2000);
}
}
});
return false;
Expand Down Expand Up @@ -436,4 +483,46 @@ ucm.social = {
}
}

};
};
function dtbaker_loading_button(btn){

var $button = jQuery(btn);
if($button.attr('disabled'))return false;
var existing_text = $button.text();
var existing_width = $button.outerWidth();
var loading_text = '⡀⡀⡀⡀⡀⡀⡀⡀⡀⡀⠄⠂⠁⠁⠂⠄';
var completed = false;

$button.css('width',existing_width);
$button.addClass('dtbaker_loading_button_current');
$button.text(loading_text);
$button.attr('disabled',true);

var anim_index = [0,1,2];

// animate the text indent
function moo() {
if (completed)return;
var current_text = '';
// increase each index up to the loading length
for(var i = 0; i < anim_index.length; i++){
anim_index[i] = anim_index[i]+1;
if(anim_index[i] >= loading_text.length)anim_index[i] = 0;
current_text += loading_text.charAt(anim_index[i]);
}
$button.text(current_text);
setTimeout(function(){ moo();},60);
}

moo();

return {
done: function(){
completed = true;
$button.text(existing_text);
$button.removeClass('dtbaker_loading_button_current');
$button.attr('disabled',false);
}
}

}
2 changes: 1 addition & 1 deletion classes/class-support-hub-extra.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ public static function form_request_extra($data=array()){
</ul>
<div class="extra_details_message"></div>
<p>
<a href="#" class="shub_request_extra_generate btn btn-primary btn-xs button"<?php foreach($data as $key=>$val){
<a href="#" class="shub_request_extra_generate btn btn-primary btn-xs button shub_button_loading"<?php foreach($data as $key=>$val){
echo ' data-'.$key.'="'.esc_attr($val).'"';
} ?>><?php _e( 'Generate Message' ); ?></a>
<a href="#" class="shub_request_extra btn btn-default btn-xs button"><?php _e( 'Cancel' ); ?></a>
Expand Down
14 changes: 7 additions & 7 deletions classes/class-support-hub-message.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,14 +422,14 @@ public function output_message_page($type='inline'){
<section class="message_sidebar">
<nav>
<?php if($this->get('shub_status') == _shub_MESSAGE_STATUS_ANSWERED){ ?>
<a href="#" class="shub_message_action btn btn-default btn-xs button"
<a href="#" class="shub_message_action btn btn-default btn-xs button shub_button_loading"
data-action="set-unanswered" data-post="<?php echo esc_attr(json_encode(array(
'network' => $this->network,
'shub_message_id' => $message_id,
'last_activity' => $this->get('last_active'),
)));?>"><?php _e( 'Inbox' ); ?></a>
<?php }else{ ?>
<a href="#" class="shub_message_action btn btn-default btn-xs button"
<a href="#" class="shub_message_action btn btn-default btn-xs button shub_button_loading"
data-action="set-answered" data-post="<?php echo esc_attr(json_encode(array(
'network' => $this->network,
'shub_message_id' => $message_id,
Expand All @@ -447,14 +447,14 @@ public function output_message_page($type='inline'){
<header>
<a href="<?php echo $this->get_link(); ?>" class="social_view_external btn btn-default btn-xs button" target="_blank"><?php _e( 'View Comment' ); ?></a>
<?php if($this->get('shub_status') == _shub_MESSAGE_STATUS_ANSWERED){ ?>
<a href="#" class="shub_message_action btn btn-default btn-xs button"
<a href="#" class="shub_message_action btn btn-default btn-xs button shub_button_loading"
data-action="set-unanswered" data-post="<?php echo esc_attr(json_encode(array(
'network' => $this->network,
'shub_message_id' => $message_id,
'last_activity' => $this->get('last_active'),
)));?>"><?php _e( 'Inbox' ); ?></a>
<?php }else{ ?>
<a href="#" class="shub_message_action btn btn-default btn-xs button"
<a href="#" class="shub_message_action btn btn-default btn-xs button shub_button_loading"
data-action="set-answered" data-post="<?php echo esc_attr(json_encode(array(
'network' => $this->network,
'shub_message_id' => $message_id,
Expand Down Expand Up @@ -527,7 +527,7 @@ public function output_message_page($type='inline'){
if(!empty($data['other_messages'])) {
?>
<div class="shub_other_messages">
<strong><?php echo sprintf(__('%d Other Messages:', 'shub'), count($data['other_messages'])); ?></strong><br/>
<strong><?php echo sprintf(_n('%d Other Message:', '%d Other Messages:', count($data['other_messages']), 'support_hub'), count($data['other_messages'])); ?></strong><br/>
<ul>
<?php
foreach ($data['other_messages'] as $other_message) {
Expand Down Expand Up @@ -556,7 +556,7 @@ public function output_message_page($type='inline'){
<?php echo $other_message['icon']; ?>
</span>
<br/>
<a href="#" class="shub_modal"
<a href="<?php echo esc_attr($other_message['link']); ?>" target="_blank" class="shub_modal"
data-network="<?php echo esc_attr($other_message['network']); ?>"
data-message_id="<?php echo (int)$other_message['message_id']; ?>"
data-message_comment_id="<?php echo isset($other_message['message_comment_id']) ? (int)$other_message['message_comment_id'] : ''; ?>"
Expand Down Expand Up @@ -728,7 +728,7 @@ public function output_message_list( $allow_reply = true ){
'message-id' => $message_id,
'network' => $this->network,
'last_activity' => $this->get('last_active'),
))); ?>" class="btn button shub_send_message_reply_button shub_hide_when_no_message"><?php _e('Send'); ?></button>
))); ?>" class="btn button shub_send_message_reply_button shub_hide_when_no_message shub_button_loading"><?php _e('Send'); ?></button>
</div
</div>
<div class="shub_message_actions shub_hide_when_no_message">
Expand Down
2 changes: 2 additions & 0 deletions classes/class-support-hub.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -994,6 +994,7 @@ public function get_message_user_summary($user_hints, $current_extension, $messa
foreach ($messages as $message) {
if (!isset($other_messages[$message['shub_message_id']])) {
$other_messages[$message['shub_message_id']] = array(
'link' => '?page=support_hub_main&network='.$message['shub_extension'].'&message_id='.$message['shub_message_id'],
'summary' => $message['title'],
'time' => $message['last_active'],
'network' => $message['shub_extension'],
Expand Down Expand Up @@ -1021,6 +1022,7 @@ public function get_message_user_summary($user_hints, $current_extension, $messa
foreach ($comments as $comment) {
if (!isset($other_messages[$comment['shub_message_id']])) {
$other_messages[$comment['shub_message_id']] = array(
'link' => '?page=support_hub_main&network='.$comment['shub_extension'].'&message_id='.$comment['shub_message_id'].'&message_comment_id='.$comment['shub_message_comment_id'],
'summary' => $comment['message_text'],
'time' => $comment['time'],
'network' => $comment['shub_extension'],
Expand Down
38 changes: 23 additions & 15 deletions pages/message.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,32 @@
<?php _e('Support Hub Message','support_hub');?>
</h2>

<?php

// output same content that should be displayed in our modal popup.
$network = isset($_GET['network']) ? $_GET['network'] : false;
$message_id = isset($_GET['message_id']) ? (int)$_GET['message_id'] : false;
if($network && isset($this->message_managers[$network]) && $message_id > 0){
$shub_extension_message = $this->message_managers[$network]->get_message( false, false, $message_id);
if($shub_extension_message->get('shub_'.$network.'_message_id') == $message_id){
extract(array(
"shub_{$network}_id" => $shub_extension_message->get($network.'_account')->get('shub_'.$network.'_id'),
"shub_{$network}_message_id" => $message_id
));
include( trailingslashit( SupportHub::getInstance()->dir ) . 'extensions/'.$network.'/'.$network.'_message.php');
<div id="shub_table_inline">
<div id="shub_table_contents">
<?php
// output same content that should be displayed in our modal popup.
$network = isset($_GET['network']) ? $_GET['network'] : false;
$shub_message_id = isset($_GET['message_id']) ? (int)$_GET['message_id'] : false;
if($network && isset($this->message_managers[$network]) && $shub_message_id > 0){
$shub_extension_message = $this->message_managers[$network]->get_message( false, false, $shub_message_id);
if($shub_extension_message->get('shub_message_id') == $shub_message_id){
$shub_account_id = $shub_extension_message->get('account')->get('shub_account_id');
include( trailingslashit( SupportHub::getInstance()->dir ) . 'extensions/'.$network.'/'.$network.'_message.php');
}
}
}
?>
</div>
</div>


?>
<script type="text/javascript">
jQuery(function () {
ucm.social.init();
<?php foreach($this->message_managers as $message_id => $message_manager){
$message_manager->init_js();
} ?>
});
</script>


</div>

0 comments on commit 7d205d7

Please sign in to comment.