Главная JavaScript

Скрипт предпросмотра в новом интерфейсе Twitter’а

В конце сентября мне наконец-то стал доступен новый интерфейс Твиттера. Надо сказать, что я пересмотрел множество твиттер-клиентов, но не один меня так и не устроил, поэтому я всегда пользовался и продолжаю пользоваться веб-интерфейсом «чирикалки».

А новый интерфейс только подтвердил мою позицию — он мне настолько сильно пришелся по душе, что я теперь просто уверен, что уже не найду программу, которая по дизайну и удобству заменит мне веб-интерфейс Твиттера. Тем более, что я теперь посадил его в отдельную «сжатую» вкладку своего браузера (что позволяет сделать используемый мною скин), и Твиттер теперь всегда открыт и в то же время не мешает.

Ладно, это было небольшое отступление. Теперь к сути.

Ранее я выкладывал общественности свой jQuery-скрипт для предпросмотра твитов. Данным постом, соответственно, делюсь таким же скриптом к новому интерфейсу.

Предпросмотр в Twitter

Что делает скрипт

  • Собственно, реализует предпросмотр твита. Тут есть одна особенность. В новом интерфейсе Твиттера все основное содержимое страницы формируется динамически (т.е. html-код контента в исходнике страницы просто-напросто отсутствует), поэтому, чтобы мой скрипт работал в принципе, пришлось использовать событие .live ('focus' …), т. е. скрипт начинает работать только тогда, когда ставится курсор в поле ввода твита.
  • Рядом с кнопкой «Tweet» добавляет кнопку «Clear» для очистки поля для твита.
  • Корректирует высоту текстового поля, чтобы вертикальная прокрутка не появлялась.
  • Добавляет ссылку «RT» для создания ретвита старого типа.

Как работает скрипт

Скрипт работает, как и любой другой UserJS-скрипт, который подключается в браузере (возможность подключения UserJS зависит от браузера). Информацию о том, как подключать такие скрипты, можно найти на сайте userscripts.ru или в Гугле.

Единственная особенность моего скрипта — он написан на jQuery. Сам фреймворк к нему тоже прилагается.

Скачать

Скрипт предпросмотра твита в новом интерфейсе Twitter’а (Twitter.com Preview jQuery Script)

Загрузок: 513 | Размер: 29 Кб

Установка

  1. Закинуть в оба файла из архива в папку с вашими UserJS.
  2. В файле twitter.com.js изменить имя профиля на свой. Соответствующий комментарий там написан.
  3. Все. Можно пользоваться.

P.S. Хотел бы узнать у спецов по jQuery — есть ли возможность в данном случае обойтись без использования .live ('focus' …), т. е. чтобы скрипт начинал работать после загрузки всей страницы, а не после получения фокуса текстовым полем?

Комментарии (11)

  1. Один вопрос — Зачем?

  2. а как его в greasemonkey подключить?

  3. Насчет работы после загрузки страницы. Полагаю, проблема в том, что это именно пользовательский скрипт, и работает «в песочнице».

    Так вот, что если динамически добавлять к документу стандартный сценарий? Т. е. чтобы пользовательский скрипт не сам добавлял новый функционал на onfocus, а вместо этого добавлял бы в код страницы другой сценарий, который и реализует необходимый функционал.

    Помню, когда я писал пользовательские сценарии для Оперы, очень огорчило то, что из них не видны библиотеки, уже подключенные к странице.

    • Полагаю, проблема в том, что это именно пользовательский скрипт, и работает «в песочнице».

      Что значит «в песочнице»?

      Так вот, что если динамически добавлять к документу стандартный сценарий? Т. е. чтобы пользовательский скрипт не сам добавлял новый функционал на onfocus, а вместо этого добавлял бы в код страницы другой сценарий, который и реализует необходимый функционал.

      Можно пример?

  4. 22 строку
    $.getJSON ('http://api.twitter.com/1/users/show.json?screen_name=Dimox_ru&callback=?', function (data) {

    надо заменить на
    $.getJSON ('http://api.twitter.com/1/users/show.json?screen_name='+user+'&callback=?', function (data) {

  5. С радостью начал использовать ваш скрипт.

    Однако,

    $.getJSON('http://api.twitter.com/1/users/show.json?screen_name=Dimox_ru&callback=?', function(data) {
    	$('div.preview span.tweet-full-name').text(' ' + data.name);
    });

    Этот код добавляет ваше полное имя.

    $.getJSON('http://api.twitter.com/1/users/show.json?screen_name='+user+'&callback=?', function(data) {
    	$('div.preview span.tweet-full-name').text(' ' + data.name);
    });

    Думаю такой вариант будет более правилен, если только вы не сделали это намеренно.

  6. только начал разбираться со скриптами, так как в последнее время возникла в этом серьезная нужда. статья уже дала некоторые мысли для развития. Благодарю