diff --git a/static/css/help.css b/static/css/help.css new file mode 100644 index 00000000..49aa7bf7 --- /dev/null +++ b/static/css/help.css @@ -0,0 +1,9 @@ +#help { + width: 40em; +} +#help nav { + margin-bottom: 1.5em; +} +#help td { + padding-right: 1em; +} diff --git a/static/html/help-about.tpl b/static/html/help-about.tpl new file mode 100644 index 00000000..a19be9cc --- /dev/null +++ b/static/html/help-about.tpl @@ -0,0 +1,13 @@ +

Szurubooru is an image board engine inspired by services such as Danbooru, +Gelbooru and Moebooru. Its name has +its roots in Polish language and has onomatopeic meaning of scraping or +scrubbing. It is pronounced as shoorubooru.

+ +

Registration

+ +

The e-mail you enter during account creation is only used to retrieve your +Gravatar and for password reminders. Only you can see it (well, except the +database staff… we won’t spam your mailbox anyway).

+ +

Oh, and you can delete your account at any time. Posts you uploaded will +stay, unless some angry admin removes them.

diff --git a/static/html/help-comments.tpl b/static/html/help-comments.tpl new file mode 100644 index 00000000..a1a7b3db --- /dev/null +++ b/static/html/help-comments.tpl @@ -0,0 +1,30 @@ +

Comments support Markdown syntax, extended by some handy tags:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@426links to post number 426
#Dragon_Balllinks to tag “Dragon_Ball”
+Piratelinks to user “Pirate”
~~new~~adds strike-through
[spoiler]Lelouch survives[/spoiler]marks text as spoiler and hides it
[sjis](´･ω･`)[/sjis]adds SJIS art
diff --git a/static/html/help-keyboard.tpl b/static/html/help-keyboard.tpl new file mode 100644 index 00000000..8b046823 --- /dev/null +++ b/static/html/help-keyboard.tpl @@ -0,0 +1,42 @@ +

You can use your keyboard to navigate around the site. There are a few +shortcuts:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HotkeyDescription
[Q]Focus search field, if available
[A] and [D]Go to newer/older page or post
[F]Cycle post fit mode
[E]Edit post
[P]Focus first post in post list
+ +

Additionally, each item in top navigation can be accessed using feature +called “access keys”. Pressing underlined letter while holding +Shfit or Alt+Shift (depending on your browser) will go to the desired page +(most browsers) or focus the link (IE).

diff --git a/static/html/help-search.tpl b/static/html/help-search.tpl new file mode 100644 index 00000000..c340f3a3 --- /dev/null +++ b/static/html/help-search.tpl @@ -0,0 +1,265 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandDescription
Haruhicontaining tag “Haruhi”
-Kyonnot containing tag “Kyon”
uploader:Daviduploaded by user David
comment:Davidcommented by David
fav:Davidfavorited by David
fav_count:4favorited by exactly four users
fav_count:4,5favorited by four or five users
fav_count:4..favorited by at least four users
fav_count:..4favorited by at most four users
fav_count:4..6favorited by at least four, but no more than six users
comment_count:3having exactly three comments
score:4having score of 4
tag_count:7tagged with exactly seven tags
note_count:1..having at least one post note
feature_count:1..having been featured at least once
date:todayposted today
date:yesterdayposted yesterday
date:2000posted in year 2000
date:2000-01posted in January, 2000
date:2000-01-01posted on January 1st, 2000
id:1having specific post ID
name:hashhaving specific post name (hash in full URLs)
file_size:100..having at least 100 bytes
image_width:100..being at least 100 pixels wide
image_height:100..being at least 100 pixels tall
image_area:10000..having at least 10000 pixels
type:imageonly image posts
type:flashonly Flash posts
type:youtubeonly Youtube posts
type:videoonly video posts
special:likedposts liked by currently logged in user
special:dislikedposts disliked by currently logged in user
special:favposts added to favorites by currently logged in user
special:tumbleweedposts with score of 0, without comments and without favorites
+ +

Most of the commands support ranged and composites values, e.g. +id:number operator supports respectively +id:5..7 and +id:5,10,15. +You can combine tags and negate any of them for interesting results. +sea -fav_count:8.. type:swf uploader:Pirate +will show you flash files tagged as sea, that were liked by seven people at +most, uploaded by user Pirate.

+ +

All of the above can be sorted using additional tag in form of +order:keyword:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandDescription
order:randomas random as it can get
order:idhighest to lowest post ID (default browse view)
order:creation_datenewest to oldest (pretty much same as above)
-order:creation_dateoldest to newest
order:creation_date,ascoldest to newest (ascending order, default = descending)
order:edit_datelike creation_date, only looks at last edit time
order:scorehighest scored
order:file_sizelargest files first
order:image_widthwidest images first
order:image_heighttallest images first
order:image_arealargest images first
order:tag_countwith most tags
order:fav_countloved by most
order:comment_countmost commented first
order:fav_daterecently added to favorites
order:comment_daterecently commented
order:feature_daterecently featured
order:feature_countmost often featured
+ +

As shown with -order:creation_date, +any of them can be reversed in the same way as negating other tags: by placing +a dash before the tag.

diff --git a/static/html/help-tos.tpl b/static/html/help-tos.tpl new file mode 100644 index 00000000..789a04ec --- /dev/null +++ b/static/html/help-tos.tpl @@ -0,0 +1,51 @@ +

By accessing {{ name }} (“Site”) you agree to the following +Terms of Service. If you do not agree to these terms, then please do not access +the Site.

+ + + +

Prohibited content

+ + + +

Privacy policy

+ +

The Site will not disclose the IP address or email address of any user +except to the staff.

+ +

Posts, comments, favorites, ratings and other actions linked to your account +will be stored in the Site’s database. The “Upload +anonymously” option allows you to post content without linking it to your +account – meaning your nickname will not be stored in the database +nor shown in the “Uploader” field.

+ +

Cookies are used to store your session data in order to keep you logged in +and personalize your web experience.

diff --git a/static/html/help.tpl b/static/html/help.tpl new file mode 100644 index 00000000..5a2fccd7 --- /dev/null +++ b/static/html/help.tpl @@ -0,0 +1,13 @@ +
+ + +
{{{ this.content }}}
+
diff --git a/static/js/controllers/help_controller.js b/static/js/controllers/help_controller.js index 78eeab31..5b68eb51 100644 --- a/static/js/controllers/help_controller.js +++ b/static/js/controllers/help_controller.js @@ -1,12 +1,14 @@ 'use strict'; class HelpController { - constructor(topNavigationController) { + constructor(topNavigationController, helpView) { this.topNavigationController = topNavigationController; + this.helpView = helpView; } - showHelpRoute() { + showHelpRoute(section) { this.topNavigationController.activate('help'); + this.helpView.render(section); } } diff --git a/static/js/main.js b/static/js/main.js index 4b9e3e1a..4bde61ce 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -4,6 +4,7 @@ // - import objects - // ------------------ const Api = require('./api.js'); +const HelpView = require('./views/help_view.js'); const LoginView = require('./views/login_view.js'); const RegistrationView = require('./views/registration_view.js'); const TopNavigationView = require('./views/top_navigation_view.js'); @@ -25,6 +26,7 @@ const TagsController = require('./controllers/tags_controller.js'); const api = new Api(); const topNavigationView = new TopNavigationView(); +const helpView = new HelpView(); const loginView = new LoginView(); const registrationView = new RegistrationView(); @@ -41,7 +43,7 @@ const usersController = new UsersController( topNavigationController, authController, registrationView); -const helpController = new HelpController(topNavigationController); +const helpController = new HelpController(topNavigationController, helpView); const commentsController = new CommentsController(topNavigationController); const historyController = new HistoryController(topNavigationController); const tagsController = new TagsController(topNavigationController); @@ -78,6 +80,12 @@ page('/tags', () => { tagsController.listTagsRoute(); }); page('/comments', () => { commentsController.listCommentsRoute(); }); page('/login', () => { authController.loginRoute(); }); page('/logout', () => { authController.logoutRoute(); }); + +page( + '/help/:section', + (ctx, next) => { + helpController.showHelpRoute(ctx.params.section); + }); page('/help', () => { helpController.showHelpRoute(); }); page('*', () => { homeController.notFoundRoute(); }); diff --git a/static/js/views/help_view.js b/static/js/views/help_view.js new file mode 100644 index 00000000..4f68a7dc --- /dev/null +++ b/static/js/views/help_view.js @@ -0,0 +1,44 @@ +'use strict'; + +const config = require('../config.js'); +const BaseView = require('./base_view.js'); + +class HelpView extends BaseView { + constructor() { + super(); + this.template = this.getTemplate('help-template'); + this.sectionTemplates = {}; + const sectionKeys = ['about', 'keyboard', 'search', 'comments', 'tos']; + for (let section of sectionKeys) { + const templateName = 'help-' + section + '-template'; + this.sectionTemplates[section] = this.getTemplate(templateName); + } + } + + render(section) { + if (!section) { + section = 'about'; + } + if (!(section in this.sectionTemplates)) { + this.showView(''); + return; + } + + const content = this.sectionTemplates[section]({ + 'name': config.basic.name, + }); + + this.showView(this.template({'content': content})); + + const allItemsSelector = '#content-holder [data-name]'; + for (let item of document.querySelectorAll(allItemsSelector)) { + if (item.getAttribute('data-name') === section) { + item.className = 'active'; + } else { + item.className = ''; + } + } + } +} + +module.exports = HelpView;