1.2.7 // A mark up // 1 Oct 2017
1.1.0 // Sidebars // 26 Sep 2017
1.0.3 // Initial // 24 Sep 2017
<docs-js>
tag, you'll notice the attributes mode="markdown"
and sidebars="none menu"
. If you have code, you can set sidebars
to sidebars="menu e-g"
, which will display code on the right and a menu on the left. (If your window is wide enough)mode="markdown"
and read Quick start below.<s-c> <h-d> <t-p> <t-l> <t-x> <e-g> <e-x> <c-d> <v-r>
and they mean: section, header, topic, title, text, example, extra/more, code, variable
. Try adding a topic in the code!
style=""
, etc. Nesting these tags can help create a well-organized doc. Experiment with different combos below!
&t;docs-js>
, and you can't add topics or sections inside of e-g or e-x tags. (I'm aiming to remove all restrictions in future versions)docsjs-state
, docsjs-name
, and sidebars
. docsjs-state
can be set to either min
or max
and determines wether a topic, section, or e-g/e-x is minimized or maximized initially. It defaults to min
on e-g/e-x and max
on s-c/t-p.docsjs-name
sets name of e-g/e-x shown on the bar that open/closes the e-g/e-x. It defaults to "Example" for e-g and "More" for e-x.sidebars
determines what sidebars are opened by deafult. It accepts two values separated by a space. The possible values are: choice
which is the default, none
which hides the sidebar, menu
which displays a menu, e-g
which displays the e-g tags, and e-x
which displays the e-x tags. Try setting this to menu e-g
and see what difference it makes. (If the window isn't wide enough, the sidebars won't open.)
<c-d>
for syntax-highlighted code and <v-r>
for HTML variables.<c-d>
is pretty simple. First, just pretend it's a <pre>
tag and add code in whatever language you want. Next, add the attribute docsjs-lang
and set it to the language you used. If I wrote javascript in a c-d tag, I would make it:
<v-r>
tags allow for HTML variables, which can help tidy your code and prevent excessive copy-pasting. <v-r>
tags with anything inside will define a variable while an empty <v-r>
will call a variable.
#%5B0%2C6%2C0%5D
right now. You can save or share this url; opening this url will automatically scroll the user the topic you were on.DocsJS.scroll();
For example, hailiax.io/docsjs/#%5B0%2C6%2C0%5D
is decoded to [0,5,0]
which calls DocsJS.scroll( [0,5,0] );
. Below are the accepted types.encodeURIComponent()
DocsJS.scroll();
. What does this mean? Let's take hailiax.io/docsjs/#%5B0%2C6%2C0%5D
. The %5B0%2C6%2C0%5D
is first taken off the URL and then decoded to [0,5,0]
. Then, DocsJS.scroll( [0,5,0] );
is called. [0,5,0]
means: 1st docs-js tag, 6th section, 1st topic. In addition to taking arrays of numbers, DocsJS.scroll()
also takes strings, array of strings, numbers, and booleans.hailiax.io/docsjs/#Browser%20support
is shorthand for hailiax.io/docsjs/#%22Browser%20support%22
which then calls DocsJS.scroll( 'Browser support' );
. Passing a string just makes the doc scroll to the first topic/header that matches the string.hailiax.io/docsjs/#%5B%22Features%22%2C%22Navigation%22%5D
which calls DocsJS.scroll( ["Features","Navigation"] );
. This will scroll the user to the first topic/header named "Navigation" that's inside a section or topic "Features".DocsJS.scroll( 3 );
will scroll three topics down and DocsJS.scroll( -1 );
will scroll one topic up. DocsJS.scroll( 0 );
will align the current topic to the top of the screen. DocsJS.scroll( NaN );
doesn't do anything now, but might later. DocsJS.scroll( Infinity );
will scroll to the last topic/header and DocsJS.scroll( -Infinity );
will scroll to the first topic/header.DocsJS.scroll( true );
will scroll to the top of the page and DocsJS.scroll( false );
will scroll to the bottom of the page.onclick
attribute on a div/p/button etc. For example, is <button onclick="DocsJS.scroll('Sidebars')">sidebars</button>
<t-l>
tags and clicking on them will first close the menu, then scroll to the chosen topic/header. You can also click on the small margin to the left of title names to minimize/maximize sections/topics in the menu.
<e-g>
(<e-x>
(<e-g>
s to the sidebar while cliking <e-x>
s. Sidebars can be closed or adjusted at the bar at the top of the sidebars.As you may have seen in the photo evidence, DocsJS is also fully compatible with many old and all new mobile devices. In fact, DocsJS was designed around allowing equal, but optimized access to docs on all screen sizes. Try resizing this doc by holding the – sign below.
–100% +
Simulated window width displayed here.
<e-g>
and <e-x>
divs are then given a tab order of 0 to ensure the doc can be accessed with a keyboard only.<t-l>
tags content is then wrapped inside <h1>
- <h6>
tags to match the doc's structure. <s-c>
divs are then given the aria-labeledby
tag set equal to an id given to that section's header's title. <t-p>
divs are labeledby their titles's given id. All <s-c>
divs are wrapped inside a <main role="main">
tag and a menu on the left sidebar will be wrapped with a <nav role="nav">
tag. DocsJS buttons are given the tag role="button"
and other DocsJS elements are given appropriate roles. Other aria-
tags are used when appropriate. This is to allow screen-readers to interpret the doc's structure correctly. The menu also contains options to increase/decrease font-size, invert the doc's colors, and expand all <e-g>
and <e-x>
divs.<e-g>
and <e-x>
tags will be expanded to remove the necessity of clicking, and the right sidebar along with the menu/minimize buttons will be removed as they may be distracting to people with severe focus disabilities (clicking topics, headers, e-x and e-g will also be disabled).<h1>
- <h6>
tags to match the structure. This is close to plain text so the reader will have to rely on external software such as screen-readers to interpret the doc.
/* c-d (Cloud9 Ace) styles */
above to get an accurate preview.
sidebars
to suit your needs.choice
lets the reader choose, none
hides the sidebar, menu
spawns a menu, and e-g
/e-x
will move their respective tags to the sidebar.none menu
will hide the left sidebar and spawn a menu on the right. menu e-g
will spawn a menu on the left and move examples to the right sidebar.<docs-js>
tag and set it equal to markdown
, DocsJS will assume everything inside the <docs-js>
tag is markdown and convert it to DocsJS custom tags. Then, the converted HTML will be logged in the console.ebefore
: div added before each eg and ex which the user can click on to expand or minimize the eg/ex.column-left, column-right
: parent div for the left and right sidebars;column-content
: parent div for eg/ex content in sidebars;column-filler
: div to fill in gaps between column-content, initial column background, and menu sidebar background;column-header
: top of header where user can resize or close the sidebar.menu
: parent div for menus;menu-preferences
: parent div for menu preferences;menu-preferences-item
: clickable preference buttons;menu-title
: name of section or topic;menu-item
: parent div a group of menu-titles.button-menu
: clickable parent div for (un)minimizing menus;button-minimize
: clickable parent div for (un)minimizing sections;button-ebefore
: parent div shown on ebefore;button-parent
: parent div of all buttons;button-child
: child elements of buttons that determine how the button looks like.Parameters
DocsJS.init( Callback );Where
Callback is a function that is executed when DocsJS has finished initializing.Parameters
DocsJS.refresh( Callback );Where
Callback is a function that is executed when DocsJS has been refreshed.Parameters
DocsJS.toggle( Element, Target? );Where
Element is the HTML Node of a topic, section, or eg/ex.Parameters
DocsJS.fontsize.set( Value );Where
Value is a number.Parameters
DocsJS.cd.getEditor( Element );Where
Element is the HTML Node of a c-d.Parameters
CallbackParameters
CallbackDocsJS.cd.refresh()
. Calls Callback, then DocsJS.events.cdResized() when done.
Parameters
DocsJS.apply( AppliedFunction );Where
AppliedFunction is a function that accepts two parameters.Parameters
NoneParameters
NoneParameters
DocsJS.animate( Arguments );Where
Arguments is an object that contains required properties: to, from, duration, step and optional properties: easing, pass, callback.Where
Arguments.to and Arguments.from are numbers.Parameters
DocsJS.scroll( Target );Where
Target is an String, Array, Number, or Boolean.Parameters
DocsJS.rotate( Element, Angle );Where
Element is a HTML Node.Parameters
DocsJS.addEvent( Element, Event, Function, Options? );Where
Element is a HTML Node.Parameters
DocsJS.removeEvent( Element, Event, Function, Options? );Where
Element is a HTML Node.Parameters
DocsJS.getStyle( Element, Property );Where
Element is a HTML Node.Parameters
NoneParameters
DocsJS.events.sectionToggle( Section )Where
Section is a HTML Node.Parameters
DocsJS.events.topicToggle( Topic )Where
Topic is a HTML Node.Parameters
DocsJS.events.menuToggle( Menu )Where
Menu is a HTML Node.Parameters
DocsJS.events.eToggle( ExEg )Where
ExEg is a HTML Node.Parameters
NoneParameters
NoneParameters
DocsJS.events.preferenceChanged( Preference )Where
Preference is a string that is one of the following: 'Fontsize up', 'Fontisze down', 'Minimize all', 'Minimize half', 'Minimize none', 'Invert colors', 'Lightning', 'Reset'.Parameters
DocsJS.events.scroll( Location )Where
Location is a string.Animatable buttons
The buttons below contain .html() and .animation() properties. .html() simply returns the HTML string for the button. .animation() is a function called when the button has been pressed. It's passed two parameters, button and now. button is the HTML node of the button pressed and now is a number describing the progress of the animation, between 1 and 0. .animation() will be called as much as possible for DocsJS.animation.duration miliseconds. now will progress from 0 to 1 in the foward animation and 1 to 0 in the reverse animation.Simple buttons
The below do not animate. They are simply functions that return HTML strings.Type
StringDefault
monokaiType
NumberDefault
4Type
BooleanDefault
falseType
BooleanDefault
falseParameters
DocsJS.cd.options( Editor, Editable )Where
Editor is a Ace object.Type
NumberDefault
1280Type
NumberDefault
340Type
StringDefault
Jump to topType
StringDefault
Jump to bottomType
String that describes HTML content.Default
ExampleType
String which is either 'min' or 'max'.Default
minType
String that describes HTML content.Default
ExampleType
String which is either 'min' or 'max'.Default
minType
Number that described time in milisecondsDefault
300Values
DocsJS.easings.linearType
FunctionDefault
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidthType
FunctionDefault
return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeightType
FunctionDefault
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0Type
NumberDefault
0Type
NumberDefault
0