Модуль «Подсветка слов»

Модуль «Подсветка слов»

Назначение:

Модуль предназначен для вывода дополнительной (уточняющей) информации в основном контенте страниц.

Основные преимущества:

Гибкая система настройки (можно управлять контентом как на уровне шаблона(ов) сайта, так и на уровне шаблона(ов) компонента(ов) ) Полный контроль содержимого, показываемого во всплывающих окнах (полная поддержка html и css). Система управления правилами – все созданные окна доступны в списке, который можно фильтровать и сортировать.

Процесс установки:

После того как папка с модулем скопирована в папку /bitix/modules/, в административной части битрикса переходим в раздел  «настройки=>модули» и щёлкаем контекстной клавишей по строке «Подсветка слов» и выбираем «установить». После того как появится надпись «Установлен» можно приступать к созданию правил.

Работа с модулем

Модуль может работать в двух режимах: «подсветка» слов на уровне шаблона сайта, «подсветка» на уровне шаблона компонента.

«Подсветка» на уровне шаблона сайта

Для этого нужно выполнить следующее:

Выберете файл шаблона сайта template. master Если файл содержит тег <script runat="server"> , то в его тело добавьте следующий код

protected void Page_Load(object sender, EventArgs e)

  {

  Mdst. Wordshighlighting. WordshighlightingModule. SiteTemplateCondition(Response);

  Mdst. Wordshighlighting. ponentTemplateCondition(Response);

  }

иначе создайте. Если тело уже содержит событие Page_Load, то добавьте в конец.

Управление областью «подсветки» производится установкой двумя строками

Mdst. Wordshighlighting. WordshighlightingModule. MainTemplate_TopHeghlightMargin — определяет верхнюю границу «подсветки»

и

Mdst. Wordshighlighting. WordshighlightingModule. MainTemplate_BottomHeghlightMargin — определяет нижнюю границу «подсветки».

Всё что заключено между этими директивами, будет обрабатываться модулем. Эти директивы вы можете расставлять везде в пределах template. master.  Обычно обрамляется «рабочая область» — элемент управления asp:ContentPlaceHolder.

Пример:

<%= Mdst. Wordshighlighting. WordshighlightingModule. MainTemplate_TopHeghlightMargin %>

<asp:ContentPlaceHolder ID="BXContent" runat="server" />

<%= Mdst. Wordshighlighting. WordshighlightingModule. MainTemplate_BottomHeghlightMargin %>

Установлена опция модуля «На сайте работает глобальный поиск/замена»

«Подсветка» на уровне шаблона компонента

Настройка во многом сходна с настройкой «подсветки» на уровне шаблона. Опишем все стадии.

Выбираем шаблон компонента — в нашем случае это \bitrix\templates\Bitrix. CorporateSite. furniture. default\components\bitrix\catalogue\goods\bitrix\catalogue. element. list\.default

Открываем файл template. ascx.

Управление областью «подсветки» производится установкой двумя строками

Mdst. Wordshighlighting. ponentTemplate_TopHeghlightMargin— определяет верхнюю границу «подсветки»

и

Mdst. Wordshighlighting. ponentTemplate_BottomHeghlightMargin — определяет нижнюю границу «подсветки».

Всё что заключено междуэтими директивами, будет обрабатываться модулем. Эти директивы вы можете расставлять везде в пределах template. ascx.

Пример: управляющие конструкции установлены в самом верху после серверного скрипта и в самом низу.

<%@ Reference Control="~/bitrix/components/bitrix/catalogue. element. list/component. ascx" %>

<%@ Control Language="C#" AutoEventWireup="true" Inherits="Bitrix. ponents. CatalogueElementListTemplate" %>

<%@ Import Namespace="Bitrix. ponents" %>

<script runat="server">

       //Template name

       public override string Title

       {

               get { return GetMessageRaw("TemplateTitle");}

       }

  protected void Page_Load(object sender, EventArgs e)

  {

  Mdst. Wordshighlighting. ponentTemplateCondition(Response);

  }

</script>

<%-- Управляющая конструкция подсветки слов --%>

<%= Mdst. Wordshighlighting. ponentTemplate_TopHeghlightMargin %>

<%

if (Component. isErrorOccured)

{

       %><span class="errortext"><%= Component. errorMessage%></span><%

       return;

}

else if (Component. Items == null)

  return;

%>

<div class="catalog-list">

<%

foreach (CatalogueElementListComponent. ElementListItem listItem in Component. Items)        

{

  var price = listItem. Element. CustomPublicValues. Get<int>("PRICE", 0);

%>

       <% string itemContainerId = GetItemContainerClientID(listItem. ElementId); %>

       <div id="<%= itemContainerId %>" class="catalog-item">

                               <%

                               if (listItem. Element. PreviewImage!= null)

                               {

                                       %><div class="catalog-item-image">

                                               <a href="<%= listItem. ElementDetailUrl %>"><img border="0" src="<%= listItem. Element. PreviewImage. FilePath %>" width="<%= Math. Min(listItem. Element. PreviewImage. Width, 100) %>" alt="<%= listItem. Element. PreviewImage. Description %>" enableajax="true" /></a><br />

                                       </div><%

                               }

                               else if (listItem. Element. DetailImage!= null)

                               {

                                        %><div class="catalog-item-image">

                                               <a href="<%= listItem. ElementDetailUrl %>"><img border="0" src="<%= listItem. Element. DetailImage. FilePath %>" width="<%= Math. Min(listItem. Element. DetailImage. Width, 100) %>"  alt="<%= listItem. Element. DetailImage. Description %>" enableajax="true" /></a><br />

                                               </div><%

                               }

                               %>

                                       

                               <div class="catalog-item-title">

                               <%

                               if (!String. IsNullOrEmpty(listItem. ElementDetailUrl))

                               {

                                       %><a href="<%= listItem. ElementDetailUrl %>" enableajax="true"><%=listItem. Element. Name %></a><%

                               }

                               else

                               {

                                       %><%=listItem. Element. Name %><%

                               }

                               %>

                               </div>

                               <div class="catalog-item-desc-float">

                                <%= listItem. Element. PreviewText %>

                               </div>        

                               <% if (price > 0)

  { %>

                               <div class="catalog-item-price">

                               <span><%= GetMessageRaw("Price") %>: <%=

                                price. ToString() + " " + listItem. Element. CustomPublicValues. GetHtml("PRICECURRENCY")

                                %></span>

                               </div>

                               <% } %>

                               <% RenderElementToolbar(listItem. Element, itemContainerId); %>

                       </div>

       <%

}%>

</div>

<bx:IncludeComponent runat="server" ID="FooterPager" ComponentName="bitrix:system. pager" CurrentPosition="bottom" Template="<%$ Parameters:PagingTemplate %>"/>

<%-- Управляющая конструкция подсветки слов --%>

<%= Mdst. Wordshighlighting. ponentTemplate_BottomHeghlightMargin %>

Переключение между «подсветкой» в рамках шаблона сайта и шаблонов компонентов осуществляется в настройках модуля

Если галочка отжата, то работает «подсветка» на уровне компонентов, если установлена — то на уровне шаблона сайта. Удалять управляющие конструкции не нужно. Эти конструкции учитывают состояние режима «подсветки».

Внимание! При переключении режима подсветки, учитывайте кеширование компонентов.

Описание настроек модуля

На сайте работает глобальный поиск/замена — переключается режим подсветки между подсветкой в пределах шаблона сайта или шаблона компонента(ов). Заменять только первое найденное слово (иначе подсвечиваются все слова) — Если галочка установлена, то в пределах границах подсветки(шаблон сайта или шаблон(ы) компонента(ов)) подсвечивается ТОЛЬКО первое найденное слово, в противном случае все На сайте уже используется jQuery версии 2.1.0 — если галочка НЕ установлена, то на сайте подключается указанная библиотека из скриптов модуля (добаляется в <head> тег) На сайте уже используется "Интерфейс Пользователя для jQuery" версии 1.10.4 — если галочка НЕ установлена, то на сайте подключается указанная библиотека из скриптов модуля  (добаляется в <head> тег)

Добавление правила.

Процедура добавления правила очень проста. Добавление производится в пункте Сервисы=>«Подсветка слов»=> «Подсветка слов»: управление.

Далее щёлкаем кнопку «добавить элемент». Откроется окно:

Смысл полей понятен из их названий. Есть несколько моментов:

если не указан style, то используется style по умолчанию . Если вы хотите, чтобы style не использовался, укажите в поле style пробел. tooltip-атрибут это атрибут title. Если вы не хотите, чтобы появлялась подсказка, оставьте поле пустым. В поле html можно указывать любую html-разметку.

пример:

<h3>"Подсвечиваемое" слово - мебель</h3>

<ul>

<li>

<span style="font-style:italic;">Показывается тестовое всплывающее окно.</span>

<p></p>

</li>

<li>

Поддерживается вывод изображений:

<div style="border-radius: 5px; 7px 7px 5px 0px rgba(50, 50, 50, 0.75); border: red solid 1px;margin: 10px; padding:10px; background-color: white; width: 70%; box-shadow:7px 7px 5px 0px rgba(50, 50, 50, 0.64);

">

<img width="150" height="80"  src="/upload/iblock/430/430fc623ea30afa8c55249d9fc924d60.jpg" />

</div>

</li>

</ul>

В результате применения правила у вас появится такой результат

Вы можете навести указатель, и выделитть необходимый фрагмент во всплывающей подсказке.