User:Monster Domosed/common.js: Difference between revisions

Jump to navigation Jump to search
No edit summary
No edit summary
Line 30: Line 30:


   function renderWidget($root, items) {
   function renderWidget($root, items) {
     var $container = $('<div class="recent-edits-container"></div>');
     var $list = $('<ul class="vector-menu-content-list recent-changes-list"></ul>');
    var $list = $('<ol class="recent-edits-list"></ol>');


     items.forEach(function (item) {
     items.forEach(function (item, index) {
       var $li = $('<li class="recent-edits-item"></li>');
       var id = 'n-change' + (index + 1);


       var $title = $('<a class="recent-edits-title"></a>')
       var $li = $('<li class="mw-list-item recent-changes-item"></li>')
        .attr('id', id);
 
      var $link = $('<a class="recent-changes-link"></a>')
         .attr('href', mw.util.getUrl(item.title))
         .attr('href', mw.util.getUrl(item.title))
         .text(item.title);
         .attr(
 
           'title',
      var $user;
           (item.user || 'Unknown') + ' ' + formatRelativeTime(item.timestamp)
 
         );
      if (item.user) {
        $user = $('<a class="recent-edits-user"></a>')
           .attr('href', mw.util.getUrl('Special:Contributions/' + item.user))
           .text(item.user);
      } else {
        $user = $('<span class="recent-edits-user"></span>')
          .text('Unknown');
      }
 
      var $time = $('<time class="recent-edits-time"></time>')
        .attr('datetime', new Date(item.timestamp).toISOString())
         .text(formatRelativeTime(item.timestamp));


       var $meta = $('<div class="recent-edits-meta"></div>')
       $link.append(
        .append($time)
        $('<span></span>').text(item.title)
        .append(document.createTextNode(' · '))
      );
        .append($user);


       $li.append($title).append($meta);
       $li.append($link);
       $list.append($li);
       $list.append($li);
     });
     });


     var $footer = $('<div class="recent-edits-footer"></div>');
    // Add "Show more..." as the last item in the same list
     var $moreLi = $('<li class="mw-list-item recent-changes-item"></li>')
      .attr('id', 'n-change-more');


     var $moreBtn = $('<a class="recent-edits-more" role="button"></a>')
     var $moreLink = $('<a class="recent-changes-link"></a>')
       .attr('href', mw.util.getUrl('Special:RecentChanges'))
       .attr('href', mw.util.getUrl('Special:RecentChanges'))
       .text('Show more...');
       .attr('title', 'View full recent changes')
      .append($('<span></span>').text('Show more...'));


     $footer.append($moreBtn);
     $moreLi.append($moreLink);
    $list.append($moreLi);


    $container.append($list).append($footer);
     $root.empty().append($list);
     $root.empty().append($container);
   }
   }


   function loadRecentEdits($root) {
   function loadRecentEdits($root) {
     var limit = parseInt($root.data('limit'), 10) || 4;
     var limit = parseInt($root.data('limit'), 10) || 5;


     return new mw.Api().get({
     return new mw.Api().get({
Line 98: Line 90:
       function () {
       function () {
         $root.html(
         $root.html(
           '<div class="recent-edits-error">Could not load recent edits.</div>'
           '<div class="recent-changes-error">Could not load recent changes.</div>'
         );
         );
       }
       }
Line 108: Line 100:


     $root.html(
     $root.html(
       '<div class="recent-edits-loading">Loading recent edits…</div>'
       '<div class="recent-changes-loading">Loading recent changes…</div>'
     );
     );


Line 120: Line 112:


   function injectSidebarWidget() {
   function injectSidebarWidget() {
     if ($('#p-recent-edits').length) {
     if ($('#p-recent-changes').length) {
       return $('#p-recent-edits .recent-edits-widget');
       return $('#p-recent-changes .recent-changes-widget');
     }
     }


     var $portlet = $(
     var $portlet = $(
       '<nav id="p-recent-edits" class="mw-portlet mw-portlet-recent-edits vector-menu-portal portal vector-menu" aria-labelledby="p-recent-edits-label">' +
       '<nav id="p-recent-changes" class="mw-portlet mw-portlet-recent-changes vector-menu-portal portal vector-menu" aria-labelledby="p-recent-changes-label">' +
         '<h3 id="p-recent-edits-label" class="vector-menu-heading">' +
         '<h3 id="p-recent-changes-label" class="vector-menu-heading">' +
           '<span class="vector-menu-heading-label">Recent Changes</span>' +
           '<span class="vector-menu-heading-label">Recent Changes</span>' +
         '</h3>' +
         '</h3>' +
         '<div class="vector-menu-content">' +
         '<div class="vector-menu-content">' +
           '<div class="recent-edits-widget" data-limit="5" data-refresh="300000"></div>' +
           '<div class="recent-changes-widget" data-limit="5" data-refresh="300000"></div>' +
         '</div>' +
         '</div>' +
       '</nav>'
       '</nav>'
     );
     );


    // Insert where you want in the sidebar
     if ($('#p-Community').length) {
     if ($('#p-Community').length) {
       $('#p-Community').after($portlet);
       $('#p-Community').after($portlet);
Line 143: Line 136:
     }
     }


     return $portlet.find('.recent-edits-widget');
     return $portlet.find('.recent-changes-widget');
   }
   }


   $(function () {
   $(function () {
     var $widget = $('.recent-edits-widget');
     var $widget = $('.recent-changes-widget');


     if (!$widget.length) {
     if (!$widget.length) {