Блог

JScript в большинстве случаев занимает мою голову, но плохо спроектированные сайты делают это еще больше. Foursquare является одним из таких примеров в отношении своих суперпользователей.

Желаемый результат

Скрипт greasemonkey, который будет просматривать каждое вхождение класса DIV SearchResult, и после имени класса DIV добавит два новых элемента A HREF, похожих на эти:

 <a href="/venue/venueid/edit">Manage venue</a> <a href="/edit_venue?vid=venueid">Edit venue</a>
  

Сценарий

Я хотел бы немного облегчить жизнь их суперпользователям, используя Greasemonkey. Цель состоит в том, чтобы изменить определенную страницу на сайте (https://foursquare.com/search ), и добавьте ряд дополнительных ссылок для перехода непосредственно на определенные страницы для места проведения, что ускорит рабочий процесс.

Я искал примеры того, как это сделать (изучите с помощью обратного проектирования), но я застрял на том, должен ли я использовать RegEx или что-то еще.

Пример

На странице результатов поиска (https://foursquare.com/search ?q=dumpamp;near=Perth, Australia), возвращается список мест проведения. Код для каждого места, возвращаемого в результатах поиска, выглядит точно так:

 <div class="searchResult">
            <div class="icon"><img src="https://4sqstatic.s3.amazonaws.com/img/categories/parks_outdoors/default-29db364ef4ee480073b12481a294b128.png" class="thumb" /></div>
            <div class="info">
              <div class="name"><a href="/venue/4884313">Staff Smoking Spot / Dumpster Dock</a></div>
              <div class="address"><span class="adr"></span></div>

              <div class="specialoffer"></div>

            </div>

            <div class="extra">
              <div class="extra-tip"><div><a href="/venue/4884313">0 tips</a></div></div>
              <div class="extra-checkins"><div>10 check-ins</div></div>
            </div>
          </div>
  

Пока работает

Оглядываясь в поисках ответов, вот что я придумал (ниже). Излишне говорить, что он вообще не определяет, куда ему нужно вставить элементы A HREF, и не выполняет цикл по всем выводимым на странице элементам SearchResult, не говоря уже о правильном построении ссылки.

 // First version
var elmNewContent = document.createElement('a');
elmNewContent.href = sCurrentHost;
elmNewContent.target = "_blank";
elmNewContent.appendChild(document.createTextNode('edit venue'));
var elmName = document.getElementById('name');
elmName.parentNode.insertBefore(elmNewContent, elmName.nextSibling);
  

Это довольно просто с помощью jQuery.
Вот весь скрипт, поскольку это была 5-минутная работа…

 // ==UserScript==
// @name     _Square away foursquare
// @include  http://foursquare.com/*
// @include  https://foursquare.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

var SearchRezLinks  = $("div.searchResult div.name > a");

/*--- Link is like: <a href="/venue/6868983">Dumpling King</a>
    where 6868983 is venue ID.

    Want to add: <a href="/venue/venueid/edit">Manage venue</a>
    <a href="/edit_venue?vid=venueid">Edit venue</a>
*/
SearchRezLinks.each ( function () {

    var jThis       = $(this);
    var venueID     = jThis.attr ('href').replace (/D (d )$/, '$1');
    jThis.parent ().append ('<a href="/venue/'   venueID   '/edit">Manage venue</a>');
    jThis.parent ().append ('<a href="/edit_venue?vid='   venueID   '">Edit venue</a>');
} );

GM_addStyle ( "                                 
    div.searchResult div.name > a   a {         
        font-size:      0.7em;                  
        margin-left:    2em;                    
    }                                           
" );