Telegraph/views/webmention-send.php

<?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>