Автоматичский указатель внутри сообщения

Аналогично содержанию в Wiki-движках

Одна страница

Распечатать

К данной теме присоединены сообщения из темы «Доделки Intellect Board»

nikola2278

Новичок

Всего сообщений: 7
Зарегистрирован: 2 янв. 2016 г., 23:59
Рейтинг пользователя: 2

18 января 2016 г. в 16:58. Редактировалось 1 раз, последний — 18 января 2016 г. в 16:59#2

можно сделать сноску (кто хочет) как в докувики, но нужен бб код для этого как пример

<script>
e = document.getElementsByTagName("TD");
for (k = 15; k < e.length; k++)
 if ("posttdMessage" == e[k].className)
 for (s = e[k].innerHTML; - 1 != s.indexOf("((");) s = s.replace('((', '<span class="footnote">'), s = s.replace('))', ')</span>'), e[k].innerHTML = s; 
</script>
<script src="../footnote/footnote.js" language="JavaScript" type="text/JavaScript"></script>
<style>#liid1{border-top: 1px solid black;padding: 5px 0px 5px 0px;}.footnote {font-weight: bold;cursor: pointer;}.footnotes {font-size: 10px;padding-left: 5px;padding-top: 10px;list-style-position: inside;}sup {color:red}</style>
<script>

внутри footnote.js

(function($) {
$.fn.footnote = function(options) {
// default settings
var settings = $.extend({
// class for the footnotes ordered list
footnoteListClass: "footnotes",
// time for scroll animation in ms
scrollTime: 300,
// callback function for scroll animation. Receives the jQuery element of
// corresponding footnote list item. Eventually highlight it. Default is
// the empty function, i.e., do nothing.
scrollCallback: function(footnote) {}
}, options);

// maintain chainability
return this.each(function() {
// get footnotes
var container = $(this);
var footnotes = $(".footnote", container);

// append list to the end of the container
var footnotesList = $('<ol class="' + settings.footnoteListClass + '"></ol>');
container.append(footnotesList);

// "iterate" over all footnotes
footnotes.each(function(index, value) {
// extract text and append to footnotes list
var idx = index + 1;
var footnoteHash = "footnote" + idx;
var theFootnote = $('<li id="liid' + (idx) + '"><span id="' + footnoteHash + '">' + $(this).text() + '</span><a href="#yakor' + (idx) + '"> ⇑Вернутся</a></li>');
footnotesList.append(theFootnote);

// replace text with footnote number
$(this).html('<sup id="yakor' + (idx) + '">' + (idx) + ')</sup>');

// smooth scroll to footnote
$(this).click(function() {
$(document.body).animate(
{'scrollTop': $('#' + footnoteHash).offset().top}, 
settings.scrollTime, 
function() { settings.scrollCallback(theFootnote); });
});
});
});
};
}(jQuery));


jQuery(document).ready(function($) {
$("article").footnote();//внутри какого блога искать сноску, тобишь в <article> тут какой то текст ((а тут сноска которая будет переносить вниз текста под hr автоматом добавлять номер сноски. единственное нельзя таким образом вставить ссылку она вырезается)) </article> 
});//конец footnote.js


бб код приблизительно будет выглядеть как то так в /lib/bbcode.php

       self::$search[]='|\[fot\](.*?)\[/fot\]|s'; self::$replace[]='<span class="footnote">$1)</span>';

к сожалению не позволяет добавить аналог двух скобок.

nikola2278

Новичок

Всего сообщений: 7
Зарегистрирован: 2 янв. 2016 г., 23:59
Рейтинг пользователя: 2

18 января 2016 г. в 17:55. Редактировалось 1 раз, последний — 19 января 2016 г. в 18:06#3

В докувику есть автоматическое меню, в зависимости от количества выставленного в настройках, если сделать заголовок ======= то появится меню которое автоматом пропишет все заголовки. Это приблизительный аналог

в js начинка:

(function($, d) {
 jQuery.fn.pageMenu = function(settings) {
 
 // Settings
 settings = jQuery.extend({
 'title' : 'Table of contents'
 }, settings);

 var last_id = 0;
 function next_id() {
 return ++last_id;
 }
 
 // loop each element
 jQuery(this).each(function() {
 // Set element
 var $header = jQuery(this);
 var hl = parseInt(this.tagName[1]);
 var items_count = 0;
 var menu_level = parseInt(this.nodeName[1]) + 1;
 var prev_level = parseInt(this.nodeName[1]) + 1;
 var cur_level = 0;
 
 // Current 
 function getHash() {
 var hash = window.location.hash;
 return hash.substring(1); // remove #
 }
 var current_hash = getHash();
 var current_selected = false;
 
 var menu_html = '';
 
 var selector = '';
 for (var i = hl+1; i < 6; i++) {
 selector += 'h'+i+',';
 } 
 selector = selector + 'h6';
 $items = $(selector, this.parentNode);

 function check_name(name) {
 var hl = parseInt(name[1]);
 return (hl > 0);
 }
 
 var next_node = this.nextSibling;
 while (next_node) { 
 if ((next_node.nodeType == 1) && (check_name(next_node.nodeName))) {
 //console.log(next_node); //********** 
 $item = $(next_node);
 var item_level = parseInt(next_node.nodeName[1]);
 
 if (item_level >= menu_level) {
 var item_class = 'sm-' + next_id();
 $item.addClass(item_class);
 //alert('item_level: ' + item_level + '; prev_level: ' + prev_level + '; cur_level: ' + cur_level); //////

 // Menu element
 var $menu_item_li = $(d.createElement('li'));
 var $menu_item_a = $(d.createElement('a'));
 $menu_item_li.append($menu_item_a);
 $menu_item_a.text($item.text());
 $menu_item_a.attr('rel', item_class);
 $menu_item_a.attr('href', '#'+item_class);
 if (current_hash == item_class) {
 $menu_item_a.addClass('current');
 current_selected = true;
 }
 
 // Anchor
 var $anchor = $(d.createElement('a'))
 .attr('name', item_class)
 .css('visibility', 'hidden')
 .text('*');
 
 $item.append($anchor);
 
 var item_html = '';
 if (item_level == prev_level) {
 if (items_count) item_html += '</li>';
 item_html += '<li>' + $menu_item_li.html();
 }
 else {
 if (item_level > prev_level) { 
 for (var i = 0; i < (item_level - prev_level); i++) {
 item_html += '<ul><li>' + $menu_item_li.html();
 cur_level ++;
 }
 }
 if (item_level < prev_level) {
 for (var i = 0; i < (prev_level - item_level); i++) {
 if (items_count) item_html += '</li>';
 item_html += '</ul></li><li>' + $menu_item_li.html();
 cur_level --;
 }
 }
 }
 
 prev_level = item_level;
 menu_html += item_html;
 items_count ++;
 }
 else {
 return;
 }
 }
 next_node = next_node.nextSibling;
 }
 
 if (items_count > 2) {
 var $menu = $(d.createElement('div')).addClass('submenu-container');
 var $open_button_a = $(d.createElement('a')).addClass('submenu-open');
 $open_button_a.text(settings['title'] + ':');
 $open_button_a.attr('href', '#');
 var $menu_list = $(d.createElement('ul')).addClass('submenu-list');
 $menu_list.html(menu_html);
 $menu.append($open_button_a);
 $menu.append($menu_list);
 $menu.insertAfter($header);
 
 // Add open button
 function menu_button_click() {
 if ($menu_list.css('display') == 'none') {
 $menu_list.css('display', 'block');
 $open_button_a.text(settings['title'] + ':');
 }
 else {
 $menu_list.css('display', 'none');
 $open_button_a.text(settings['title'] + '...');
 }
 return false;
 }
 
 $open_button_a.click(function(){
 menu_button_click();
 return false;
 });
 
 $('a', $menu_list[0]).click(function () {
 $('a', $menu_list[0]).removeClass('current');
 $(this).addClass('current');
 menu_button_click();
 return true;
 });
 
 if (current_selected) {
 menu_button_click();
 }
 } 
 });
 };
})(jQuery, document);

потом можно туда же в js можно добавить или отдельно, но суть прописать :

<script>
$('m1').pageMenu({title: 'Меню'});
</script>

я для себя выбрал такой тег потому что не всегда заголовки нужно в меню кидать в оригинале там h6 кажись было

ну и потом бб код приблизительно


     self::$search[]='|\[m1\](.*?)\[/m1\]|s'; self::$replace[]='<m1>$1</m1>';
     self::$search[]='|\[m2\](.*?)\[/m2\]|s'; self::$replace[]='<m2>$1</m2>';
     self::$search[]='|\[m3\](.*?)\[/m3\]|s'; self::$replace[]='<m3>$1</m3>';

тег m1 его видно не будет но он дает команду создание меню
м2 это верхний уровень м3 подпункты меню

всем этим м1-м3 можно задать стили аналогично как и h1-h6 задают

в стили

<style type="text/css">
 /* Menu */
 .submenu-container {
 float: right;
 max-width: 45%;
 padding: 3px 5px;
 background: none repeat scroll 0 0 #FFFFFF;
 border: 1px solid #DDDDDD; 
 -webkit-border-top-right-radius: 4px;
 -webkit-border-bottom-right-radius: 4px;
 -webkit-border-bottom-left-radius: 4px;
 border-top-right-radius: 4px;
 border-bottom-right-radius: 4px;
 border-bottom-left-radius: 4px;
 }
 .submenu-list {
 margin: 0;
 list-style: disc inside none;
 padding: 5px 10px;
 max-width: 250px;
 }
 .submenu-list ul{
 padding: 0 0 2px 18px;
 }
 .submenu-list li{
 list-style: none outside none;
 }
 .submenu-open {
 font-weight: bold;
 padding: 0 8px;
 }
 </style>

nikola2278

Новичок

Всего сообщений: 7
Зарегистрирован: 2 янв. 2016 г., 23:59
Рейтинг пользователя: 2

18 января 2016 г. в 18:44#4

если js добавить в /www/js/intb.js в конец файла, стили в стили форума, бб коды соответственно то получится вот так

Прикрепленные файлы:

/Screenshot_202.png (67 Кб)

4X_Pro

Основатель проекта

Всего сообщений: 401
Зарегистрирован: 22 сент. 2014 г., 18:56
Откуда: Москва, Перово
Рейтинг пользователя: 15

19 января 2016 г. в 18:07#5

Идея очень хорошая! Буду делать раздел "Статьи", сделаю в нем такое!

Критикуя — предлагай, предлагая — обосновывай!
4xpro.ru — мой личный сайт-мультиблог на Intellect Board.

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

21 января 2016 г. в 09:41. Редактировалось 4 раза, последний — 12 июля 2017 г. в 20:24#6

4X_Pro написал(а):

Идея очень хорошая! Буду делать раздел "Статьи", сделаю в нем такое!

А у меня восторгов нет...

Форум потихоньку начинает жить, и это хорошо. Но и сейчас он ещё не готов принять толпы пользователей и горы информации: людям скоро будет страшно сюда заходить, т.к. слишком много всяких тем, и в них чёрт ногу сломит...

Системы навигации и рейтинги позволят уменьшить видимый размер форума, в десятки тысяч раз!..
Если сравнивать эти возможности с автогенерируемым оглавлением (как тут предложил nikola2278), то это похоже на сравнение детского самолётика с авиалайнером.

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

Если такой труд оплачивается, то создать оглавление сможет любой пользователь (а не только автор статьи), и даже возникнет конкуренция: чьё оглавление лучше?

Вопрос вознаграждений за информационный труд — это касается платных рейтингов. Для экспериментов с платёжно-оценочным сервисом я мог бы пригласить сюда профессионалов. Но потребуется помощь админа, и, в целом, благожелательное отношение к этой затее.

-

И вот ещё интересный момент: когда встал аналогичный вопрос об автогенерации структуры обсуждений, 4X_Pro высказал мнение, что «… это, скорее всего, никому никогда не потребуется» ... По его логике получается, что автоматическая визуализация структур нужна только для статей?

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

12 июля 2017 г. в 21:25. Редактировалось 1 раз, последний — 12 июля 2017 г. в 21:32#7

У данного пользователя нет прав размещать ссылки!

Не прошло и двух лет, как появился плагин для FireFox:

This extension will generate the clickable markers beside browser scrollbar. Each marker represents a heading on the page. When you click on the marker, your browser will smoothly scroll the window to that heading on the page. This extension makes it easy to browse long pages.

Check Options dialog to customize extension.

Вполне полезная вещь.

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

Плагин имеет много настроек...

Одна страница

Распечатать

У вас нет прав для отправки сообщений в эту тему.