WordPress.org
Get WordPress

Plugin Directory

Changeset 1842954


Ignore:
Timestamp:
03/19/2018 05:05:01 PM (8 years ago)
Author:
canvasflow
Message:

Add loading icon when publishing an article in metabox

Location:
canvasflow/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • canvasflow/trunk/README.md

    r1841508 r1842954  
    6666
    6767#### Changelog
     68##### 0.12.3
     69* Add loading icon when publishing an article in metabox
     70
    6871##### 0.12.2
    6972* Replace alert message with html message
    … …  
    116119
    117120#### Upgrade Notice
     121##### 0.12.3
     122* Add loading icon when publishing an article in metabox
     123
    118124##### 0.12.2
    119125* Replace alert message with html message

  • canvasflow/trunk/assets/css/style.css

    r1841508 r1842954  
    120120    color: #FF530D;
    121121}
     122
     123.meta-box-alert-processing {
     124    display: block;
     125    color: #3498db;
     126}
     127
     128.loader {
     129    border: 3px solid #f3f3f3; /* Light grey */
     130    border-top: 3px solid #3498db; /* Blue */
     131    border-radius: 50%;
     132    width: 13px;
     133    height: 13px;
     134    animation: spin 1s linear infinite;
     135}
     136
     137@keyframes spin {
     138    0% { transform: rotate(0deg); }
     139    100% { transform: rotate(360deg); }
     140}

  • canvasflow/trunk/canvasflow-plugin.php

    r1841508 r1842954  
    33  Plugin Name: Canvasflow for WordPress
    44  Description: This out-of-the-box connector provides a quick and simple way to push your blog content directly to an existing Canvasflow publication.
    5   Version: 0.12.2
     5  Version: 0.12.3
    66    Developer:  Canvasflow
    77    Developer URI: https://canvasflow.io

  • canvasflow/trunk/includes/views/canvasflow-metabox-view.php

    r1841508 r1842954  
    7979                    <?php echo $post_state_content?>
    8080                </td>
    81                 <div id="cf-alert" class="meta-box-alert"></div>
     81                <div id="cf-alert" class="meta-box-alert"> </div>
    8282            </tr>
    8383        <?php
    … …  
    109109        });
    110110
     111        loadProcess();
     112
    111113        request.done(function (response, textStatus, xhr){
    112114            var status = xhr.status;
    113             let currentClass = $('#cf_state').attr('class');
    114             $("#cf_state").removeClass(currentClass);
    115             $("#cf_state").addClass('meta-box-post-state-in-sync');
    116             $("#cf_state").html("In Sync");           
    117 
    118             let alertClass = $('#cf-alert').attr('class');
    119             $("#cf-alert").removeClass(alertClass);
    120             $("#cf-alert").addClass('meta-box-alert meta-box-alert-success');
    121             $("#cf-alert").html("&#10004; Success");
     115            successOnPublish();
    122116        });
    123117
    124118        // Callback handler that will be called on failure
    125119        request.fail(function (jqXHR, textStatus, errorThrown){
    126             // Log the error to the console
    127             let alertClass = $('#cf-alert').attr('class');
    128             $("#cf-alert").removeClass(alertClass);
    129             $("#cf-alert").addClass('meta-box-alert meta-box-alert-error');
    130             $("#cf-alert").html("&#215; Fail");
    131             console.error(
    132                 "The following error occurred: "+
    133                 textStatus, errorThrown
    134             );
     120            errorOnPublish(textStatus, errorThrown);
    135121        });
    136122    });
     123
     124    function loadProcess() {
     125        let currentClass = $('#cf-alert').attr('class');
     126        $("#cf-alert").removeClass(currentClass);
     127        $("#cf-alert").addClass('meta-box-alert meta-box-alert-processing');
     128        $("#cf-alert").html('<div class="loader"></div>');   
     129
     130        $("#cf_publish").html('Processing');
     131    }
     132
     133    function successOnPublish() {
     134        $("#cf_publish").html('Publish to Canvasflow');
     135
     136        let currentClass = $('#cf_state').attr('class');
     137        $("#cf_state").removeClass(currentClass);
     138        $("#cf_state").addClass('meta-box-post-state-in-sync');
     139        $("#cf_state").html("In Sync");           
     140
     141        let alertClass = $('#cf-alert').attr('class');
     142        $("#cf-alert").removeClass(alertClass);
     143        $("#cf-alert").addClass('meta-box-alert meta-box-alert-success');
     144        $("#cf-alert").html("&#10004; Success");
     145    }
     146
     147    function errorOnPublish(textStatus, errorThrown) {
     148        $("#cf_publish").html('Publish to Canvasflow');
     149
     150        // Log the error to the console
     151        let alertClass = $('#cf-alert').attr('class');
     152        $("#cf-alert").removeClass(alertClass);
     153        $("#cf-alert").addClass('meta-box-alert meta-box-alert-error');
     154        $("#cf-alert").html("&#215; Fail");
     155        console.error(
     156            "The following error occurred: "+
     157            textStatus, errorThrown
     158        );
     159    }
    137160</script>

  • canvasflow/trunk/readme.txt

    r1841508 r1842954  
    7474
    7575== Changelog ==
     76= 0.12.3 =
     77* Add loading icon when publishing an article in metabox
     78
    7679= 0.12.2 =
    7780* Replace alert message with html message
    … …  
    123126
    124127
    125 == Upgrade Notice ==3
     128== Upgrade Notice ==
     129= 0.12.3 =
     130* Add loading icon when publishing an article in metabox
     131
    126132= 0.12.2 =
    127133* Replace alert message with html message
Note: See TracChangeset for help on using the changeset viewer.