-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1376 lines (1348 loc) · 85.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DocsJS</title>
<link rel="apple-touch-icon" sizes="180x180" href="example/favicons/apple-touch-icon.png?v=8jedNJnRp5">
<link rel="icon" type="image/png" sizes="32x32" href="example/favicons/favicon-32x32.png?v=8jedNJnRp5">
<link rel="icon" type="image/png" sizes="192x192" href="example/favicons/android-chrome-192x192.png?v=8jedNJnRp5">
<link rel="icon" type="image/png" sizes="16x16" href="example/favicons/favicon-16x16.png?v=8jedNJnRp5">
<link rel="manifest" href="example/favicons/manifest.json?v=8jedNJnRp5">
<link rel="mask-icon" href="example/favicons/safari-pinned-tab.svg?v=8jedNJnRp5" color="#5bbad5">
<link rel="shortcut icon" href="example/favicons/favicon.ico?v=8jedNJnRp5">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="example/favicons/mstile-144x144.png?v=8jedNJnRp5">
<meta name="msapplication-config" content="example/favicons/browserconfig.xml?v=8jedNJnRp5">
<meta name="theme-color" content="#2b2b2b">
<script>
var loc = window.location.href.split('/');
if (loc[loc.length-2] !== 'docsjs'){
if (loc[loc.length-1].substring(0,6) === 'docsjs'){
loc[loc.length-1] = 'docsjs/' + loc[loc.length-1].slice(6);
window.location = loc.join('/');
}
}
</script>
<script src="src/ace/ace.js"></script>
<script src="src/docs.js"></script>
<script src="example/script.js"></script>
<link href="example/style.css" rel="stylesheet">
</head>
<body onLoad="init()">
<div docsjs-tag="DocsJS-This-Baby">
<v-r rightArrow>
<div style="padding-top: 0.1em; display: inline-block;">
<div docsjs-tag="button-parent" style="display: inline-block;">
<div style="position: absolute; margin-left: -10%; height: 100%; width: 100%;">
<div docsjs-tag="button-child" style="height: 70%; width: 70%; background-color: transparent; -ms-filter:'progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477, M22=0.7071067811865474,SizingMethod='auto expand')';filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand');-o-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc); border-radius: 0; border-bottom: none; border-left: none;"></div>
</div>
</div>
</div>
</v-r>
<v-r egArrow>
<div docsjs-tag="button-parent" style="display:inline-block; font-size: 0.8em;"><div style="position: absolute; margin-left: -10%; height: 100%; width: 100%;"><div docsjs-tag="button-child" style="height: 70%; width: 70%; background-color: transparent; -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477, M22=0.7071067811865474,SizingMethod='auto expand')';filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand');-o-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc); border-radius: 0; border-bottom: none; border-left: none;"></div><div docsjs-tag="button-child" style="width: 60%; margin-right: 5%; border-bottom: none; height: 0; border-radius: 0;"></div></div></div>
</v-r>
<v-r exArrow>
<div docsjs-tag="button-parent" style="display:inline-block; font-size: 0.8em;"><div style="position: absolute; margin-left: -10%; height: 100%; width: 100%;"><div docsjs-tag="button-child" style="height: 70%; width: 70%; background-color: transparent; -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477, M22=0.7071067811865474,SizingMethod='auto expand')';filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand');-o-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc); border-radius: 0; border-bottom: none; border-left: none;"></div><div docsjs-tag="button-child" style="margin-left: 20%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc); border-radius: 100%;"></div><div docsjs-tag="button-child" style="margin-right: 35%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc); border-radius: 100%;"></div></div></div>
</v-r>
<s-c>
<div style="height: 8em; position: relative;" class="logoImage">
<img src="example/logo.png" alt="logo" style="position: absolute; max-height: 110%; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; max-width: 70%;">
</div>
</s-c>
<s-c>
<h-d>
<t-l>Why DocsJS</t-l>
<t-x>
DocsJS is an open source documentation library lets you focus on just writing. Think of it as offloading all the grunt work to us. Want a quick run down of things you don't have to worry about anymore?
<ol>
<li>Compatibility: tested on IE8+ (Windows XP wow!), FF11+, Chrome15+, and more.</li>
<li>Accessibility: complies with and aims to exceed old and new accessibilty standards.</li>
<li>Navigation: automatically generates the best navigation system I've seen.</li>
<li>Responsiveness: works perfectly (and I really mean perfectly) on devices of any size.</li>
<li>Time: DocsJS is designed to make writing docs very efficient and easy.</li>
<li>Uniqueness: Every aspect of DocsJS is fully and easily customizable.</li>
</ol>
Also, if DocsJS gets popular, I'm sure we'll all appreciate the more consistent, beautiful, and accessible documentation. (So please share DocsJS)
</t-x>
<e-x docsjs-name="Changelog" class="changelog">
<p>Release 1.0.1 "Initial" // 27 Aug 2017</p>
<ol>
<li>DocsJS publicly released!</li>
</ol>
</e-x>
<a href="https://github.com/Hailiax/DocsJS" style="color: inherit; text-decoration: none;" target="_blank" rel="noopener">
<t-x style="height: 1.75em; line-height: 1.75em; padding: 0; padding-left: 1em; border-top: #E0E0E0 solid 1px; cursor: pointer;">
<v-r rightArrow></v-r>
<span style="margin-left: 0.4em; top: 0; position: absolute;">Github (Link)</span>
</t-x>
</a>
</h-d>
</s-c>
<s-c>
<h-d>
<t-l>Got 5 minutes?</t-l>
<t-x>
Let's get started. First of all, you'll have to add docs.js to your HTML page. I highly, highly recommend using the CDN described below for many reasons including keeping DocsJS up to date.<br><br>
First, add this to the head of your doc (IE doesn't like to load scripts in the body),<br>
<c-d docsjs-lang="html" style="margin-top: 0.25em; margin-bottom: 0.5em;"><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Hailiax/DocsJS@1/src/ace/ace.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Hailiax/DocsJS@1/src/docs.min.js"></script></c-d>
and this to the body.<br>
<c-d docsjs-lang="html" style="margin-top: 0.25em;"><div docsjs-tag="DocsJS-This-Baby">
<!-- This is where you write your doc -->
</div>
<script>DocsJS.init();</script></c-d><br>
Now we can get started!
</t-x>
<e-x docsjs-name="Single page documentation?">
By being a javascript library, DocsJS inherently encourages either single page documents or few larger docs. However, a lot of the documentation you'll come across consist of many small pages connected by hyperlinks. Below, I've listed the problems I've had with this type of documentation.
<ol>
<li>Loading times: Text isn't that heavy so it makes more sense to make one request to load a lot of text instead of many requests primarily loading scripts, styles, etc.</li>
<li>Accessibility: If you find loading times annoying, imagine how people with disabilities or people on a slow internet feel about having to click a million links. It's also easier to save one page without a lot of documentation to read offline.</li>
<li>Disorganized: Often, the amount of links on a doc can get so insane it gets hard to keep track or even find them.</li>
<li>Hard to write: Would you rather write docs in flexible, clean, structured HTML or learn how to use a server side generator.</li>
</ol>
Disagree with my opinion? I'd love to hear what you think at [email protected].
</e-x>
</h-d>
<t-p>
<t-l>Basic structure</t-l>
<t-x>
DocsJS uses the following tags.
<br><br>
<c-d docsjs-lang="html"><s-c>Section: a container for grouping topics
<h-d>Header: every section needs a header at the top</h-d>
<t-p>Topic: a container for a topic
<t-l>Title: title of your topic</t-l>
<t-x>Text: basic details for the topic</t-x>
<e-g>Example: open/close-able for examples/code</e-g>
<e-x>Extra Details/Extraneous: open/close-able for more details</e-x>
<c-d>Code: put code in here to be syntax-highlighted</c-d>
</t-p>
</s-c>
<v-r>Varible: we'll get into this later</v-r></c-d>
<br>
Click "Try it!" below to see a basic example that you can edit realtime!
</t-x>
<e-g docsjs-name="Try it!">
<c-d docsjs-lang="html" docsjs-editable="true" class="parse1 src parse"><div docsjs-tag="DocsJS-This-Baby">
<!-- This is where you write your doc -->
<s-c>
<h-d>
<t-l>Example header</t-l>
<t-x>Something describing your awe-inspiring section.</t-x>
</h-d>
<t-p>
<t-l>Example topic</t-l>
<t-x>Wow! What a moving topic this is.</t-x>
<e-g>Here's an example of how this topic will change your life.</e-g>
<e-x>You won't believe what extra details this contains next.</e-x>
</t-p>
<t-p>
<t-l>Ohmygosh another topic</t-l>
<t-x>Too many topics!!</t-x>
<e-g>Too many examples!!</e-g>
</t-p>
</s-c>
</div></c-d>
<iframe class="parse1 dest" title="Try it example result"></iframe>
</e-g>
</t-p>
<t-p>
<t-l>Nested structures</t-l>
<t-x>Every custom tag is basically a div so you can nest them within each other, add attributes like <pre>style=""</pre>, etc. Nesting these tags can help create a well-organized doc. For example, you can add sections in sections, topics in topics, sections in topics and more! Experiment with different combos below!</t-x>
<e-g docsjs-name="Try it!">
<c-d docsjs-lang="html" docsjs-editable="true" class="parse2 src parse"><div docsjs-tag="DocsJS-This-Baby">
<!-- This is where you write your doc -->
<s-c>
<h-d>
<t-l>Regular header</t-l>
<t-x>Nothing cool here.</t-x>
</h-d>
<t-p>
<t-l>Regular topic</t-l>
<t-x>However, the contents of this topic are special!</t-x>
<s-c>
<h-d>
<t-l>Embedded section</t-l>
<t-x>That's right, this is a section in a topic. You can add as many sections in a topic as you want! Try adding more topics and sections inside this topic.</t-x>
</h-d>
</s-c>
<t-x>Check this out too.</t-x>
<t-p>
<t-l>Embedded topic</t-l>
<t-x>A topic inside a topic!</t-x>
</t-p>
</t-p>
<s-c>
<h-d>
<t-l>More embedded sections</t-l>
<t-x>This is what a section inside a section looks like.</t-x>
</h-d>
</s-c>
</s-c>
</div></c-d>
<iframe class="parse2 dest" title="Try it example result"></iframe>
</e-g>
<e-x docsjs-name="A few restrictions">There are a few restrictions: every section must contain a header, no topic's immediate parent can be the DocsJS-This-Baby div, 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)</e-x>
</t-p>
<t-p>
<t-l>A few attributes</t-l>
<t-x>
Now you know everything you need to know to use DocsJS. However, the next two topics can help you make your docs extra spicy. There are two important attributes to know: <pre>docsjs-state</pre> and <pre>docsjs-name</pre>. <br><br>
<pre>docsjs-state</pre> can be set to either <pre>min</pre> or <pre>max</pre> and determines wether a topic, section, or e-g/e-x is minimized or maximized initially. It defaults to <pre>min</pre> on e-g/e-x and <pre>max</pre> on s-c/t-p.<br><br>
<pre>docsjs-name</pre> 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. Try it below!
</t-x>
<e-g docsjs-name="Try it!">
<c-d docsjs-lang="html" docsjs-editable="true" class="parse4 src parse"><div docsjs-tag="DocsJS-This-Baby">
<!-- This is where you write your doc (This comment isn't required. I'll stop including it now that you know DocsJS' structure) -->
<s-c>
<h-d>
<t-l>Regular header</t-l>
<t-x>Oh, by the way, the circular button minimizes/maximizes the section and clicking on a title minimizes/maximizes the topic or header.</t-x>
</h-d>
<t-p docsjs-state="min">
<t-l>Minimized topic</t-l>
<t-x>The reader will have to click the title to expand this topic.</t-x>
</t-p>
<t-p>
<t-l>Regular topic here</t-l>
<t-x>But some of the e-g and e-x tags are named!</t-x>
<e-g docsjs-name="Wow!" docsjs-state="max">Named and maximized example.</e-g>
<e-g docsjs-name="Hello world">Named example.</e-g>
<e-x docsjs-state="max">Maximized extra details.</e-x>
</t-p>
</s-c>
<s-c docsjs-state="min">
<h-d>
<t-l>Minimized section</t-l>
<t-x>Ever wondered what those bars on the side were?</t-x>
</h-d>
<t-p docsjs-state="min">
<t-l>Well, find out here!</t-l>
<t-x>You can drag the bars towards the center. Depending on the symbol you drag, it'll move the e-g or e-x tags to the side. The menu symbol will just create menu on the side. To close the sidebars, just drag them back to the side.</t-x>
<e-x docsjs-state="max">Try moving this to the sidebar by dragging the matching symbol. (The one with the dots)</e-x>
</t-p>
</s-c>
</div></c-d>
<iframe class="parse4 dest" title="Try it example result"></iframe>
</e-g>
</t-p>
<t-p>
<t-l>Bonus tags!</t-l>
<t-x>
There are two tags that haven't been covered yet: <pre><c-d></pre> for syntax-highlighted code and <pre><v-r></pre> for HTML varibles.<br><br>
<pre><c-d></pre> is pretty simple. First, just pretend it's a <pre><pre></pre> tag and add code in whatever language you want. Next, add the attribute <pre>docsjs-lang</pre> and set it to the language you used. If I wrote javascript in a c-d tag, I would make it:
<c-d docsjs-lang="html" style="margin-top:0.25em;"><c-d docsjs-lang="javascript">alert('Hello World!');</c-d></c-d>
</t-x>
<e-x docsjs-name="Supported languages" style="font-family:'Source Code Pro',monospace; font-size: 0.8em;">abap, abc, actionscript, ada, apache_conf, applescript, asciidoc, assembly_x86, autohotkey, batchfile, behaviour, bro, c9search, c_cpp, cirru, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, django, dockerfile, dot, drools, eiffel, ejs, elixir, elm, erlang, forth, fortran, ftl, gcode, gherkin, gitignore, glsl, gobstones, golang, graphqlschema, groovy, haml, handlebars, haskell, haskell_cabal, haxe, hjson, html, html_elixir, html_ruby, ini, io, jack, jade, java, javascript, json, jsoniq, jsp, jsx, julia, kotlin, latex, less, liquid, lisp, livescript, logiql, lsl, lua, luapage, lucene, makefile, markdown, mask, matlab, maze, mel, mushcode, mysql, nix, nsis, objectivec, ocaml, pascal, perl, pgsql, php, pig, plain_text, powershell, praat, prolog, properties, protobuf, python, r, razor, rdoc, rhtml, rst, ruby, rust, sass, scad, scala, scheme, scss, sh, sjs, smarty, snippets, soy_template, space, sparql, sql, sqlserver, stylus, svg, swift, tcl, tex, text, textile, toml, tsx, turtle, twig, typescript, vala, vbscript, velocity, verilog, vhdl, wollok, xml, xquery, yaml</e-x>
<t-x>
DocsJS' <pre><v-r></pre> tags allow for HTML varibles, which can help tidy your code and prevent excessive copy-pasting. <pre><v-r></pre> tags with anything inside will define a varible while an empty <pre><v-r></pre> will call a varible.
<c-d docsjs-lang="html" style="margin-top:0.25em;"><!-- You can define a varible named "helloWorld" like this: -->
<v-r helloWorld>
<p>Anything you want!</p>
</v-r>
<!-- Then, any of these: -->
<v-r helloWorld></v-r>
<!-- will be replaced with: -->
<p>Anything you want!</p></c-d>
</t-x>
<e-g docsjs-name="Try it!">
<c-d docsjs-lang="html" docsjs-editable="true" class="parse5 src parse"><div docsjs-tag="DocsJS-This-Baby">
<v-r logo>
<div style="padding-top: 0.1em; display: inline-block;"><div docsjs-tag="button-parent" style="display: inline-block;"><div style="position: absolute; margin-left: -10%; height: 100%; width: 100%;"><div docsjs-tag="button-child" style="height: 70%; width: 70%; background-color: transparent; -ms-filter:'progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477, M22=0.7071067811865474,SizingMethod='auto expand')';filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand');-o-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc); border-radius: 0; border-bottom: none; border-left: none;"></div></div></div></div>
</v-r>
<s-c>
<h-d>
<t-l>NextMouse</t-l>
<t-x>NextMouse is an international corporation dedicated to creating the most next-level mouse ever. Our products are named by their model number followed by our logo: <v-r logo></v-r><br>
Today, we're releasing product Razr<v-r logo></v-r>. It's made from 42 nexts to create the most advanced mouse<v-r logo></v-r> ever. Order your Razr<v-r logo></v-r> today!</t-x>
</h-d>
<t-p>
<t-l>Beautiful syntax highlighting</t-l>
<t-x>
Here's an example of syntax highlighted css:<br><br>
<c-d docsjs-lang="css">body, html{
margin: 0;
padding: 0;
font-size: 22px;
}</c-d><br>
Oh yeah, you can add the attribute <pre>docsjs-editable="true"</pre> to make the code block editable.<br>
For example, <pre>&lt;c-d docsjs-lang="css" docsjs-editable="true"&gt;</pre>. Try making the above editable!
</t-x>
</t-p>
</s-c>
</div></c-d>
<iframe class="parse5 dest" title="Try it example result"></iframe>
</e-g>
</t-p>
</s-c>
<s-c>
<h-d>
<t-l>Features</t-l>
<t-x>Congratulations, you've learned how to use DocsJS! If you want to go deeper, this section contains some details on the design behind the best features.</t-x>
</h-d>
<t-p>
<t-l>Navigation</t-l>
<t-x>DocsJS scans how your doc is structured (nested tags and all) and automatically generates a matching menu which serves as a useful table of contents and navigation. The names used in the menu come from your <t-l> tags. Cliking a name in the menu will scroll the user to the corresponding section or topic in your doc. Scroll to top, scroll to bottom, and preference buttons are also added to the menu.<br><br>
Also, adding the hash symbol, #, followed by the title of a topic or section to the end of your doc's url will automatically scroll the reader to the named section on pageload/refresh. DocsJS also allows for inline navigation buttons as shown in the examples.<br><br>
Finally, the menu contains readability options for the user. The user can change font size, minimize everything, maximize everything, reset mins and maxes to default, invert colors for day/night readability, turn off animations (save power), and reset all preferences.</t-x>
<e-g docsjs-name="Examples">
To open the menu for this doc, just click the menu symbol. It looks like an equals sign and it's found near the top of the page next to a topic title. Annnddd, for the hash symbol feature:<br><br>
Let's say that I want to send the "Compact custom tags" topic to my friend. Well this url is https://hailiax.io/docsjs and the title of that section, encoded so spaces become %20, is Compact%20custom%20tags, so I would send my friend the url <a href="#Compact%20custom%20tags" target="_blank" rel="noopener">https://hailiax.io/docsjs#Compact%20custom%20tags</a>. Try clicking on that link or even try making a link to this topic to see what this feature does.<br><br>
Finally, let's say you want to create an inline navigation button like <a onClick="DocsJS.jumpTo('Compact custom tags');" href="javascript:void(0);">this</a>. This button just uses the attribute: <c-d docsjs-lang="html">onClick="DocsJS.jumpTo('Compact custom tags');"</c-d> You can replace 'Compact custom tags' with any location you want.
</e-g>
<e-x docsjs-name="Why is the menu... there?">There are two areas where the menu can be accessed: the traditional left sidebar by dragging the sidebar out and the menu button that moves between the uppermost topic's title. A simple menu on the left side just doesn't cut it: mobile devices don't have space for that and the sidebars may have other perferred uses. By embedding a menu button into the uppermost topic titles, the menu will be always and easily accessible on every device while keeping clutter to a minimum. Section titles will have a circular button which minimizes that section.</e-x>
</t-p>
<t-p>
<t-l>Sidebars</t-l>
<t-x>Traditionally, good documentation has two sidebars: a menu on the left and examples/code-sinppets on the right. This keeps the documentation easy to read while making it appear shorter and more inviting to read. However, formatting these columns can be difficult and they straight up just don't work on mobile devices. DocsJS' solution: the <e-g> (<v-r egArrow></v-r> for examples) and <e-x> (<v-r exArrow></v-r> for extra details or extraneous) tags.<br><br>
By default, content in these tags are enclosed in an expandable container, preserving the shorter and inviting look. If the reader has enough screen space, they can move these tags to a side bar. Dragging out the <v-r egArrow></v-r> on the right sidebar will move all example containers to the right sidebar and expand them. Dragging <v-r exArrow></v-r> will move the ex containers. Sidebars can be adjusted or closed by dragging the edge of the sidebar.</t-x>
<e-g>I figured a good example of this would be moving this example to the right sidebar. Try it!</e-g>
<e-x docsjs-name="Move both eg and ex?">After moving eg or ex to the right sidebar, you'll have the option to move the other to the left sidebar. If the menu is open in the left sidebar, close it by dragging it back. Try moving this to the left sidebar.</e-x>
</t-p>
<t-p>
<t-l>Animations</t-l>
<t-x>Animations don't only just make your documentation look better, they have important functions: drawing attention to important details, suggesting how certain features work, and giving context when large opened menus or containers are opened so it doesn't look the rest of the content just dissapeared.<br><br>
However, programming lightweight, browser-consistent, and cross-browser animations can be a pain. That's why DocsJS automatically generates animations where needed to improve the functionality and feel of your doc.</t-x>
<e-g docsjs-name="Proof">Click a title and you'll see that the topic minimizes. If there were animations, you would just see the topic dissapear. If you didn't know that this was intended, you might assume it was a bug. Or even worse, if you accidentally clicked the title, all you would see is a topic randomly dissapearing. But since you saw the topic shrink, it would be logical to click the title to unminimize the topic.<br><br>
Also, lets say you clicked on a really big example, one that fill the enitre screen. If there was no animation, you would just see a example just appear and fill out your screen. If you click on the menu, an animation preserves your context. If you try to close a sidebar, an animation draws attention to a panel labeled "X" which suggests how to close the sidebar. In the menu, click the thunderbolt sign to see DocsJS without animations. Click again to re-enable animations.</e-g>
</t-p>
<t-p>
<t-l>Complete access</t-l>
<t-x>Dealing with different browsers in general is a huge pain, espeically for documentation where support for old browsers is vital. That's why DocsJS places huge empahasis on compatability and has been tested with <a href="https://www.browserstack.com" target="_blank"><img src="example/BrowserStack.png" style="display:inline; height: 0.7em;" alt="Browser Stack logo"></a> on browsers all the way back to IE7 (2006) and partial compatability with IE6 (2001).</t-x>
<e-g docsjs-name="Screenshots" id="screenshots">
<div><img src="example/screenshots/desktop/1-snowLeopard.jpeg" alt="screenshot"><p>Snow Leopard</p></div><div><img src="example/screenshots/desktop/2-firefox11.jpeg" alt="screenshot"><p>Firefox 11</p></div><div><img src="example/screenshots/desktop/3-chrome15.jpeg" alt="screenshot"><p>Chrome 15</p></div><div><img src="example/screenshots/desktop/4-ie8.jpeg" alt="screenshot"><p>IE 8</p></div><div><img src="example/screenshots/desktop/5-ie9.jpeg" alt="screenshot"><p>IE 9</p></div><div><img src="example/screenshots/desktop/6-ie10.jpeg" alt="screenshot"><p>IE 10</p></div><div><img src="example/screenshots/desktop/7-ie11.jpeg" alt="screenshot"><p>IE 11</p></div><div><img src="example/screenshots/desktop/8-edge.jpeg" alt="screenshot"><p>MS Edge</p></div><div><img src="example/screenshots/desktop/9-yandex14-12.jpeg" alt="screenshot"><p>Yandex 14.12</p></div><div><img src="example/screenshots/desktop/10-firefox54.jpeg" alt="screenshot"><p>Firefox 54</p></div><div><img src="example/screenshots/desktop/11-chrome60.jpeg" alt="screenshot"><p>Chrome 60</p></div><div><img src="example/screenshots/desktop/12-highSierra.jpeg" alt="screenshot"><p>High Sierra</p></div><div><img src="example/screenshots/phone/1-nokiaLumia520.jpeg" alt="screenshot"><p>Lumia 520</p></div><div><img src="example/screenshots/phone/2-galaxyS2.jpeg" alt="screenshot"><p>Galaxy S2</p></div><div><img src="example/screenshots/phone/3-iPhone4.jpeg" alt="screenshot"><p>iPhone 4</p></div><div><img src="example/screenshots/phone/4-iPhone7.jpeg" alt="screenshot"><p>iPhone 7</p></div>
</e-g>
<t-x style="padding-left:0; padding-right:0;">
<p style="padding-left:1em; padding-right:1em;">Dealing with different screen sizes is also a huge pain. But, I'm sure you've figured out that DocsJS has covered every mobile base by now. Everything that can be accessed on this doc on a big screen is equally accessible on a mobile screen. If you really need sidebars on a mobile device, just rotate the device to landscape. DocsJS is entirely styled in em units which allows for perfect scaling for different screen sizes, esepcially really small ones. Try resizing this doc below by holding the – sign.</p><br>
<p style="font-size:2.5em; width: 100%; line-height: 2em;"><span style="cursor:pointer; width: 30%; display: inline-block; text-align: center; border: solid 1px #E0E0E0; border-left: none; border-right: none; box-sizing: border-box;" id="windowScalarMinus">–</span><span id="windowScalarPercent" style="width: 40%; display: inline-block; text-align: center; border: solid 1px #E0E0E0; box-sizing: border-box;">100%</span><span style="cursor:pointer; width: 30%; display: inline-block; text-align: center; border: solid 1px #E0E0E0; border-left: none; border-right: none; box-sizing: border-box; color: #909090;" id="windowScalarPlus"> +</span></p>
<p id="windowScalarPixels" style="width:100%; text-align: center;">Simulated window width displayed here.</p>
</t-x>
<t-x>A near future version of DocsJS will generate plain-text and very simple HTML versions of your doc for full compatability and accessibility. Expect a blurb here about thorough accessibility in the near future. I haven't released accessibility yet because I have zero experince on this sensitive topic and I'd rather release DocsJS to the public and seek advice on how to do acessibility correctly. Make sure to use a CDN to devlier the newest version of DocsJS so you'll get the accessibility update right away.
<c-d docsjs-lang="html">Up-to-date CDN:
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Hailiax/DocsJS@1/src/docs.min.js"></script>
<script defer>DocsJS.init();</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Hailiax/DocsJS@1/themes/frost.min.css"></c-d>
</t-x>
</t-p>
<t-p>
<t-l>Customizable</t-l>
<t-x>DocsJS is fully customizable. You can customize this doc below and download DocsJS with your choosen settings or customize DocsJS yourself by checking out the <a onClick="DocsJS.jumpTo('Reference');" href="javascript:void(0);">reference</a>.</t-x>
<e-g docsjs-state="max">For example, this example is already expanded by default, where you manually had to open previous examples. This is set by a simple HTML attribute: docsjs-state="max".</e-g>
</t-p>
</s-c>
<s-c>
<h-d>
<t-l>Customize</t-l>
<t-x>Alrighty so the basic DocsJS loadout isn't good enough for you? You've come to the right place. Here, you can pick between different builds, change some options, and even choose & create your theme! Customizations you make here will reflect on this page itself so you can preview your choices realtime.</t-x>
</h-d>
<t-p>
<t-l>Included packages</t-l>
<t-x>
Core package
</t-x>
<t-x>
Syntax highlighter
</t-x>
<t-x>
Other useful things
</t-x>
</t-p>
<t-p>
<t-l>Javascript options</t-l>
<t-x>
</t-x>
</t-p>
<t-p>
<t-l>CSS themes</t-l>
<t-x>
Choose theme
</t-x>
<t-x>
Edit stylesheet
</t-x>
</t-p>
<t-p>
<t-l>Result</t-l>
<t-x>
Copy paste this into the head, and this into the body
</t-x>
</t-p>
</s-c>
<s-c>
<h-d>
<t-l>API Reference</t-l>
<t-x>You'll find DocsJS' Javascript & HTML API, CSS themeing guidelines, and a quick refresher on how DocsJS' HTML structure works here.</t-x>
</h-d>
<s-c docsjs-state="min">
<h-d>
<t-l>HTML</t-l>
<t-x>Here's an example of a basic doc structure:
<c-d docsjs-lang="html"><div docsjs-tag="DocsJS-This-Baby">
<v-r varName>
<p>Varible Content</p>
</v-r>
<s-c>
<h-d>
<t-l>Sample header</t-l>
<t-x><v-r varName></v-r></t-x>
</h-d>
<t-p>
<t-l>Sample topic</t-l>
<t-x>Wow! What a moving topic this is.</t-x>
<e-g>Here's an example of how this topic will change your life.</e-g>
<e-x>You won't believe what extra details this contains next.</e-x>
</t-p>
</s-c>
</div></c-d>
Below are the recognized docsjs attributes like docjs-state. These attributes work like any data- tag and help control structure. All defaults can be changed through javascript.</t-x>
</h-d>
<t-p docsjs-state="min">
<t-l>docsjs-state</t-l>
<t-x>Allowed values: min, max<br>Allowed on tags: <s-c>, <h-d>, <t-p>, <e-g>, <e-x><br>Defaults: min on <e-g>, <e-x>; max on <s-c>, <h-d>, and <t-p></t-x>
<t-x>The value min will make the section, topic, or example/extraneous minimized initially while max will maximize it initially. This value will change if the user (un)minimizes the tag. If you want to toggle this attribute after the doc has finished loading, do so through javascript with <a onClick="DocsJS.jumpTo('DocsJS.toggle()');" href="javascript:void(0);">DocsJS.toggle()</a>.</t-x>
<e-g>
<c-d docsjs-lang="html"><div docsjs-tag="DocsJS-This-Baby">
<s-c docsjs-state="min">
<h-d>
<t-l>Sample header</t-l>
<t-x>This section (not header) will be minimized initially. This header will be maximized since that's the default. However, a docjs-state="min" can minimize this header.</t-x>
</h-d>
<t-p docsjs-state="min">
<t-l>Sample topic</t-l>
<t-x>This topic will be minimized initially.</t-x>
<e-g>This will be minimized since that's the default.</e-g>
<e-x docsjs-state="max">This will be maximized initially.</e-x>
</t-p>
</s-c>
</div></c-d>
</e-g>
<e-x docsjs-name="Menu">
In this doc, the topic you're currently on will be bolded in the menu. The current topic title (docsjs-tag="menu-title") will be automatically given the attribute docsjs-state="youarehere" while others simply will not have that attribute.
</e-x>
</t-p>
<t-p docsjs-state="min">
<t-l>docsjs-name</t-l>
<t-x>Allowed value type: HTML Content<br>Allowed on tags: <e-g>, <e-x><br>Defaults: Example on <e-g>; More on <e-x></t-x>
<t-x>This value will be the displayed as the title for your ex or eg. It can be plain text or HTML for a more fancy title. If you have changed this attribute after the doc has finished loading, please call <a onClick="DocsJS.jumpTo('DocsJS.toggle()');" href="javascript:void(0);">DocsJS.refresh()</a> to apply your changes.</t-x>
<e-g>
<c-d docsjs-lang="html"><t-p>
<t-l>Sample topic</t-l>
<t-x>Sample text.</t-x>
<e-g docsjs-name="Usage">This will be given the name "Usage".</e-g>
<e-x docsjs-name="<p style='color:#FF0000'>Wow!</p>">This will be given the name "Wow!" in red.</e-x>
</t-p></c-d>
</e-g>
</t-p>
<t-p docsjs-state="min">
<t-l>docsjs-tag</t-l>
<t-x>Allowed values: DocsJS-This-Baby, sc, hd, tp, tl, tx, eg, ex, vr<br>Allowed on tags: <div></t-x>
<t-x>All custom tags get automatically converted into divs with the matching docsjs-tag attribute. However, if you want to bypass the converting step, you can just create a div with the desired tag and it will work exactly the same way as the custom tag. You must wrap all DocsJS tags inside the superparent, which is DocsJS-This-Baby by default. If you have changed this attribute after the doc has finished loading, please call <a onClick="DocsJS.jumpTo('DocsJS.toggle()');" href="javascript:void(0);">DocsJS.refresh()</a> to apply your changes.</t-x>
<e-g>This is what a simple doc will look like after being converted to divs:
<c-d docsjs-lang="html"><div docsjs-tag="DocsJS-This-Baby">
<div docsjs-tag="vr" varName>
<p>Varible Content (The varible tag used to be here)</p>
</div>
<div docsjs-tag="sc">
<div docsjs-tag="hd">
<div docsjs-tag="tl">Sample header</div>
<div docsjs-tag="tx">Varible Content (The varible tag used to be here)</div>
</div>
<div docsjs-tag="tp">
<div docsjs-tag="tl">Sample topic</div>
<div docsjs-tag="tx">Wow! What a moving topic this is.</div>
<div docsjs-tag="eg">Here's an example of how this topic will change your life.</div>
<div docsjs-tag="ex">You won't believe what extra details this contains next.</div>
</div>
</div>
</div></c-d>
</e-g>
<e-x docsjs-name="Internal values">
This tag has other values used internally by DocsJS and can be styled by you. Unless you know what you're doing, adding a div with these docsjs-tag values will screw up your doc. You can find those values and their purpose under "More tags" in the CSS reference.<br><br>
</e-x>
</t-p>
<t-p docsjs-state="min">
<t-l>docsjs-internal</t-l>
<t-x>DocsJS uses many internal tags. Unless you know what you're doing, changing these tags will really screw up your doc. They are: docsjs-extras, docsjs-extra, docsjs-side, docsjs-location, docsjs-pref, docsjs-menu-location, docsjs-menu-destination, docjs-internal.</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>docsjs-lang</t-l>
<t-x>Add this tag to any <c-d> tag you want syntax highlighted. Set it to the language you want it highlighted for. For example <c-d docsjs-lang="html"> will be syntax highlighted for HTML.</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>docsjs-editable</t-l>
<t-x>Add this tag and set it to true to any <c-d> tag you to be editable and vice versa. The default is controlled by <a onClick="DocsJS.jumpTo('.editable');" href="javascript:void(0);">DocsJS.cd.editable</a>. For example, <c-d docsjs-lang="javascript" docsjs-editable="true"> will be editable and <c-d docsjs-lang="javascript" docsjs-editable="false"> will not</t-x>
</t-p>
</s-c>
<s-c docsjs-state="min">
<h-d>
<t-l>CSS</t-l>
<t-x>If you know CSS well, you'll already know how to style the doc. However, here a few things you should know before you start customizing your own theme.</t-x>
</h-d>
<t-p>
<t-l>Selectors</t-l>
<t-x>To style DocsJS, you'll need to use attribute selectors like [docsjs-tag="s-c"] since custom tags are converted to divs (<s-c> => <div docsjs-tag="sc">). You can also style with [docsjs-state="min, max, or youarehere"]. Some other useful selectors to know are the psuedo-classes :first-child and :hover, > (selects immediate children only), + (selects the next sibling), and a regular space which selects all children. The example below shows how you can style sections nested in topics:
<c-d docsjs-lang="css">[docsjs-tag="t-p"] > [docsjs-tag="s-c"]{
border-bottom: solid 1em #FFF;
margin-top: 0;
}</c-d></t-x>
<e-g docsjs-name="More examples">Here are a few snippets from the default theme:
<c-d docsjs-lang="css">[docsjs-tag="t-l"]{
/* This styles title tags */
position: relative;
background-color: rgba(255,255,255,0.85);
padding: 0.83333333em;
padding-right: 3em;
font-size: 1.2em;
cursor: pointer;
}
[docsjs-tag="t-x"],[docsjs-tag="e-g"],[docsjs-tag="e-x"]{
/* This styles tx, eg, and ex tags */
position: relative;
background-color: #FFF;
padding: 1em;
overflow: hidden;
}
[docsjs-tag="t-x"]{
/* This gives tx tags a small border at the top... */
border-top: #E0E0E0 solid 1px;
}
[docsjs-tag="t-l"] + *{
/* ...but this makes sure the first element next to the title doesn't have a border at the top so the first tx tag won't have an unfitting border */
border-top: none;
}
[docsjs-tag="e-x"][docsjs-state="min"],[docsjs-tag="e-g"][docsjs-state="min"]{
/* This styles minimized eg and ex */
padding-top: 0;
padding-bottom: 0;
height: 0;
}
[docsjs-tag='menu-title'][docsjs-state='youarehere']{
/* This bolds the topic the user is currently on in the menu */
font-weight: 700;
}</c-d>
</e-g>
</t-p>
<t-p>
<t-l>More tags</t-l>
<t-x>
You may have noticed that the short two letter tags are not the only values for docsjs-tag. Below, you'll find other values for that attribute that you can style with. Select them like [docsjs-tag="ebefore"]. If you're ever confused on what has each tag, just enter inspect element.<br><br>
<p class="bold">ebefore</p>: div added before each eg and ex which the user can click on to expand or minimize the eg/ex.<br><br>
<p class="bold">column-left, column-right</p>: parent div for the left and right sidebars; <p class="bold">column-content</p>: parent div for eg/ex content in sidebars; <p class="bold">column-filler</p>: div to fill in gaps between column-content, initial column background, and menu sidebar background; <p class="bold">column-handle</p>: area for user to click and drag the sidebars.<br><br>
<p class="bold">menu</p>: parent div for menus; <p class="bold">menu-preferences</p>: parent div for menu preferences; <p class="bold">menu-preferences-item</p>: clickable preference buttons; <p class="bold">menu-title</p>: name of section or topic; <p class="bold">menu-item</p>: parent div a group of menu-titles.<br><br>
<p class="bold">button-menu</p>: clickable parent div for (un)minimizing menus; <p class="bold">button-minimize</p>: clickable parent div for (un)minimizing sections; <p class="bold">button-ebefore</p>: parent div shown on ebefore; <p class="bold">button-parent</p>: parent div of all buttons; <p class="bold">button-child</p>: child elements of buttons that determine how the button looks like.
</t-x>
</t-p>
<t-p>
<t-l>Important</t-l>
<t-x>While DocsJS tries to give you as much freedom as possible for stylying your doc, there are some requirements for your theme:<br><br>
DocsJS only supports <a href="https://www.sitepoint.com/power-em-units-css/" target="_blank" rel="noopener">em units</a>: you must declare a font size in pixels for [docsjs-tag="DocsJS-This-Baby"] and style the rest of your doc in em. DocsJS will scan your styling and save your defined font-size into a javascript varible. If you want to adjust the font-size after your doc has loaded, you must do so through javascript with <a onClick="DocsJS.jumpTo('DocsJS.fontsize.set()');" href="javascript:void(0);">DocsJS.fontsize.set()</a>. Occassionally using other units is fine, but DocsJS can't guarntee that they will scale properly.<br><br>
Padding works well with DocsJS, especially padding-top in tx, eg, and ex. Not only does proper padding make docs easier to read, many DocsJS animations will take padding into account and will be able to create slightly parralax-like effects. Finally, I suggest using a line-height greater than 1em to improve readability. The default theme uses a line-height of 1.4em.<br><br>
You must provide styles for the sidebars and menu. The position of sidebars with change automatically between fixed and absolute. I strongly recommend having an indicator of what menu topic the user is currently on with docsjs-state="youarehere" and indiciating where the user is hovering on the menu.<br><br>
You can play around with how buttons like the minimize and menu buttons are styled. These are controlled by [docsjs="button-parent, button-child"]. If you want a very different type of button look, you may do so through javascript with <a onClick="DocsJS.jumpTo('DocsJS.buttons');" href="javascript:void(0);">DocsJS.buttons</a>. However, please try to make the button look similar for consistency and accessibility reasons.<br><br>
Finally, be creative with your theme! Use easy to read colors and enough contrast so anyone can read your doc. Have fun and I'm sure your theme will look amazing.</t-x>
</t-p>
</s-c>
<s-c docsjs-state="min">
<h-d>
<t-l>Javascript</t-l>
<t-x>DocsJS exposes a javascript object called DocsJS. You can customize everything else through this object or even expand on DocsJS to provide a more unique experince. Below are the varibles and functions that you can call through the DocsJS object.<br><br>
You will find <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector" target="_blank" rel="noopener">.querySelector()</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll" target="_blank" rel="noopener">.querySelectorAll()</a> very helpful when manipiulating DocsJS elements. If you want to get the second topic inside 'this', you would use this.querySelectorAll('[docsjs-tag="t-p"]')[1].</t-x>
</h-d>
<s-c>
<h-d>
<t-l>Callables</t-l>
<t-x>These are functions that can be called.</t-x>
</h-d>
<t-p docsjs-state="min">
<t-l>DocsJS.init()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.init( Callback );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Callback is a <span style="font-weight: 700;">function</span> that is executed when DocsJS has finished initializing.
</t-x>
<t-x>
After your superparent's (div docsjs-tag="DocsJS-This-Baby") DOM is ready and the DocsJS script has loaded, call DocsJS.init() to initialize DocsJS. This can be as simple as placing the following below your superparent div.
<c-d docsjs-lang="html"><script src="docs.js"></script>
<script>DocsJS.init();</script></c-d>
DocsJS.init() adds menus and sidebars, creates binds for events like sidebar drags and hashchange, and calls DocsJS.refresh().
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.refresh()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.refresh( Callback );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Callback is a <span style="font-weight: 700;">function</span> that is executed when DocsJS has been refreshed.
</t-x>
<t-x>
As its name implies, DocsJS.refresh() refreshes the doc. It will handle varibles, convert custom tags to divs and format them, and generate/update the menu.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.toggle()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.toggle( Element, Target? );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Element is the <span style="font-weight: 700;">HTML Node</span> of a topic, section, or eg/ex.<br>
Target is a <span style="font-weight: 700;">string</span> that is either 'min' or 'max'.
</t-x>
<t-x>
If no target is given, DocsJS.toggle() will toggle the state of the given element. E.g. if the element is minimized, DocsJS.toggle() will maximize it and vice versa.<br><br>
If a target is given, DocsJS.toggle() will only set the state of the element to the target. E.g. if the target is 'min' and the element is maximized, DocsJS.toggle() will minimize the element. However, if the target is 'min' and the element is already minimized, DocsJS.toggle() won't do anything.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.fontsize.set()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.fontsize.set( Value );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Value is a <span style="font-weight: 700;">number</span>.
</t-x>
<t-x>
Sets the fontsize of the doc to the given value in pixels. You must change font-size through this, not through CSS.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.cd.getEditor()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.cd.getEditor( Element );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Element is the <span style="font-weight: 700;">HTML Node</span> of a c-d.
</t-x>
<t-x>
This function will return the Ace editor object of the c-d passed as Element. What can you do with the editor object? Find basic usage <a href="https://ace.c9.io/#embedding=&nav=howto" target="_blank" rel="noopener">here</a> and advanced usage <a href="https://ace.c9.io/#embedding=&nav=api&api=editor" target="_blank" rel="noopener">here</a>.
</t-x>
<e-g>
The following will console.log the text content of a c-d with id "editor2".
<c-d docsjs-lang="javascript">var el = document.getElementById('editor2');
var editor = DocsJS.cd.getEditor(el);
var text = editor.getValue();
console.log(text);</c-d>
</e-g>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.cd.refresh()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
None
</t-x>
<t-x>
Refreshes all c-d elements. Calls <a onClick="DocsJS.jumpTo('.cdRefreshed()');" href="javascript:void(0);">DocsJS.events.cdRefreshed()</a> when done.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.apply()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.apply( AppliedFunction );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
AppliedFunction is a <span style="font-weight: 700;">function</span> that accepts two parameters.
</t-x>
<t-x>
Runs the following code:
<c-d docsjs-lang="javascript">var docs = document.querySelectorAll('[docsjs-tag="'+DocsJS.superparent+'"]');
for (var i = 0; i < docs.length; i++){
AppliedFunction(docs[i], i);
}</c-d>
It essentially runs the given function for every DocsJS div to make handling multiple docs easier.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.scrolled()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
None
</t-x>
<t-x>
Executed automatically when the user scrolls and on certain events like minimizing a topic. Should be called if DocsJS elements are moved. This moves the visible menu button and updates the current location in the menu.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.resized()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
None
</t-x>
<t-x>
Executed automatically when the user resizes the window. This adjusts the size of the sidebars. Calls DocsJS.scrolled().
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.animate()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.animate( Arguments );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Arguments is an <span style="font-weight: 700;">object</span> that contains required properties: to, from, duration, step and optional properties: easing, pass, callback.
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Arguments.to and Arguments.from are <span style="font-weight: 700;">number</span>s.<br>
Arguments.duration is a <span style="font-weight: 700;">number</span> to describe time in miliseconds.<br>
Arguments.step is a <span style="font-weight: 700;">function</span> that accepts one numerical argument.<br>
Arguments.easing is a <span style="font-weight: 700;">function</span> to manipulate numbers between 0 and 1. Easing functions given in <a onClick="DocsJS.jumpTo('DocsJS.easings');" href="javascript:void(0);">DocsJS.easings</a> are typically used.<br>
Arguments.pass is <span style="font-weight: 700;">anything</span>. Pass can be used to clean up code or preserve 'this'. Make pass an array to pass multiple varibles.<br>
Arguments.callback is a <span style="font-weight: 700;">function</span> called when the animation is complete.
</t-x>
<t-x>
Super lightweight animator. Animations will run at the highest frame rate possible with a max frame rate of 1000FPS. It will transition the number given as .from to .to and pass the number to .step (one .step execution is one frame). The animation can be eased with the given .easing function and will pass the .pass varible to .step as the second parameter and .callback as the only parameter.
</t-x>
<e-g docsjs-state="max">
The following will animate the width of this's adjacent sibling from 100% to 0% in 350 miliseconds, then setting the element's display style to "none". The animation will run on easeOutQuart easing.
<c-d docsjs-lang="javascript">DocsJS.animate({
from: 100,
to: 0,
duration: 350,
easing: DocsJS.easings.easeOutQuart,
pass: this.nextElementSibling,
step: function(now, pass){
pass.style.width = now + '%';
},
callback: function(pass){
pass.style.display = 'none';
},
});</c-d>
</e-g>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.jumpTo()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.jumpTo( Location );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Location is a <span style="font-weight: 700;">string</span> that is the title of the desired location or the specific period-separated locator.
</t-x>
<t-x>
Animates window's scroll to the top of the desired topic or section header, including Jump to top and Jump to bottom. Because there may be duplicate titles, passing the specific period-separated locator is preferred to passing the title of a section header or topic.<br><br>
What is a period-separated locator? It's a string that basiclly describes a specific location by describing the nesting order. The first number is the number is the superparent the location is in. Since docs normally have just one superparent div, this is just 0 most of the time. (Keep in mind that counting numbers start from 0). The next numbers describe the nesting order. The 3rd section in this doc will have the locator '0.2'. The 5th topic in the 2nd section will be '0.1.4'. The 10th topic in the 2nd section in the 4th topic in the 1st section will be '0.0.3.1.9'.<br><br>
If a title and not a period-separated locator is given, DocsJS will look for a section header or topic that matches the title, get its period-separated locator, and then call DocsJS.jumpTo() passing the period-separated locator. If the URL has a hash (https://hailiax.io/docsjs#ThisIsTheHashSinceItComesAfterTheHashTag), DocsJS will call DocsJS.jumpTo() passing the <a href="https://www.w3schools.com/tags/ref_urlencode.asp" target="_blank" rel="noopener">decoded</a> hash and then clear the hash. Cliking on the menu will also call DocsJS.jumpTo() passing a period-separated locator.
</t-x>
<e-g docsjs-name="Examples">
Example of an inline navigation button. Clicking on the button will scroll the user to a section or topic titled "Javascript".
<c-d docsjs-lang="html"><span onClick="DocsJS.jumpTo('Javascript');" style="color: #505050; text-decoration: underline; cursor: pointer;">Button One</span></c-d>
Here's a button that uses the period-separated locator. It will also scroll the user to the "Javascript" section.
<c-d docsjs-lang="html"><span onClick="DocsJS.jumpTo('0.5.2');" style="color: #505050; text-decoration: underline; cursor: pointer;">Button Two</span></c-d>
You can also make a button that changes the hash of the URL.
<c-d docsjs-lang="html"><a style="color: #505050;" href="#Javascript">Button Three</a>
<a style="color: #505050;" href="#0.5.2">Button Four</a></c-d>
Results: <span onClick="DocsJS.jumpTo('Javascript');" style="color: #505050; text-decoration: underline; cursor: pointer;">Button One</span> <span onClick="DocsJS.jumpTo('0.5.2');" style="color: #505050; text-decoration: underline; cursor: pointer;">Button Two</span> <a style="color: #505050;" href="#Javascript">Button Three</a> <a style="color: #505050;" href="#0.5.2">Button Four</a>
</e-g>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.rotate()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.rotate( Element, Angle );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Element is a <span style="font-weight: 700;">HTML Node</span>.<br>
Angle is a <span style="font-weight: 700;">Number</span> describing an angle in degrees.
</t-x>
<t-x>
Cross-browser CSS rotates the given element to the given angle by using the styles: WebkitTransform, msTransform, transform, filter, msFilter.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.addEvent()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.addEvent( Element, Event, Function, Options? );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Element is a <span style="font-weight: 700;">HTML Node</span>.<br>
Event is a <span style="font-weight: 700;">string</span> describing an HTML event (without the prefix, on).<br>
Function is a <span style="font-weight: 700;">function</span>.<br>
Options is an <span style="font-weight: 700;">object</span>.
</t-x>
<t-x>
Cross-browser implementation of addEventListener. It binds the given event to the given element to execute the given function. The options object will be added to supported browsers and can contain options like <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" target="_blank" rel="noopener">passive: true</a>.
</t-x>
<e-g docsjs-state="max">
The following will alert the user "Hello World" when an element with the id "button" is pressed.
<c-d docsjs-lang="javascript">DocsJS.addEvent(document.getElementById('button'),'mousedown',function(){
alert('Hello World');
},{
passive:true
});</c-d>
</e-g>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.removeEvent()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.removeEvent( Element, Event, Function, Options? );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Element is a <span style="font-weight: 700;">HTML Node</span>.<br>
Event is a <span style="font-weight: 700;">string</span> describing an HTML event (without the prefix, on).<br>
Function is a <span style="font-weight: 700;">function</span>.<br>
Options is an <span style="font-weight: 700;">object</span>.
</t-x>
<t-x>
Removes an event added with DocsJS.addEvent() with the given parameters.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.getStyle()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.getStyle( Element, Property );
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Element is a <span style="font-weight: 700;">HTML Node</span>.<br>
Property is a <span style="font-weight: 700;">string</span> describing a CSS property.<br>
</t-x>
<t-x>
Cross-browser method for getting the current property of an element.
</t-x>
</t-p>
</s-c>
<s-c>
<h-d>
<t-l>Settables</t-l>
<t-x>These are javascript properties that can be set</t-x>
</h-d>
<t-p docsjs-state="min">
<t-l>DocsJS.events</t-l>
<t-x>
This object contains functions that are fired on certain DocsJS actions. By default they do nothing, but you can redefine these functions as you like, for example:
<c-d docsjs-lang="javascript">DocsJS.events.menuToggle = function(el){
var rand = function(){return Math.round(Math.random()*255)};
el.style.backgroundColor = 'rgba('+rand()+','+rand()+','+rand()+',1)';
}</c-d>
will change the background color of the menu that was just opened to a random color.
</t-x>
<t-p docsjs-state="min">
<t-l>.ready()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
None
</t-x>
<t-x>
This function is called when DocsJS has finished intializing. This is fired after the callback of DocsJS.init().
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.columnResize()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.events.columnResize( Side )
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Side is a <span style="font-weight: 700;">string</span> that is either 'left' or 'right'.
</t-x>
<t-x>
This function is called when a sidebar has resized (dragged) by the user. The function will be passed 'left' if the left sidebar was resized and 'right' for the right sidebar.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.sectionToggle()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.events.sectionToggle( Section )
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Section is a <span style="font-weight: 700;">HTML Node</span>.
</t-x>
<t-x>
This function is called when a section has been minimized or maximized. The function is passed the HTML node of that section.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.topicToggle()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.events.topicToggle( Topic )
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Topic is a <span style="font-weight: 700;">HTML Node</span>.
</t-x>
<t-x>
This function is called when a topic has been minimized or maximized. The function is passed the HTML node of that topic.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.menuToggle()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.events.menuToggle( Menu )
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Menu is a <span style="font-weight: 700;">HTML Node</span>.
</t-x>
<t-x>
This function is called when a menu has been opened or closed. The function is passed the HTML node of that menu.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.eToggle()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.events.eToggle( ExEg )
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
ExEg is a <span style="font-weight: 700;">HTML Node</span>.
</t-x>
<t-x>
This function is called when an ex or eg has been minimized or maximized. The function is passed the HTML node of that eg or ex.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.cdRefreshed()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
None
</t-x>
<t-x>
Called when c-d elements have been refreshed. This is called every time a sidebar has been activated or put away.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.preferenceChanged()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.events.preferenceChanged( Preference )
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Preference is a <span style="font-weight: 700;">string</span> that is one of the following: 'Fontsize up', 'Fontisze down', 'Minimize all', 'Minimize half', 'Minimize none', 'Invert colors', 'Lightning', 'Reset'.
</t-x>
<t-x>
This function is called when a preference been changed by the user. The function is passed the name of the changed preference.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.jumpTo()</t-l>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Parameters</p>
DocsJS.events.jumpTo( Location )
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Where</p>
Location is a <span style="font-weight: 700;">string</span> that is one of the following: 'top', 'bottom', or the <a onClick="DocsJS.jumpTo('DocsJS.jumpTo()');" href="javascript:void(0);">period-separated locator</a>.
</t-x>
<t-x>
This function is called when <a onClick="DocsJS.jumpTo('DocsJS.jumpTo()');" href="javascript:void(0);">DocsJS.jumpTo()</a> is called with a valid location. The function is passed 'top' if the user jumped to the top of the page, bottom if the user jumped to the bottom of the page, or the <a onClick="DocsJS.jumpTo('DocsJS.jumpTo()');" href="javascript:void(0);">period-separated locator</a> for all other locations.
</t-x>
</t-p>
</t-p>
<t-p docsjs-state="min">
<t-l>DocsJS.buttons</t-l>
<t-x>
All buttons used in DocsJS are made of just HTML and CSS stored in this property. You can customize buttons and their animations by changing the values of the properties here. If you want to use an image as a button, simply use a <img> tag. I would recommend images size 256x256 to ensure clarity on high-def screens.
</t-x>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Animatable buttons</p>
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 <a onClick="DocsJS.jumpTo('.duration');" href="javascript:void(0);">DocsJS.animation.duration</a> miliseconds. now will progress from 0 to 1 in the foward animation and 1 to 0 in the reverse animation.
</t-x>
<e-g docsjs-name=".html() example">
<c-d docsjs-lang="javascript">DocsJS.buttons.minimize.html = function(){
'use strict';
return '<div docsjs-tag="button-parent"><div style="position: absolute; height: 100%; width: 100%; -ms-filter: '+"'progid:DXImageTransform.Microsoft.Matrix(M11=0.4999999999999997, M12=0.8660254037844388, M21=-0.8660254037844388, M22=0.4999999999999997, SizingMethod='auto expand')'"+';filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.4999999999999997,M12=0.8660254037844388,M21=-0.8660254037844388,M22=0.4999999999999997,SizingMethod='+"'auto expand'"+');-o-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);transform: rotate(-60deg);"><div style="position: absolute; width: 100%; height: 50%; overflow: hidden;"><div docsjs-tag="button-child" style="background-color: transparent; width: 100%; height: 200%; border-radius: 10000000px; top: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc);"></div></div></div><div style="position: absolute; width: 100%; height: 50%; top: 50%; overflow: hidden;"><div docsjs-tag="button-child" style="background-color: transparent; width: 100%; height: 200%; border-radius: 10000000px; top: -100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc);"></div></div></div>';
}</c-d>
</e-g>
<e-g docsjs-name=".animation() example">
<c-d docsjs-lang="javascript">DocsJS.buttons.minimize.animation = function(button, now){
'use strict';
DocsJS.rotate(button.firstChild, (1-now)*60 - 60);
DocsJS.rotate(button, (1-now)*60);
}</c-d>
</e-g>
<t-p docsjs-state="min">
<t-l>.minimize.</t-l>
<t-x>
This button is by default the circular buttons shown on the right of h-d titles. Clicking on this button will cause the header's section and the header itself to minimize. The default animation opens/closes the circle.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.menu.</t-l>
<t-x>
This button is by default the equals-sign shaped button at the right of t-p titles. Clicking on this will open/close the menu at the top of that topic. The default animations rotates the two bars into a cross shape.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.ex.</t-l>
<t-x>
This button is shown to the left of e-x names. Clicking on this will reveal/close the e-x. The default animation rotates this 90 degrees.
</t-x>
</t-p>
<t-p docsjs-state="min">
<t-l>.eg.</t-l>
<t-x>
This button is shown to the left of e-g names. Clicking on this will reveal/close the e-g. The default animation rotates this 90 degrees.
</t-x>
</t-p>
<t-x>
<p style="font-size:1.2em; font-weight: 700; line-height: 1.75em;">Simple buttons</p>
The below do not animate. They are simply functions that return HTML strings.
</t-x>
<e-g>
<c-d docsjs-lang="javascript">DocsJS.buttons.close = function(){
'use strict';
return '<div docsjs-tag="button-parent"><div docsjs-tag="button-child" style="height: 100%; border: none; -ms-filter: '+"'progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand')';filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand'"+');-o-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);"></div><div docsjs-tag="button-child" style="width: 100%; border: none; -ms-filter: '+"'progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477, M22=0.7071067811865474,SizingMethod='auto expand')';filter: progid:DXImageTransform.Micrxosoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand'"+');-o-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);"></div></div>';