Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

English version en

JavaScript позволяющий добавить всплывающие подсказки с информацией по космическим кораблям вселенной Star Citizen на любой сайт или форум.

демонстрация как подключить параметры примеры API JSON

Пример с кодом http://jsfiddle.net/68220dpw/1/

Описание

  • Данный скрипт работает на стороне клиентского браузера (как и любой JS) и не нагружает сервер сайта;
  • Требуется подключенная JS библиотека Jquery;
  • Скрипт может быть использован на любом сайте или форуме написанном на любом движке;
  • Обновления базы скрипта производится автоматически, поэтому используйте ссылку на оригинальный скрипт не загружая его к себе на сайт;
  • Скрипт может выделять названия кораблей особым стилем (который может быть задан отдельно), добавлять различные обрамляющие символы (например квадратные скобки);
  • Поиск по названиям может осуществляться как во всем тексте (помещенном в определенном теге), так и между особых тегов которые могут быть заданы произвольно (как пример ими могут быть квадратные скобки (типа [название корабля]) или целые блоки типа [ship]здесь название корабля[/ship]
  • Скрипт начинает кешировать изображения кораблей для всплывающих подсказок сразу после нахождения корабля, для того что бы при наведении курсора изображение было уже подгружено. При условии, что в опциях не отключено отображение изображений;
  • Вы можете изменить дефолтный стиль всплывающего блока на свой;
  • Скрипт существует в двух версиях для английских названий кораблей и для англо-русских. Английская версия скрипта содержит 1\3 от объема англо-русской базы названий;
  • Скрипт ищет только названия космических кораблей в именительном падеже (прим. "Хорнет Трекер" или "Hornet Ghost"). При этом названия порой могут быть сокращены до "Ghost" для некоторых кораблей. Типы сокращений вводятся на усмотрение автора скрипта;
  • Если на маленьком экране или в маленьком окне не удается вывести всплывающую подсказку, то скрипт автоматически перенаправит браузер на страницу с полным описание корабля;
  • Если осуществляется клик по ссылке космического корабля на сайте StarMon, то скрипт автоматически перейдет на соответствующую вкладку и откроет необходимое описание выбранного корабля.

 Демонстрация:

Наведите курсор на название "Sabre" или "Сабля" в примере ниже.

Текст содержит в себе название космических кораблей Sabre (Сабля) и Hornet Tracker (Хорнет Трекер) из вселенной Star Citizen. Так же можно упомянуть упомянуть Эндевор и Чёрный катлас.

Sabre!!!

В примере выше, скрипт был подключен для данной конкретной статьи и конкретного блока в ней (прямо в теле статьи), при этом на другой странице или в иной статье этого сайта, скрипт не будет заменять названия, подгружаться и отрабатыавать.

 

Как подключить

1) Убедиться, что ваш сайт уже использует Jquery, если нет, то это всего лишь еще одна добавляемая строка.
2) Нужно определиться какую версию скрипта Вы хотите использовать, английскую или англо-русскую (англо-русская содержит базу в 3 раза большего объема, в связи с различными написаниями английских названий).
3) Прописать в теле тега <head> вашего сайта строку с путем на последнюю релизную версию скрипта (на момент написания это версия 1.0.3)

англо-русская версия: 

<script src="http://starmon.shin0by.com/js/builds/jquery.starmon-db-ru_1.0.3.js" type="text/javascript"></script>

английская версия:

<script src="http://starmon.shin0by.com/js/builds/jquery.starmon-db-en_1.0.3.js" type="text/javascript"></script>

Примечание:
Рекомендуется добавить какой либо префикс к пути скрипта, что бы он не кэшировался. Как вариант строка на PhP может выглядеть вот так (для англо-русской версии):

//Пример на PhP:
echo '<script src="http://starmon.shin0by.com/js/builds/jquery.starmon-db-ru_beta.js?pref='.time().'" type="text/javascript"></script>';

//Пример на PhP:
<script src="http://starmon.shin0by.com/js/builds/jquery.starmon-db-ru_1.0.js<?php echo '?pref='.time(); ?>" type="text/javascript"></script>

В примерах выше к строке-ссылке на скрипт добавляется текущее время - это делает строку уникальной и не позволяет браузеру кэшировать скрипт.

4) Добавить вызов функции скрипта:

starMon_hoverBase("selector");

Выше приведен пример в котором необходимо заменить параметр "selector" на класс, идентификатор или иной селектор тэга (Jquery), в котором скрипт должен будет осуществлять поиск. Для данного сайта этот селектор мог бы быть ".article_body".

5) По умолчанию и английская и англо-русская версия использует английский язык для текста всплывающих подсказок, для установки требуемого языка используется второй параметр:

starMon_hoverBase("selector","ru");

Параметр принимает значения "ru" или "en".

Полный список параметров с разъяснениями:

starMon_hoverBase(myCollection, myLang, myImage, myTextClass, myHoverClass, myTextTag, myFastMode);

 myCollection  принимает селекторы классов, id, и прочиее в формате Jquery;
единственный обязательный параметр
тип "строчный"

 myLang  задает язык всплывающей подсказки и язык страницы на которую будет осуществлен переход при клике на ссылку;
тип "строчный"
принимает значение "ru" или "en"
по умолчанию "en"

 myImage  отображать или не отображать картинку корабля во всплывающей подсказке;
тип "строчный"
принимает значение "0" или "1" где "1" означает - отображать
по умолчанию "1"

 myTextClass  добавляет к найденному в тексте названию указанный в этом параметре класс. Используется для присвоение собственных стилей (Смотрите разъяснение в конце статьи);
тип "строчный"
принимает любое значение классов
по умолчанию "starmon-text", на этот класс SPANa в HTML документ автоматически добавляются стили

 myHoverClass  добавляет к корневому тегу всплывающей подсказки указанный в этом параметре класс. Используется для присвоение собственных стилей для блока всплывающей подсказки (Смотрите разъяснение в конце статьи);
тип "строчный"
принимает любое значение классов
по умолчанию "starmon-hover", на этот класс DIVa в HTML документ автоматически добавляются стили

 myTextTag  Пять элементов массива задающие стиль искомых слов и стиль найденных слов(Смотрите примеры в конце статьи)
Первые два элемента массива используются для задания параметров поиска, например можно задать искать текст только в тэгах [ship][/ship] или просто в скобках, кавычках или иных элементах. Для сложных условий используются регулярные выражения. Обязательно задание экранирования параметров (иногда двойное).
Вторые два элемента массива используется для обрамления (скобками, кавычками, тегами) или иного изменения найденных слов на уровне текста;
Пятый элемент получает $1 из регулярного выражения, может потребоваться особо фанатичным людям;
тип "массив" со строчными выражениями
принимает текст или регулярные выражения
по умолчанию ['(([\^A-Za-zА-ЯЁа-яё]|\\b))(',')(?=([\^A-Za-zА-ЯЁа-яё]|\\b))','','','$1'] регулярные выражения

 myFastMode  Задает использование быстрого режима замены. При этом каждое название каждого корабля будет найдено и заменено только 1 раз на всей странице. Так например для текста "начало текста Super hornet, Sabre, Сабля и Sabre конец текста" - второе, выделенное, найденное название заменено не будет, но Sabre и Сабля подпадают под замену так как встречаются оба первый раз, хоть и подразумевают один и тот же корабль;
тип "строчный"
принимает значение "0" или "1"
по умолчанию "0"

Примеры и разъяснения

myTextClass  и  myHoverClass

Если параметры  myTextClass  и  myHoverClass  заданы оба, то скрипт не добавит в HTML документ собственные стили.
Если задан только один из параметров, то стили будут добавлены (для не заданного параметра), но заданный Вами параметр будет использовать указанный стиль. В связи с этим, всплывающая подсказка может не отображаться, она работает, но ей требуется, что бы в Вы в указанном стиле присвоили свойства display:none; и position: absolute; для скрытия при загрузке и свободного позиционирования на экране соответственно.

myTextTag

Массив состоящий из 5 параметров. Задается в квадратных скобках следующим образом: ["параметр 1", "параметр 2", "параметр 3", "параметр 4", "параметр 5"]. Все параметры принимают регулярные выражения, при этом в 5ый параметр возвращается "$1" и его задавать не требуется, но при желании Вы можете навязать ему пустое значение заменив возвращаемое $1 (ценителям регулярных выражений посвящается). Не забывайте использовать наклонную черту для экранирования специальных символов.

Примеры для myTextTag

Будет искать только названия кораблей в круглых скобках: 

starMon_hoverBase(".special_starmon_tag", "ru", "","","",["\\(","\\)","","",""]);

Будет искать любые названия кораблей беря их в квадратные скобки: 

starMon_hoverBase(".special_starmon_tag", "ru", "","","",["","","\[","\]",""]);

Будет искать только названия кораблей в круглых скобках и брать их в кавычки: 

starMon_hoverBase(".special_starmon_tag", "ru", "","","",["\\(","\\)","\"","\"",""]);

Будет искать только названия кораблей между тегами [ship] и [/ship] и брать их в круглые скобки: 

starMon_hoverBase(".special_starmon_tag", "ru", "","","",["\\[ship\\]","\\[\/ship\\]","\(","\)",""]);

Будет искать только названия кораблей в круглых скобках и оставлять их в круглых скобках: 

starMon_hoverBase(".special_starmon_tag", "ru", "","","",["\\(","\\)","\(","\)",""]);

 

Скрипт разработан в рамках разработки проекта StarMon для вселенной Star Citizen. Посетите страницу StarMon и возможно найдете больше полезной информации.

 

Генератор JSON данных для скрипта "Всплывающих подсказок по космическим кораблям вселенной Star Citizen"

В случае если Вы считаете использование готового скрипта обновляемого удаленно потенциально опасным, Вы можете воспользоваться следующей методикой.
1) Проверьте скрипт на потенциальные уязвимости;
2) Загрузите скрипт на свой сервер;
3) Настройте обновление данных по кораблям, в скрипте, своими средствами;

Для этого для версии скрипта 1.0 заменяйте значение переменной "starMon_json" (в скрипте версии 1.0 это строка 2) на данные полученные по следующим ссылкам:
Английская версия
Англо-русская версия


Данные для замены выделены на изображении

JSON Кодировка UTF-8 как и кодировка скрипта.

На текущий момент поддерживается выгрузка в формате JSON, HTML таблиц, BBCode таблиц
Все варианты запросов можно увидеть здесь: http://starmon.shin0by.com/api/

IP Information
Anonymous proxy