| <?php $this->layout('layout-loggedin', ['title' => $title, 'accounts' => $accounts, 'user' => $user]); ?> | |
|  | |
| <div class="ui main text container" style="margin-top: 80px; margin-bottom: 40px;"> | |
|  | |
|   <h2>Send Webmentions</h2> | |
|  | |
|   Source URL: <a href="<?= $url ?>" target="_blank"><?= $url ?></a> | |
|  | |
|   <table class="ui very basic fixed single line unstackable table" id="send-table"> | |
|     <thead> | |
|       <th class="twelve wide">URL</th> | |
|       <th class="four wide">Status</th> | |
|     </thead> | |
|     <tbody> | |
|       <tr><td colspan="2">Looking for URLs...</td></tr> | |
|     </tbody> | |
|   </table> | |
|  | |
| </div> | |
| <script> | |
| var source_url = "<?= $url ?>"; | |
| var token = "<?= $role->token ?>"; | |
|  | |
| $(function(){ | |
|   $.post('/dashboard/get_outgoing_links.json', { | |
|     url: source_url | |
|   }, function(data) { | |
|     if(data.links.length == 0) { | |
|       $("#send-table tbody tr:first td").html('<div class="ui message">No links were found from the given URL. Make sure your post is marked up with <a href="https://indieweb.org/h-entry">h-entry</a> and contains some links.</div>'); | |
|       $("#send-table").removeClass("fixed").removeClass("single").removeClass("line"); | |
|       return; | |
|     } | |
|  | |
|     $("#send-table tbody").html('<tr><td colspan="2"></td></tr>'); | |
|     for(var i in data.links) { | |
|       $("#send-table tr:last").after('<tr data-url="'+data.links[i]+'">' | |
|           +'<td class="target-url">' | |
|             +'<div class="popup" data-content="'+data.links[i]+'"><span>'+data.links[i]+'<span></div>' | |
|           +'</td>' | |
|           +'<td class="send">' | |
|             +'<div class="ui active mini inline loader"></div>' | |
|           +'</td>' | |
|         +'</tr>'); | |
|     } | |
|  | |
|     $("#send-table tbody tr:first").remove(); | |
|  | |
|     // Enable popup on any values that overflowed the container | |
|     $(".popup").each(function(i,el){ | |
|       if($(el).children("span").width() > $(el).width()) { | |
|         $(el).popup(); | |
|       } | |
|     }); | |
|  | |
|     // Check for a webmention or pingback endpoint | |
|     $("#send-table tr").each(function(i,el){ | |
|       discover_endpoint(el, false); | |
|     }); | |
|  | |
|   }); | |
| }); | |
|  | |
| function discover_endpoint(row, ignore_cache) { | |
|   $.post("/dashboard/discover_endpoint.json", { | |
|     target: $(row).data("url"), | |
|     ignore_cache: ignore_cache | |
|   }, function(data){ | |
|     var html; | |
|     if(data.status == 'none') { | |
|       html = '<div class="ui yellow horizontal label">No endpoint found</div><br><button class="send-button check-again ui button">Check Again</button>'; | |
|     } else if(data.status == 'webmention') { | |
|       html = '<button class="send-button send-now ui primary button">Send Webmention</button>'; | |
|     } else if(data.status == 'pingback') { | |
|       html = '<button class="send-button send-now ui primary button">Send Pingback</button>'; | |
|     } | |
|     $(row).children(".send").html(html); | |
|     bind_send_buttons(); | |
|   }); | |
| } | |
|  | |
| function bind_send_buttons() { | |
|   $(".send-button").unbind("click"); | |
|   $(".check-again").bind("click", function(){ | |
|     var row = $(this).parents("tr"); | |
|     $(row).find(".send-button").addClass('loading'); | |
|     discover_endpoint(row, true); | |
|   }); | |
|   $(".send-now").bind("click", function(){ | |
|     var row = $(this).parents("tr"); | |
|     $(row).find(".send-button").addClass('loading'); | |
|     // Send to the API | |
|     $.post("/webmention", { | |
|       token: token, | |
|       source: source_url, | |
|       target: $(row).data("url") | |
|     }, function(data){ | |
|       $(row).find(".send-button").removeClass('loading'); | |
|       if(data.status == 'queued') { | |
|         $(row).find(".send").html('<a href="'+data.location+'/details" data-status="'+data.location+'"><i class="circular inverted orange wait icon"></i></a>'); | |
|         // TODO: check for status updates on a timer | |
|       } else { | |
|         $(row).find(".send").html('<i class="circular inverted red x icon"></i>'); | |
|       } | |
|     }); | |
|   }); | |
| } | |
|  | |
| </script> | |
| <style type="text/css"> | |
| .popup { | |
|   word-wrap: break-word; | |
| } | |
| #send-table tbody tr { | |
|   height: 83px; | |
| } | |
| </style>
 |