diff --git a/TODO b/TODO index 69a6dd36..5d067b27 100644 --- a/TODO +++ b/TODO @@ -59,7 +59,6 @@ refactors: miscellaneous: - endless pager should include information about page number - add log engine and log everything that should be logged - - add help, api documentation - add version on homepage that reads version from package.json and git hash - add README - apache2 has good README: http://svn.apache.org/repos/asf/httpd/httpd/trunk/README diff --git a/public_html/css/help.css b/public_html/css/help.css new file mode 100644 index 00000000..072c4761 --- /dev/null +++ b/public_html/css/help.css @@ -0,0 +1,32 @@ +#help-view { + max-width: 40em; + margin: 0 auto; +} + +#help-view div[data-tab] { + display: none; +} + +#help-view ul.tabs { + list-style-type: none; + padding: 0; + margin: 0; +} + +#help-view ul.tabs { + margin: -0.5em -0.5em 0.5em -0.5em; +} +#help-view ul.tabs li { + display: inline-block; + margin: 0 0.5em; +} + +#help-view ul.tabs a { + display: inline-block; + padding: 0.2em 0.5em; +} + +#help-view table td, +#help-view table th { + padding-right: 1.5em; +} diff --git a/public_html/index.html b/public_html/index.html index f3cefb91..74d44068 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -40,6 +40,7 @@ + diff --git a/public_html/js/Presenters/HelpPresenter.js b/public_html/js/Presenters/HelpPresenter.js index ec41aac1..f6bfe2d5 100644 --- a/public_html/js/Presenters/HelpPresenter.js +++ b/public_html/js/Presenters/HelpPresenter.js @@ -3,26 +3,48 @@ App.Presenters = App.Presenters || {}; App.Presenters.HelpPresenter = function( jQuery, + promise, + util, topNavigationPresenter) { var $el = jQuery('#content'); + var templates = {}; + var activeTab; function init(params, loaded) { topNavigationPresenter.select('help'); topNavigationPresenter.changeTitle('Help'); + + promise.wait(util.promiseTemplate('help')) + .then(function(template) { + templates.help = template; + reinit(params, loaded); + }).fail(function() { + console.log(arguments); + loaded(); + }); + } + + function reinit(params, loaded) { + activeTab = params.tab || 'about'; render(); loaded(); } function render() { - $el.html('Help placeholder'); + $el.html(templates.help({title: topNavigationPresenter.getBaseTitle() })); + $el.find('.big-button').removeClass('active'); + $el.find('.big-button[href*="' + activeTab + '"]').addClass('active'); + $el.find('div[data-tab]').hide(); + $el.find('div[data-tab*="' + activeTab + '"]').show(); } return { init: init, + reinit: reinit, render: render, }; }; -App.DI.register('helpPresenter', ['jQuery', 'topNavigationPresenter'], App.Presenters.HelpPresenter); +App.DI.register('helpPresenter', ['jQuery', 'promise', 'util', 'topNavigationPresenter'], App.Presenters.HelpPresenter); diff --git a/public_html/js/Router.js b/public_html/js/Router.js index 2859988b..005a963f 100644 --- a/public_html/js/Router.js +++ b/public_html/js/Router.js @@ -25,7 +25,7 @@ App.Router = function(_, jQuery, promise, util, appState, presenterManager) { inject('#/comments(/:!query)', 'globalCommentListPresenter'); inject('#/tags(/:!query)', 'tagListPresenter'); inject('#/tag/:tagName', 'tagPresenter'); - inject('#/help', 'helpPresenter'); + inject('#/help(/:tab)', 'helpPresenter'); } function navigate(url) { diff --git a/public_html/templates/help.tpl b/public_html/templates/help.tpl new file mode 100644 index 00000000..b31f9d3a --- /dev/null +++ b/public_html/templates/help.tpl @@ -0,0 +1,274 @@ +
+ + + +
+

About

+ +

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

+ +

By default, szurubooru is shipped as an invite-only app. In other words, + in order to use the service, you need to register and have someone inside + accept your registration. The e-mail you enter during account creation is + only used to retrieve your Gravatar and activate your account. 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.

+
+ +
+

Keyboard shortcuts

+ +

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
[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).

+
+ +
+

Search syntax

+ + + + + + + + + + + <% + var table = [ + {search: 'Haruhi', description: 'containing tag “Haruhi”'}, + {search: '-Kyon', description: 'not containing tag “Kyon”'}, + {search: 'uploader:David', description: 'uploaded by user David'}, + {search: 'comment:David', description: 'commented by David'}, + {search: 'fav:David', description: 'favorited by David'}, + {search: 'fav_count:4', description: 'favorited by exactly four users'}, + {search: 'fav_count:4,5', description: 'favorited by four or five users'}, + {search: 'fav_count:4..', description: 'favorited by at least four users'}, + {search: 'fav_count:..4', description: 'favorited by at most four users'}, + {search: 'fav_count:4..6', description: 'favorited by at least four, but no more than six users'}, + {search: 'comment_count:3', description: 'having exactly three comments'}, + {search: 'score:4', description: 'having score of 4'}, + {search: 'tag_count:7', description: 'tagged with exactly seven tags'}, + {search: 'date:today', description: 'posted today'}, + {search: 'date:yesterday', description: 'posted yesterday'}, + {search: 'date:2000', description: 'posted in year 2000'}, + {search: 'date:2000-01', description: 'posted in January, 2000'}, + {search: 'date:2000-01-01', description: 'posted on January 1st, 2000'}, + {search: 'id:1', description: 'having specific post ID'}, + {search: 'name:hash', description: 'having specific post name (hash in full URLs)'}, + {search: 'type:image', description: 'only image posts'}, + {search: 'type:flash', description: 'only Flash posts'}, + {search: 'type:youtube', description: 'only Youtube posts'}, + {search: 'type:video', description: 'only video posts'}, + {search: 'special:liked', description: 'posts liked by currently logged in user'}, + {search: 'special:disliked', description: 'posts disliked by currently logged in user'}, + {search: 'special:fav', description: 'posts added to favorites by currently logged in user'}, + ]; + _.each(table, function(row) { %> + + + + + <% }) %> + +
CommandDescription
<%= row.search %><%= row.description %>
+ +

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:

+ + + + + + + + + + + <% + var table = [ + {search: 'order:random', description: 'as random as it can get'}, + {search: 'order:id', description: 'highest to lowest post ID (default browse view)'}, + {search: 'order:time', description: 'newest to oldest (pretty much same as above)'}, + {search: '-order:time', description: 'oldest to newest'}, + {search: 'order:time,asc', description: 'oldest to newest (ascending order, default = descending)'}, + {search: 'order:score', description: 'highest scored'}, + {search: 'order:file_size', description: 'largest files first'}, + {search: 'order:tag_count', description: 'with most tags'}, + {search: 'order:fav_count', description: 'loved by most'}, + {search: 'order:comment_count', description: 'most commented first'}, + {search: 'order:fav_time', description: 'recently added to favorites'}, + {search: 'order:comment_time', description: 'recently commented'}, + {search: 'order:feature_time', description: 'recently featured'}, + ]; + _.each(table, function(row) { %> + + + + + <% }) %> + +
CommandDescription
<%= row.search %><%= row.description %>
+ +

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

+
+ +
+

Comments

+

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
+
+ +
+

Terms of service

+ +

By accessing <%= title %> (“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.

+
+ +