Альтернативная библиотека...

Интересные скрипты, хитрости, трюки с оформлением, "недокументированные" возможности, всяческие "довески" к форумам. HTML, CSS, JavaScript и т.п. (только готовые рецепты)
Правила форума
В этой теме выкладываем только готовые "рецепты", если у вас есть чем поделиться.
Пожалуйста, не нужно создавать темы с запросами на тот или иной скрипт
Ответить

Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Альтернативная библиотека...

Сообщение s666 » 25 май 2017, 11:15

  • Стиль - просильвер.
  • Необходимое расширение - Pages.
История создания этого дополнения такова - решил сделать библиотеку наиболее важных статей на форуме. Смотрел в сторону стандартной библиотеки. Честно говоря не понял её логики. Крайне не удобный формат и малая информативность интерфейса. Если уж гора не идет к Магомету, то Магомет идет к горе. Задумка была такая -
  • собирать статью из нескольких топиков.
  • сделать удобное древовидное меню статей.

Тематика моего форума подразумевает большой объём информации и в одном топике Осветить все вопросы не возможно. По этой причине появилась необходимость дать возможность делать отдельные главы в статье.
И так, задача поставлена. Но как её решить? Сервис форума не даёт возможности делать прямые запросы к БД и получить интересующие топики. Как обойти это препятствие? Ну, во первых, у нас есть замечательное расширение - Pages! Устанавливаем его. Теперь мы имеем возможность сделать из нашего форума настоящий сайт. Остался один нюанс - как вытащить текст из БД? Адрес страницы просмотра темы выглядит таким образом - .../viewtopic.php?f=25&t=247. Что нас тут интересует? Выражение t=247, где 247 это порядковый номер темы. Подставляя нужное значение можем вызвать любую тему. Но нам не нужно выводить всю страницу... берём бубен и начинаем танцевать...

Код: Выделить всё

var adress = ('http://адрес вашего форума/viewtopic.php?t='+topic_namber);    //где topic_namber номер темы, которую ищем
xmlhttp.open('GET', adress, false);
xmlhttp.send(null);
var response = xmlhttp.responseText;
Что мы имеем? А мы запихнули страницу в текстовую переменную и теперь путём не сложных манипуляций можем вытащить любой кусок кода. Например вытащим название темы:

Код: Выделить всё

     var nsearch = response.search('<h2 class="topic-title">');      //найдём заголовок темы
     response =  response.substr(nsearch);
     var nsearch = response.search('</h2>');
     var name_post =  response.substr(0, nsearch+5);
     name_post = name_post.replace('topic-title"', 'topic-title" style="text-align: center;" title="перейти к обсуждению статьи" ');    //поправим css и атрибуты
Таким образом можно вытащить любой текст. Остаётся только вывести его на нашу страницу. Мы сделаем это просто:

Код: Выделить всё

document.getElementById('caption').innerHTML = name_post ;      // где caption - иди контейнера для названия темы

Оказывается всё достаточно просто. Оформим всё это подобающим образом, создадим меню в виде простенькой анимированной тривьюшки.

Код: Выделить всё

<div class="nodes" topic = "" posts="" nodes-active=false onclick = "nodeClick('popup1')">
            <span>Название статьи</span>
            <div class="nodes-left"> </div>
        </div>
            <ul id="popup1">
                <li><span class='node' topic = '3' posts='2' onclick = "selectNode(this)">Глава 1</span></li>
                <li><span class='node' topic = '3' posts='3' onclick = "selectNode(this)">Глава 2</span></li>
            </ul>
        </li>
Статьи записаны в виде классов nodes. Если у статьи есть у статьи есть главы, то они оформляются в виде классов node. Эти строки не обязательны. Номер темы указывается в атрибуте topic, номер нужного поста в атрибуте posts. Если нужно объединить несколько постов в одну статью их номера указываются через запятую: posts="1,2,3" Посты, объединённые в одну статью будут разделяться пунктирной линией. В одну статью можно определить посты только с одной страницы. Страница снабжена индикатором загрузки на css.
Как это выглядит можно посмотреть ТУТ.
Как это реализовать? Заходим в расширение Pages. Создаём страницу. Ставим галочку "Обрабатывать HTML" внизу окна редактирования кода и вставляем туда этот код. Я специально не стал редактировать код, приведу его в исходном виде для моего форума.

Код: Выделить всё

<style>
#content pages-content {
   background: white;
}
#tree_view > ul{
    width: 90%;
    margin:25px auto 0;
    list-style: square outside url(http://distillate.rx22.ru/store/distillate_rx22_ru/images/book2_1917.png);
    border: 1px solid #DFF8DF;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 2px 2px 2px rgba(223,248,223,0.5), -2px -2px 2px rgba(223,248,223,0.5)
}
 
#tree_view > ul > li{
    font-weight: normal;
    display: block;
    position:relative;
    padding:0px;
}

#tree_view > ul > li > div > span{
    font-size:12px;
    font-weight: normal;
    padding:5px;
    background-color: transparent;
    color:#383333;
    cursor: pointer;
}

#tree_view li ul{
    position:relative;
    list-style: square outside url(http://distillate.rx22.ru/store/distillate_rx22_ru/images/tree1.png);
    text-align:left;
    top:3px;
    font-size:11px;
    font-weight: normal;
    left:0;
    margin:0;
    padding-left: 35px;
    max-height:0px;
    overflow:hidden;
    -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
}
 
 #tree_view li ul li{
    background-color:transparent;
    font-weight: normal;
}

#tree_view li ul li span{
   font-weight: normal;
    padding: 3px 0px;
    color:#383333;
    display:block;
    cursor: pointer;
}
 
#tree_view li ul li:hover{
    text-decoration:underline;
}
.nodes [nodes-active="false"] {
   background: linear-gradient(to right, #D7D8D3, #FFFFFF);
}

.nodes [nodes-active="true"] {
   background: steelblue;
}

.nodes-left {
   width: 0;
   height: 0;
   border: 10px solid transparent;
   border-left-color: steelblue;  
   border-right: 0;
   float: right;
   margin-right: -10px;
  }
 
.loading {
   position: fixed;
   display: block;
   background: #555 ;
   opacity: 0.7;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   z-index: 100;
}
 #facebook{
	top:50%;
	left:50%;
        position: relative;
}
.facebook_block{
	background-color:#FFFFFF;
	border:2px solid #3B5998;
	float:left;
	height:30px;
	margin-left:5px;
	width:8px;
        opacity:0.1;
	-webkit-transform:scale(0.7);
	-webkit-animation-name: facebook;
 	-webkit-animation-duration: 1s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	
	}
#block_1{
 	-webkit-animation-delay: .3s;
 
 }
#block_2{
 	-webkit-animation-delay: .4s;
}
#block_3{
 	-webkit-animation-delay: .5s;
}
@-webkit-keyframes facebook{
	0%{-webkit-transform: scale(1.2);opacity:1;}
	100%{-webkit-transform: scale(0.7);opacity:0.1;}
}

#caption {
   width: 80%;
   left: 10%;
   height: 25px;
   background-color: #ceccca;
   position: relative;
   border-radius: 0 0 5px 5px;
   color: black;
}

#newsi {
    float:right; width: 77%; 
    left: 21%; 
    height: avto; 
    padding-left: 10px; 
    padding-right: 20px;
    text-shadow: 1px 1px 3px #adadad;
    font-weight: 500;
    font-size: 1.2em;
    font-family: 'Tahoma', Arial, sans-serif;
    line-height: 1.3;

}

</style>

<div id="book_caption"  style="width: 100%; height: 130px; background: linear-gradient(to top, #FFFFFF, #A1A29C);"> 
  <div id="autor"  style="width: 10%;  height: avto; padding-left: 5px; float: left; margin-top: 5px;"> 

   </div>
   <div id="caption" style="background: linear-gradient(to top, #FFFFFF, #CECCCA); height: 130px;"></div>
</div>

<div id="book_menu"  style="float:left; width: 20%;  height: auto;"> 
   
   <div id="tree_view" style="height: avto; min-height: 300px;">
    <ul>
        <li >
        <div class="nodes" topic = "" posts="" nodes-active=false onclick = "nodeClick('popup1')">
            <span>Начало начал</span>
            <div class="nodes-left"> </div>
        </div>
            <ul id="popup1">
                <li><span class='node' topic = '3' posts='2' onclick = "selectNode(this)">Этиловый спирт</span></li>
                <li><span class='node' topic = '3' posts='3' onclick = "selectNode(this)">Процесс брожения</span></li>
                <li><span class='node' topic = '3' posts='4' onclick = "selectNode(this)">Содержание спирта</span></li>
                <li><span class='node' topic = '3' posts='5' onclick = "selectNode(this)">Занимательная дистилляция</span></li>
                <li><span class='node' topic = '3' posts='6' onclick = "selectNode(this)">Простой дистиллятор</span></li>
                <li><span class='node' topic = '3' posts='7' onclick = "selectNode(this)">Укрепление дистиллята</span></li>
                <li><span class='node' topic = '3' posts='8' onclick = "selectNode(this)">Непрерывная дистилляция </span></li>
                <li><span class='node' topic = '3' posts='9' onclick = "selectNode(this)">Холодильники и дефлегматоры</span></li>
            </ul>
        </li>
        
        <li>
        <div class="nodes" topic = "" posts="" nodes-active="false" onclick = "nodeClick('popup2')">
           <span>пункт 2</span>
           <div class="nodes-left"> </div>
        </div>
            <ul id="popup2">
                <li><span class='node' topic = '211' posts='1' onclick = "selectNode(this)">Выпадающий пункт 1</span></li>
                <li><span class='node' topic = '210' posts='1,2,3'  onclick = "selectNode(this)">Выпадающий пункт 2</span></li>
                <li><span class='node' onclick = "selectNode(this)">Выпадающий пункт 3</span></li>
            </ul>
        </li>
 
    </ul>
   </div>
 </div>
<div id="newsi"> 
   
</div>

<div class="loading" id="face" style='display: none;'> 
    <div id='facebook' >
        <div id='block_1' class='facebook_block'></div>
        <div id='block_2' class='facebook_block'></div>
        <div id='block_3' class='facebook_block'></div>
    </div>
</div>


<script>//<!--

function getXmlHttp() {
 var xmlhttp;
    try {
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (E) {
           xmlhttp = false;
       }
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
 }


function print_topic(topic_namber, posts)     
{
     var adress = ('http://distillate.rx22.ru/viewtopic.php?t='+topic_namber);
     var xmlhttp = getXmlHttp();
     var  printtext = "" ;
     var sting = "";
     var forautor = "";
     face.style.display='block';
     xmlhttp.open('GET', adress, false);
     xmlhttp.send(null);
     var response = xmlhttp.responseText;
     var nsearch = response.search('<h2 class="topic-title">');      //найдём заголовок темы
     response =  response.substr(nsearch);
     var nsearch = response.search('</h2>');
     var name_post =  response.substr(0, nsearch+5);
     name_post = name_post.replace('topic-title"', 'topic-title" style="text-align: center;" title="перейти к обсуждению статьи" ');

     for (var i = 1; i <=10; i++) {                                                     // поищем нужные посты

         nsearch = response.search('<div class="content">');
         if (nsearch>0) {
            forautor = response ;
            response =  response.substr(nsearch+21);
            nsearch = response.search('<div id=');
            if (posts.indexOf(i)>=0) {
               if (printtext.length == 0) {get_autor(forautor);}
               else {sting = '<br> -------------------------------------------------------------------------------------------------------<br>';};
               printtext = printtext + sting + response.substr(0, nsearch);};
         }
     }

     document.getElementById('newsi').innerHTML = printtext ;
     name_post = name_post.replace(/href="./g, 'href="http://distillate.rx22.ru');   //  поправим битые ссылки
     document.getElementById('caption').innerHTML = name_post ;
     face.style.display='none';
     
     return true ;
}

function get_autor(post)    
{
   var search = post.search('<div class="avatar-container">');      //найдём и заберём аватарку
   post =  post.substr(search);
   search = post.search('</div>');
   var avatar =  post.substr(0, search+6);
                 
   post =  post.substr(search+6);                                                     //найдём имя аффтора
   search = post.search('</a>');
   var autor =  avatar + '<h3>Автор - ' + post.substr(0, search+4) + '</h3>';
  
   autor = autor.replace(/href="./g, 'href="http://distillate.rx22.ru');   //  поправим битые ссылки
   autor = autor.replace(/src="./g, 'src="http://distillate.rx22.ru');

   document.getElementById('autor').innerHTML = autor ;
} 


function nodeClick(Id) {
        var obj = document.getElementById(Id) ;
        if (obj.offsetHeight==0) {obj.style.maxHeight = '300px';} else {obj.style.maxHeight = '0px';} ;

        var obj = obj.previousElementSibling;
        var topic_num = obj.getAttribute('topic') ;
        var post_num = obj.getAttribute('posts') ;
        var state = obj.getAttribute('nodes-active') ;
        if (state == "false") {state = "true";} else {state = "false";};
        obj.setAttribute('nodes-active', state) ;
        if (topic_num.length != 0) {
           print_topic(topic_num, post_num) ; 
           
        };
}

function selectNode(obj) {
       
     if ( obj.style.fontWeight != 'bold') {
        
        $(".node").each(function () {
            if (this.style.fontWeight == 'bold') {this.style.fontWeight = 'normal'; this.style.color='#424242';};
        });
        obj.style.fontWeight= 'bold';
        var topic_num = obj.getAttribute('topic') ;
        var post_num = obj.getAttribute('posts') ;
        print_topic(topic_num, post_num) ;
    }
}
 --></script>
Это код будет работать на всех форумах, правда топики будут показаны ваши, ну, я думаю, разберётесь, названия подредактируете. И не забудьте поменять адрес форума в переменной adress!
Может у ког-то будут пожелания или дополнительные идеи - пишите, будем дорабатывать!
Тестовый форум Чарка

Аватара пользователя

Вчерашний борщ
Сообщения: 290
Зарегистрирован: 19 сен 2015, 17:25
Благодарил (а): 77 раз
Поблагодарили: 37 раз
Контактная информация:

Альтернативная библиотека...

Сообщение Вчерашний борщ » 26 май 2017, 02:13

Библиотека была интересна тем, что разгружает форум, можно выкинуть большие куски с графикой и прочим, накрутить еще полезностей.
Но расширение Библиотека не развивается, как и многое другое.
Прекрасно, что есть энтузиасты, но допилы и танцы с бубнами не так универсальны и интересны, как расширения.
"Хочется сделать форум поддержки информативным и удобным :) " ©


Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Альтернативная библиотека...

Сообщение s666 » 26 май 2017, 06:08

Вчерашний борщ, так для создания расширений нужно ещё дорасти... для меня это третий в жизни пример программирования на яве. Я до сих пор с трудом улавливаю логику этого языка. Если энтузазизм не пропадёт, может и расширение сваргаю. А пока это просто разминка для мозга, что бы совсем не усох. :D Хотя, назвать готовую страницу "допилом", с моей точки зрения, не совсем правильно. Это уже готовое отдельное приложение. Для людей, не дружащих с основами программирования, конечно лучше создать отдельную станицу с возможностью создания своего тривью. Это не сложно. Текст могу нарисовать за пару часов, но как это оформить в отдельное расширение и интегрировать в phpBB пока не разбирался.
Тестовый форум Чарка

Аватара пользователя

Вчерашний борщ
Сообщения: 290
Зарегистрирован: 19 сен 2015, 17:25
Благодарил (а): 77 раз
Поблагодарили: 37 раз
Контактная информация:

Альтернативная библиотека...

Сообщение Вчерашний борщ » 27 май 2017, 02:19

s666, ну я расти точно не планирую, больше надеюсь на других :) У библиотеки древовидная система, пока для меня не очевидно, чтобы такое можно было легко сделать по вашему алгоритму. Ну и хорошо бы все на каком-то примере показать, например на тестовой площадке поддержки сервиса.
"Хочется сделать форум поддержки информативным и удобным :) " ©


Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Альтернативная библиотека...

Сообщение s666 » 27 май 2017, 02:51

Вчерашний борщ, дык ссылка есть на тестовую страницу. Там можно всё посмотреть. Можно просто зайти на мой форум и кликнуть в верхнем меню ссылку "тест" . У меня пока сделано так -
название статьи
  • глава1
  • глава2
  • глава3
Можно организовать дерево таким образом:
Название темы
  • статья1
  • статья2
  • статья3
Вариантов на самом деле много, можно просто каждая строка - отдельная статья. Пока планирую дизайн доделать, ну а там видно будет.
Тестовый форум Чарка

Аватара пользователя

Вчерашний борщ
Сообщения: 290
Зарегистрирован: 19 сен 2015, 17:25
Благодарил (а): 77 раз
Поблагодарили: 37 раз
Контактная информация:

Альтернативная библиотека...

Сообщение Вчерашний борщ » 27 май 2017, 12:05

s666, в библиотеке дерево за счет категорий, это не то же самое, что разбивка на главы, там может быть разнородный материал.
"Хочется сделать форум поддержки информативным и удобным :) " ©


Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Альтернативная библиотека...

Сообщение s666 » 28 май 2017, 01:31

Вчерашний борщ, а кто тебе помешает сделать дерево в таком виде?
категория
  • Статья1
  • Статья2
  • Статья3
Тестовый форум Чарка

Аватара пользователя

Вчерашний борщ
Сообщения: 290
Зарегистрирован: 19 сен 2015, 17:25
Благодарил (а): 77 раз
Поблагодарили: 37 раз
Контактная информация:

Альтернативная библиотека...

Сообщение Вчерашний борщ » 29 май 2017, 14:02

s666, по-моему вы не понимаете о чем я, категории это полпути к тегам, можно назначить много разных категорий, а дальше нет сподвижек в библиотеке. Если я хочу отобрать материал по одной категории, то не смогу это сделать. Смысл любой библиотеки - катологизация. Если этого нет, то это просто буклет, можно выложить так, можно этак, сути не меняет.
"Хочется сделать форум поддержки информативным и удобным :) " ©

Ответить