4 Gallery
.entryOrder
= [];
5 Gallery
.runningDemo
= null;
8 * Shortcut for creating HTML associated with a parent.
10 Gallery
.create
= function(type
, parent
, className
) {
11 var elem
= document
.createElement(type
);
12 parent
.appendChild(elem
);
14 elem
.className
= className
;
19 Gallery
.start
= function() {
20 Gallery
.toc
= document
.getElementById("toc");
21 Gallery
.workarea
= document
.getElementById("workarea");
22 Gallery
.subtitle
= Gallery
.create("div", Gallery
.workarea
);
23 Gallery
.subtitle
.id
= "subtitle";
24 Gallery
.workareaChild
= Gallery
.create("div", Gallery
.workarea
);
25 Gallery
.demotitle
= document
.getElementById("demotitle");
26 Gallery
.textarea
= new TextArea();
27 Gallery
.textarea
.cancel
.style
.display
= "none";
28 Gallery
.textarea
.width
= 600;
29 Gallery
.textarea
.height
= 400;
31 for (var idx
in Gallery
.entryOrder
) {
32 var id
= Gallery
.entryOrder
[idx
];
33 var demo
= Gallery
.entries
[id
];
35 var div
= Gallery
.create("div", Gallery
.toc
, "entry");
37 var innerDiv
= Gallery
.create("div", div
, "");
39 // Storing extra data in the demo object.
41 demo
.innerDiv
= innerDiv
;
43 innerDiv
.textContent
= demo
.name
;
44 div
.onclick
= function(demo
, id
) { return function() {
45 if (Gallery
.runningDemo
!= null) {
46 Gallery
.runningDemo
.innerDiv
.className
= "";
47 if (Gallery
.runningDemo
.clean
!= null) {
48 Gallery
.runningDemo
.clean(Gallery
.workareaChild
);
51 Gallery
.subtitle
.innerHTML
= "";
53 Gallery
.demotitle
.textContent
= demo
.title
? demo
.title
: "";
54 demo
.innerDiv
.className
= "selected";
56 var htmlLink
= Gallery
.create("a", Gallery
.subtitle
);
57 htmlLink
.textContent
= "HTML";
60 Gallery
.subtitle
.appendChild(document
.createTextNode(" "));
62 var javascriptLink
= Gallery
.create("a", Gallery
.subtitle
);
63 javascriptLink
.textContent
= "Javascript";
64 javascriptLink
.href
= "#";
66 Gallery
.subtitle
.appendChild(document
.createTextNode(" "));
68 var cssLink
= Gallery
.create("a", Gallery
.subtitle
);
69 cssLink
.textContent
= "CSS";
72 Gallery
.workareaChild
.id
= id
;
73 location
.hash
= "g/" + id
;
75 Gallery
.workareaChild
.innerHTML
='';
77 demo
.setup(Gallery
.workareaChild
);
80 var html
= Gallery
.workareaChild
.innerHTML
;
82 htmlLink
.onclick
= function() {
83 Gallery
.textarea
.show("HTML", html
);
86 javascriptLink
.onclick
= function() {
87 Gallery
.textarea
.show("Javascript", demo
.run
.toString());
90 cssLink
.onclick
= function() {
91 var css
= getCss(demo
.title
);
92 Gallery
.textarea
.show("CSS", css
);
95 demo
.run(Gallery
.workareaChild
);
96 Gallery
.runningDemo
= demo
;
100 Gallery
.hashChange();
102 window
.onhashchange
= Gallery
.setHash
;("hashchange", Gallery
.hashChange
, false);
105 var getCss
= function(section
) {
106 // Pretty presumptive of me to assume the first style sheet is the correct one.
107 // TODO(konigsberg): find the right style sheet by searching.
108 var ss
= document
.styleSheets
[0];
109 return ss
.toString();
112 Gallery
.register
= function(id
, demo
) {
113 if (Gallery
.entries
[id
]) {
114 throw id
+ " already registered";
116 Gallery
.entries
[id
] = demo
;
117 Gallery
.entryOrder
.push(id
);
120 Gallery
.hashChange
= function(event
) {
122 if (location
.hash
.indexOf("#g/") == 0) {
123 var id
= location
.hash
.substring(3) + "-toc";
124 var elem
= document
.getElementById(id
);
129 Gallery
.workareaChild
.innerHTML
= "<h3>Select a demo from the gallery on the left</h3>"