Хак скрытия части текста в ICMS2

#1 15 декабря 2015 в 13:41
Всем привет. Озадачился вот таким вопросом. Предположим, есть у нас тип контента. На странице списка постов (новостей) данного типа контента есть маленькое неудобство — текст, оформленный в визуальном редакторе показывается весь, строго от начала до конца. А хотелось бы какой-то спойлер, который часть текста скрывает, а при нажатии раскрывает полную новость. По типу вот этого:



Штатными средствами "обрезки" не получается то, что нужно, да и форматирование при этом удаляется. Хотелось бы, чтобы оно сохранялось.



Уважаемые, специалисты, кто готов взяться за реализацию данного хака? Сумму можем обговорить посредством ЛС
#2 15 декабря 2015 в 13:52
На странице списка постов или самого поста? Что то я не могу найти это

маленькое неудобство

HostelB
scratch
#3 15 декабря 2015 в 13:55
HostelB наверно хочет, что-бы при просмотре списка постов, текст обрезался, но при необходимости разворачивался, не переходя в сам пост. Примерно как реализованно вконтакте.
#4 15 декабря 2015 в 14:02
Понятно.
#5 15 декабря 2015 в 14:29
Усё верно. На странице списка постов. У меня что то мозг никак не может понять, как же это реализовать…
#6 16 декабря 2015 в 23:59


Усё верно. На странице списка постов. У меня что то мозг никак не может понять, как же это реализовать...

HostelB

Нашел такое решение, может подойдет.



Делал так, берем дефолтный шаблон. \templates\default\content\default_list.tpl.php
добавляем в самый низ

  1. <script src="readmore.js"></script>
  2. <script>
  3. $('.ft_html').readmore({
  4. maxHeight: 100,
  5. moreLink: '<a href="#">Подробнее</a>',
  6. lessLink: '<a href="#">Скрыть</a>'
  7. });
  8. </script>
.ft_html это класс который оборачивает ваш текст, он может отличаться.

Файлик readmore.min.js кидаем templates\default\js

соответственно в файле main.tpl.php в заголовке подключаем этот скрипт
  1. <?php $this->addMainJS("templates/{$this->name}/js/readmore.min.js"); ?>
Вроде все.
Прикрепленный файл
more_mobup.zip 6 Кб
#7 17 декабря 2015 в 01:28
Akziaplus, Вы заголовок читали?
#8 17 декабря 2015 в 10:00
zeffs, нет, это немного не то что нужно… Ваш скрипт просто сворачивает посты, а мне нужно чтобы скрипт обрезал часть текста и прятал в спойлер
#9 15 января 2016 в 14:34
HostelB, Можно попробовать взять это с того же пикабу, надо найти файл который это исполняет… и… а дальше не знаю)
#10 15 января 2016 в 15:22

а дальше не знаю

Jestik
хотя че не знаю, в файл вывода записи, прописать, если пост выше например 500 пикселей, то пост сворачивается… пойду пилить
#12 15 января 2016 в 17:19

Осталось прикррутить

Jestik
но знаний не хватает stuk
Надо сделать так, что бы у каждой записи был уникальный ИД, а то работает только для первой записи…
#13 15 января 2016 в 20:18
Jestik, что-то я совсем запутался. вот знающие люди мне подсказывают, что нужно в js делать перебор массивов…
#14 15 января 2016 в 23:11
HostelB, создайте виджет "HTML блок" ближе к концу страницы (в подвале) и пропишите в нём код
  1. <script>
  2. $(document).ready(function(){
  3.  
  4. var max_height = 80;
  5. var text_more = 'Читать далее';
  6. var text_hide = 'Скрыть';
  7. var div_shadow = '<div class="shadow" style="background: linear-gradient(rgba(255,255,255,0),#fff); height: 20px; margin: -20px 0 0 0; position: relative;"></div>';
  8.  
  9. $('.content_list').find('.field.ft_html.f_teaser').append('<a href="#" class="read_more">' + text_more + '</a>').children('.read_more').hide();
  10.  
  11. $('.content_list').find('.field.ft_html.f_teaser .value').height(function(){
  12.  
  13. var this_height;
  14.  
  15. if ($(this).height() > max_height){
  16. $(this).css({overflow:'hidden', valign:'top'});
  17. $(this).after(div_shadow);
  18. $(this).next().next().show();
  19. this_height = max_height;
  20. } else {
  21. this_height = $(this).height();
  22. $(this).next().hide();
  23. }
  24.  
  25. return this_height;
  26. });
  27.  
  28. $('.read_more').on('click', function(event){
  29. event.preventDefault();
  30. if ($(this).html() === text_more){
  31. $(this).html(text_hide);
  32. $(this).prev().remove();
  33. $(this).prev().css({overflow:'visible', height: 'auto'});
  34. } else {
  35. $(this).html(text_more);
  36. $(this).before(div_shadow);
  37. $(this).prev().prev().css({overflow:'hidden', height: max_height});
  38. }
  39.  
  40. });
  41.  
  42. });
  43. </script>
#15 16 января 2016 в 00:16
Loadырь, большое спасибо за решение, но я сделал немножко по другому. Если кому то нужно решение — пишите, с радостью поделюсь. А вот собственно дэмо того что получилось — для оценки эффекта нужно полистать ленту до конца — клик
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.