root / trunk / demos / storage / editor.html

Revision 7812, 3.8 kB (checked in by BradNeuberg, 22 months ago)

Sped up the page load time of Moxie; the bottleneck was the number of resources being loaded on page load, in addition to the synchronous network calls for Dojo Widget for the Editor2 widget. At the beginning of the optimization session we had 27 resources on page load -- now we have 2. Page load time is much faster. This includes a new 'moxie' task in buildscripts/build.xml, but I'm not going to check that in until we do the Dojo Offline branch tomorrow morning because the head of subversion is changing too much for us

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd"> 
3
4<html>
5
6<head>
7        <title>Moxie</title>
8
9        <script type="text/javascript">
10                var djConfig =
11                                                {
12                                                        isDebug: false,
13                                                        parseWidgets: false,
14                                                        searchIds: ["storageValue"]
15                                                };
16        </script>
17       
18        <script type="text/javascript" src="../../dojo.js"></script>
19        <script type="text/javascript" src="editor.js"></script>
20       
21        <link   rel="stylesheet" 
22                        type="text/css" 
23                        href="../../src/off/ui-template/widget.css"></link>
24       
25        <style type="text/css">
26                body, html { padding: 1em; }
27                #fileWidget label { font-weight: bold; }
28                select { display: block; }
29               
30                #wrapper { clear: both; }
31                #title { clear: none; background-color: #9DADB9; width: 100%; position: absolute; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 0px 6px; border: 0px; height: 1em; }
32                #title a { color: black; text-decoration: none; }
33                #fileWidget { width: 13em; margin-bottom: 1em; }
34                #content-container { width: 100%; margin-left: -13.5em; float: right; margin-top: 2em; z-index: 1; position: relative; }
35                #content { margin-left: 13.5em; padding-left: 30px; overflow: hidden; }
36                #sidebar { float: left; width: 13.5em; margin-top: 2em; z-index: 2; position: relative; }
37                #storageKeyContainer { margin-bottom: 1em; }
38                #directoryContainer { margin-bottom: 1em; }
39                #storageKey { width: 10em; }
40                #directory { width: 13em; }
41                #storageKey, #directory { margin-top: 0.3em; }
42                #saveButton { margin-left: 0.2em; }
43               
44                .widget { border: 2px solid #CDDDE9; }
45                .widgetTitleBar { background-color: #CDDDE9; padding-top: 0.2em; padding-bottom: 0.2em; }
46                .widgetTitleText { vertical-align: middle; font-weight: bold; font-size: 14pt; padding-left: 2px; }
47                .widgetContents { padding: 8px 5px 8px 5px; }
48                .status { position: absolute; right: 5px; padding-left: 5px; padding-right: 5px; background: red; color: white; }
49               
50                /* Force the Editor2Toolbar widget to use a single GIF file for all it's icons */
51                .dojoE2TBIcon { background-image: url(../../src/widget/templates/buttons/aggregate.gif) !important; }
52        </style>
53</head>
54
55<body>
56        <div id="top">
57                <h1 id="title"><a href="about.html" target="_new">Moxie</a></h1>
58        </div>
59       
60        <div id="wrapper">
61                <div id="sidebar">
62                        <div id="fileWidget" class="widget">
63                                <div class="widgetTitleBar">
64                                        <span class="widgetTitleText">
65                                                Files
66                                        </span>
67                                </div>
68                               
69                                <div class="widgetContents">
70                                        <div id="storageKeyContainer">
71                                                <label for="storageKey">
72                                                        File Name:
73                                                </label>
74                                               
75                                                <input type="text" id="storageKey" name="storageKey">
76                                               
77                                                <button id="saveButton">Save</button>
78                                        </div>
79                                               
80                                        <div id="directoryContainer">
81                                                <label for="storageKey">
82                                                        Load File:
83                                                </label>
84                                               
85                                                <select id="directory" size="1"></select>
86                                        </div>
87                                </div>
88                        </div>
89               
90                        <!--
91                                Place the Dojo Offline widget here; it will be automagically
92                                filled into any element with ID "dot-widget".
93                         -->
94                        <div id="dot-widget"></div>     
95                </div>
96               
97                <div id="content-container">
98                        <div id="content">
99                                <div id="editorWidget" class="widget">
100                                        <div class="widgetTitleBar">
101                                                <span class="widgetTitleText">
102                                                        Editor
103                                                </span>
104                                        </div>
105                                       
106                                        <div class="widgetContents">
107                                            <div                id="storageValue"
108                                                                dojoType="Editor2" 
109                                                                items="textGroup;|;blockGroup;|;justifyGroup;|;colorGroup;|;listGroup;|;indentGroup;|;linkGroup;"
110                                                                minHeight="10em" 
111                                                                focusOnLoad="true">
112                                                        Click Here to Begin Editing
113                                                </div>
114                                        </div>
115                                </div>
116                        </div>
117                </div>
118        </div>
119       
120        <script>
121                if(dojo.render.html.safari){
122                        dojo.byId(storageValue).setAttribute("height", "500px");
123                }
124        </script>
125</body>
126
127</html>
Note: See TracBrowser for help on using the browser.