org.crazydoctor.dzjsdocs/static/page/faq/script.js

class FaqPage {

	static Lang = {
		Ru: 'ru',
		En: 'en'
	};

	static FaqNotes = {
		[FaqPage.Lang.Ru]: {
			'Что это?':
				'Doczilla JS Docs - это инструмент для документирования клиентского кода Doczilla.',
			'Зачем?':
				'Главной целью данного инструмента является упрощение процесса ознакомления разработчиков с клиентской частью фреймворка Z8.',
			'Как работает?':
				'1. Автоматическое обновление требуемых репозиториев раз в сутки.\n' +
				'2. Двухэтапный анализ кода.\n' +
					'<span class="list-spacing"></span>2.1. Статический анализ. Маппинг классов и путей к файлам, в которых описаны классы. Определение динамически заданных свойств (this).\n' +
					'<span class="list-spacing"></span>2.2. Динамический анализ. Определение типов свойств, сигнатур методов. Формирование дерева предков, "mixins" для каждого класса. Категоризация методов и свойств: собственные, переопредленные, наследованные.\n' +
				'3. Формирование карты классов.\n' +
				'4. Веб-сервер.',
			'Как пользоваться? (читатель)':
				'<b>1. Список классов.</b>\n' +
					'Список представлен в левой части страницы. Список имеет два режима отображения: древовидная структура и простой список классов. В древовидной структуре классы расположены в пакетах, которые заданы в названиях классов. В простом списке все классы просто перечислены в алфавитном порядке. '+
					'Режимы переключаются с помощью соответствюущих кнопок, расположенных над строкой поиска. После переключения режима, ваш выбор будет сохранен с помощью cookies на 12 часов. Таким же образом запоминаются и раскрытые пакеты в древовидной структуре списка.\n\n' +
				'<b>2. Поиск по классам.</b>\n' +
					'Чтобы найти интересующие классы, необходимо написать запрос в соответствующее поле, после чего нажать Enter. При нажатии на элемент класса в списке, вы будете перенаправлены на страницу выбранного класса.\n\n'+
				'<b>3. Страница класса.</b>\n' +
					'На странице класса доступно два режима отображения: вкладки и список. Режим переключается с помощью соответствующих кнопок в верхней правой части страницы. После переключения режима, ваш выбор будет сохранен с помощью cookies на 12 часов.\n' +
					'В верхней части страницы расположено наименование класса, а также процент заполненной документации к классу.\n' +
					'В основной части страницы можно наблюдать 7 разделов: Editor, Methods, Properties, Parents, Mixins, Children, Mixed in.\n\n' +
					'Подробнее про каждый из разделов можно прочитать в следующем пункте FAQ.',
			'Разделы страницы класса':
				'<b>1. Editor</b>\n' +
					'В данном разделе представлен readonly редактор кода с подсветкой синтаксиса JS. Редактор обладает некоторыми особыми функциями:\n' +
						'<span class="list-spacing"></span>1. Переход к родительскому классу. Осуществляется при помощи нажатия Ctrl+Click по наименованию родительского класса в свойстве extend.\n' +
						'<span class="list-spacing"></span>2. Переход к mixins. Осуществляется при помощи нажатия Ctrl+Click по наименованиям классов перечисленных в свойстве mixins.\n' +
						'<span class="list-spacing"></span>3. Предпросмотр i18n messages. Все места вида "Z8.$(\'...\')" подсвечены в коде, чтобы увидеть, какие строки в действительности кроются за этими выражениями, нужно просто навести курсор мыши на них.\n\n' +
				'<b>2. Methods</b>\n' +
				'В данном разделе представлен список методов класса. Методы разделены на следующие категории:\n' +
					'<span class="list-spacing"></span>1. Static methods: статические методы, описанные в свойстве statics.\n'+
					'<span class="list-spacing"></span>2. Base methods: собственные методы класса, которых нет ни в одном из родительских классов.\n' +
					'<span class="list-spacing"></span>3. Overridden methods: переопределенные методы. Если метод отображается в данной категории, значит, он встречается в одном из родительских классов и явным образом переопределен в текущем классе.\n' +
					'<span class="list-spacing"></span>4. Inherited: наследованные методы. Данные методы пристутствуют в родительских классах, но не были переопределены в текущем классе.\n' +
				'Комментируемыми являются методы всех категорий, кроме Inherited. В Inherited отображаются readonly-комментарии, которые берутся из ближайших родительских классов (последний ближайший родительский класс, в котором метод был переопределен).\n\n' +
				'<b>3. Properties</b>\n' +
					'В данном разделе представлен список свойств класса. Свойства разделены на те же категории, что и методы, + категория Dynamic properties.\n' +
					'В категории Dynamic properties перечислены свойства, которые задаются "динамически" в коде (например, this.abc = 1).\n' +
					'В отличие от методов, в свойствах, помимо наименования, в большинстве случаев отображается также тип данных и значение по-умолчанию.\n\n' +
				'<b>4. Parents</b>\n' +
					'В данном разделе отображается родительская ветка текущего класса (от самого базового класса к ближайшему родительскому).\n\n' +
				'<b>5. Mixins</b>\n' +
					'В данном разделе перечислен список mixins.\n\n' +
				'<b>6. Children</b>\n' +
					'В данном разделе перечислен список классов, которым текущий класс приходится родителем (не обязательно ближайшим).\n\n' +
				'<b>7. Mixed in</b>\n' +
					'В данном разделе представлен список классов, в которых текущий класс присутстсвует в свойстве mixins.\n\n\n' +
				'<b>Контекстное меню</b>\n' +
					'Во всех перечисленных разделах, кроме Editor, доступно контекстное меню (вызывается нажатием ПКМ по элементу).',
			'Как пользоваться? (редактор)':
				'Сперва необходимо авторизоваться. Используйте свои логин и пароль с git.doczilla.pro, которые следует ввести на <a href="/login">данной странице</a>. Также на эту страницу можно попасть с помощью кнопки <img width="24px" height="24px" src="/img/user.svg" />, находящейся над строкой поиска в левой части страницы. Будучи авторизованными, у вас появится возможность редактировать комментарии.<hr/>' +
				'Комментируемыми объектами являются свойства(Properties) и методы(Methods) классов, причем комментировать можно только не Inherited.\n' +
				'Чтобы оставить комментарий нужно нажать на поле комментария, после чего появится поле ввода (textarea). Комментарий может содержать html-теги. Переносы строк автоматически конвертируются в тег &lt;br&gt;!\n' +
				'После завершения написания комментария, необходимо нажать на кнопку "OK", либо нажать Enter. Переносы строк ставятся с помощью комбинации Shift+Enter.'
		},

		[FaqPage.Lang.En]: {
			'What is it?':
				'Doczilla JS Docs - is a tool for documenting client-side code of Doczilla.',
			'Why?':
				'The main goal of this tool is to simplify the process of familiarizing developers with the client part of the Z8 framework.',
			'How does it work?':
				'1. Automatic updating of required repositories once a day.\n' +
				'2. Two-stage code analysis.\n' +
					'<span class="list-spacing"></span>2.1. Static analysis. Mapping of classes and paths to files where classes are described. Determination of dynamically assigned properties (this).\n' +
					'<span class="list-spacing"></span>2.2. Dynamic analysis. Determination of property types, method signatures. Formation of ancestor tree, "mixins" for each class. Categorization of methods and properties: own, overridden, inherited.\n' +
				'3. Generating a class map.\n' +
				'4. Web server.',
			'How to use? (reader)':
				'<b>1. Class list.</b>\n' +
					'The list is presented on the left side of the page. The list has two display modes: tree structure and simple class list. In tree structure, classes are arranged in packages specified in class names. In the simple list, all classes are simply listed in alphabetical order. '+
					'Modes are switched using the corresponding buttons located above the search bar. After switching the mode, your choice will be saved using cookies for 12 hours. The same applies to expanded packages in the tree structure list.\n\n' +
				'<b>2. Class search.</b>\n' +
					'To find classes of interest, you need to enter a query in the corresponding field, then press Enter. When clicking on a class item in the list, you will be redirected to the page of the selected class.\n\n'+
				'<b>3. Class page.</b>\n' +
					'On the class page, there are two display modes: tabs and list. The mode is switched using the corresponding buttons in the top right corner of the page. After switching the mode, your choice will be saved using cookies for 12 hours.\n' +
					'At the top of the page is the class name and the percentage of documentation filled for the class.\n' +
					'In the main part of the page, you can see 7 sections: Editor, Methods, Properties, Parents, Mixins, Children, Mixed in.\n\n' +
					'More details about each section can be found in the next FAQ item.',
			'Class page sections':
				'<b>1. Editor</b>\n' +
					'This section presents a readonly code editor with JS syntax highlighting. The editor has some special features:\n' +
						'<span class="list-spacing"></span>1. Go to parent class. Done by Ctrl+Click on the parent class name in the extend property.\n' +
						'<span class="list-spacing"></span>2. Go to mixins. Done by Ctrl+Click on the names of classes listed in the mixins property.\n' +
						'<span class="list-spacing"></span>3. Preview i18n messages. All occurrences of "Z8.$(\'...\')" are highlighted in the code, to see what strings are actually behind these expressions, simply hover over them with the mouse cursor.\n\n' +
				'<b>2. Methods</b>\n' +
					'This section presents a list of class methods. Methods are divided into the following categories:\n' +
						'<span class="list-spacing"></span>1. Static methods: static methods described in the statics property.\n'+
						'<span class="list-spacing"></span>2. Base methods: own class methods that are not in any of the parent classes.\n' +
						'<span class="list-spacing"></span>3. Overridden methods: overridden methods. If a method is displayed in this category, it means it is encountered in one of the parent classes and is explicitly overridden in the current class.\n' +
						'<span class="list-spacing"></span>4. Inherited: inherited methods. These methods exist in parent classes but have not been overridden in the current class.\n' +
					'Methods of all categories except Inherited are commentable. In Inherited, readonly comments are displayed, taken from the nearest parent classes (the last nearest parent class where the method was overridden).\n\n' +
				'<b>3. Properties</b>\n' +
					'This section presents a list of class properties. Properties are divided into the same categories as methods, plus the Dynamic properties category.\n' +
					'The Dynamic properties category lists properties that are set "dynamically" in the code (for example, this.abc = 1).\n' +
					'Unlike methods, properties, in addition to the name, in most cases also display the data type and default value.\n\n' +
				'<b>4. Parents</b>\n' +
					'This section displays the parent branch of the current class (from the base class to the nearest parent).\n\n' +
				'<b>5. Mixins</b>\n' +
					'This section lists mixins.\n\n' +
				'<b>6. Children</b>\n' +
					'This section lists classes for which the current class is a parent (not necessarily the nearest).\n\n' +
				'<b>7. Mixed in</b>\n' +
					'This section presents a list of classes in which the current class is present in the mixins property.\n\n\n' +
				'<b>Context menu</b>\n' +
					'In all listed sections, excluding the Editor, a context menu is available (triggered by right-clicking on the element).',
			'How to use? (editor)':
				'First, you need to log in. Use your login and password from git.doczilla.pro, which should be entered on <a href="/login">this page</a>. You can also access this page using the <img width="24px" height="24px" src="/img/user.svg" /> button located above the search bar on the left side of the page. Once authorized, you will be able to edit comments.<hr/>' +
				'Commentable objects are properties (Properties) and methods (Methods) of classes, and you can only comment on non-Inherited ones.\n' +
				'To leave a comment, click on the comment field, after which an input field (textarea) will appear. Comments can contain HTML tags. Line breaks are automatically converted to the <br> tag!\n' +
				'After finishing writing the comment, click the "OK" button or press Enter. Line breaks could be placed using Shift+Enter.'
			}
	};
	
	start() {
		this.faqContent = DOM.get('.faq-content');
		this.renderContent();
		return this;
	}

	renderContent() {
		const faqContent = this.faqContent;
		const lang = Url.getHash() || FaqPage.Lang.En;
		const faq = FaqPage.FaqNotes[lang] || FaqPage.FaqNotes[FaqPage.Lang.En];
		let index = 1;

		this.themeElements = [];

		for(const theme of Object.keys(faq)) {
			const noteContent = DOM.create({ tag: DOM.Tags.Div, cls: 'faq-note-content hidden', innerHTML: CDUtils.nl2br(faq[theme]) });
			const noteThemeText = DOM.create({ tag: DOM.Tags.Span, innerHTML: `${index}. ${theme}` });
			const noteThemeCollapsedIcon = DOM.create({ tag: DOM.Tags.Div, cls: 'collapsed-icon' });
			const onClick = (e) => {
				noteContent.switchClass('hidden');
				noteTheme.switchClass('collapsed');
			};
			const noteTheme = DOM.create({ tag: DOM.Tags.Div, cls: 'faq-note-theme collapsed', cn: [noteThemeText, noteThemeCollapsedIcon] }, faqContent).on(DOM.Events.Click, onClick);
			this.themeElements.push({ element: noteTheme, handler: onClick });
			faqContent.append(noteContent);
			index++;
		}
	}

	clearThemes() {
		for(const theme of this.themeElements) {
			theme.element.un(DOM.Events.Click, theme.handler);
			theme.element.remove();
		}
		this.themeElements = [];
	}

	clear() {
		this.clearThemes();
		this.faqContent.getChildren().forEach((child) => {
			child.remove();
		});
	}

	reload() {
		this.clear();
		this.renderContent();
	}
}

window_.on(DOM.Events.Load, (e) => {
	window.page = new FaqPage().start();
});

window_.on(DOM.Events.HashChange, (e) => {
	if(window.page)
		window.page.reload();
});