← Back to branch summary

~ubuntu-branches/ubuntu/quantal/maas/quantal-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/panel/panel-form-example.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/panel/panel-form-example.html
1
 
<!DOCTYPE html>
2
 
<html lang="en" class="yui3-loading">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Using a panel to show a modal form</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.4.1/build/cssreset/reset-min.css&amp;3.4.1/build/cssfonts/fonts-min.css&amp;3.4.1/build/cssbase/base-min.css">
7
 
    <script src="../../build/yui/yui-min.js"></script>
8
 
</head>
9
 
<body class="yui3-skin-sam">
10
 
 
11
 
 
12
 
<style type="text/css">
13
 
        
14
 
#desc {
15
 
  margin-bottom:20px;
16
 
  border-bottom:1px dotted #333;
17
 
}
18
 
#desc span {
19
 
  background:#a3350d;
20
 
  padding:2px;
21
 
  color:#f27243;
22
 
}
23
 
 
24
 
.yui3-panel {
25
 
  outline:none;
26
 
 
27
 
}
28
 
 
29
 
.yui3-panel-content .yui3-widget-hd {
30
 
  font-weight:bold;
31
 
}
32
 
 
33
 
.yui3-panel-content .yui3-widget-bd {
34
 
  padding:15px;
35
 
}
36
 
.yui3-panel-content label {
37
 
  margin-right:30px;
38
 
}
39
 
.yui3-panel-content fieldset {
40
 
  border:none;
41
 
  padding:0;
42
 
}
43
 
.yui3-panel-content input[type="text"] {
44
 
  border:none;
45
 
  border:1px solid #ccc;
46
 
  padding: 3px 7px;
47
 
  -webkit-border-radius:2px;
48
 
  -moz-border-radius:2px;
49
 
  border-radius:2px;
50
 
  font-size:100%;
51
 
  width:200px;
52
 
}
53
 
#addRow {
54
 
  margin-top:10px;
55
 
}
56
 
</style>
57
 
<h1>Using a panel to show a modal form</h1>
58
 
<h2>Using a panel to show a modal form</h2>
59
 
<div class="yui3-u-1">
60
 
<div id="dt"></div>
61
 
<p><input type="button" id="addRow" value="Add"></p>
62
 
 
63
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non felis dolor. Fusce rutrum velit quis sem luctus ultrices. Vivamus bibendum mollis enim, vel auctor massa convallis accumsan. Curabitur laoreet nunc vel leo laoreet sed feugiat elit tempor. Sed fermentum ligula ut nisi lobortis pretium. Donec ut est at leo rhoncus ultricies eu at nunc. Phasellus semper, lacus ac pulvinar dictum, orci orci iaculis nulla, non condimentum nibh justo eu felis. Nam sed orci a ligula vehicula rutrum. Donec sodales euismod laoreet. Mauris ut augue purus. Nulla porta vehicula ligula, id viverra lacus hendrerit ut. Donec eu est vitae orci ullamcorper pellentesque. Morbi molestie placerat aliquet. Aliquam aliquet consectetur porttitor. Mauris semper tincidunt nisi, in dignissim turpis auctor ac. Sed at enim ligula. Aenean quis dignissim augue.</p>
64
 
 
65
 
<p>Nunc quis sem tortor. Quisque lorem quam, auctor sit amet porttitor pretium, accumsan quis arcu. Mauris blandit, enim nec fermentum faucibus, massa lectus posuere massa, eget consequat leo risus in risus. Sed ornare euismod orci sit amet commodo. Suspendisse ultrices dui ut mi venenatis vitae tincidunt dolor pulvinar. Proin at nibh sed libero molestie facilisis. Maecenas magna purus, lacinia eu tempus in, elementum a est. Morbi eget magna sed justo dignissim pulvinar nec vitae justo. Aliquam tincidunt arcu eget orci tempus ornare ullamcorper dolor aliquet. Vestibulum congue posuere porttitor. Pellentesque magna erat, dapibus nec tristique at, posuere sed nisl. In pretium, risus at volutpat pretium, augue nunc commodo metus, vitae ullamcorper risus quam sagittis turpis. Proin eget cursus quam. Sed elit tortor, tempus pharetra lacinia vel, ultrices nec est. Praesent nibh risus, vulputate nec tincidunt eget, lacinia sed eros. Vestibulum vel velit massa. In hac habitasse platea dictumst. Etiam eu magna ligula.</p>
66
 
 
67
 
<p>Vivamus vel dui at velit laoreet accumsan. Pellentesque posuere est et urna euismod elementum. Fusce a nibh nisl, vitae iaculis magna. Nulla sit amet odio in elit posuere pellentesque. Nulla sit amet eros eu odio tempus feugiat at vel purus. In vehicula feugiat purus eu ultricies. Aliquam vitae sapien quis augue gravida pretium. Morbi non lectus eu nisi varius mollis. Maecenas eget nisl sit amet turpis cursus gravida at quis odio. Cras viverra eros placerat erat ultricies ultricies.</p>
68
 
 
69
 
<p>Aenean malesuada erat vel ipsum iaculis sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lectus metus, accumsan in molestie vitae, luctus non nibh. Vestibulum rutrum, nulla vel tristique varius, metus nibh tincidunt erat, at mattis turpis justo quis velit. Donec ac lobortis mauris. Nam nulla tellus, placerat sit amet tempus non, consequat sed nibh. Curabitur eget ligula a sem dictum fringilla. Cras fermentum blandit nulla ut vulputate. Nullam iaculis venenatis orci, et tincidunt lorem pellentesque eget. Morbi sit amet nibh id sapien rhoncus mollis. Vestibulum quis neque massa, eget interdum dolor. Donec rhoncus, metus non dignissim imperdiet, nulla orci eleifend sapien, at interdum augue lacus ac quam. Duis ullamcorper, augue eget semper varius, mi nisi rutrum mi, non sagittis neque quam nec ipsum. Curabitur in mauris lacus. Ut porta porttitor nunc, id elementum quam mattis quis. Donec quis libero eros, at malesuada lectus. Cras lectus tellus, pharetra ut tempor ut, fringilla in turpis.</p>
70
 
 
71
 
<p>Quisque tempor turpis non ligula ornare cursus. Vivamus tempus lobortis urna sed vestibulum. Duis id ligula eu dolor feugiat laoreet sit amet in enim. Integer ullamcorper erat at sem mattis quis tempor metus ullamcorper. Praesent sed diam elit. Donec vel lorem libero. Suspendisse nec arcu ac purus interdum mollis congue imperdiet erat. Suspendisse eu tristique enim. Quisque volutpat, leo sit amet iaculis luctus, velit neque suscipit nisi, vitae placerat felis diam laoreet metus. Suspendisse consectetur pulvinar commodo. Nulla magna quam, scelerisque blandit pellentesque sed, euismod nec nulla. Curabitur vitae est quis sem condimentum dictum. Aenean tincidunt dolor ac orci consectetur id pulvinar justo aliquam. Proin ante nulla, ullamcorper sit amet auctor in, pulvinar volutpat quam. Sed vitae dolor dui, sed tincidunt nunc. Phasellus euismod consequat fringilla. Quisque semper dolor eget tellus sagittis porta sit amet quis libero.</p>
72
 
<div id="panelContent">
73
 
    <div class="yui3-widget-bd">
74
 
    <form>
75
 
      <fieldset>
76
 
        <p><label for="id">ID</label><br/>
77
 
        <input type="text" name="id" id="productId" placeholder=""></p>
78
 
        <p><label for="name">Name</label><br/>
79
 
        <input type="text" name="name" id="name" value="" placeholder=""></p>
80
 
        <p><label for="password">Price</label><br/>
81
 
        <input type="text" name="price" id="price" value="" placeholder="$"></p>
82
 
      </fieldset>
83
 
      </form>
84
 
  </div>
85
 
</div>
86
 
<div id="nestedPanel"></div>
87
 
</div>
88
 
<script type="text/javascript">
89
 
        YUI().use("datatable-base", "panel", "dd-plugin", function(Y) {
90
 
 
91
 
 
92
 
    //Create the datatable with some gadget information
93
 
    var cols = ["id","name","price"],
94
 
    data = [
95
 
        {id:"ga-3475", name:"gadget", price:"$6.99"},
96
 
        {id:"sp-9980", name:"sprocket", price:"$3.75"},
97
 
        {id:"wi-0650", name:"widget", price:"$4.25"}
98
 
    ],
99
 
    dt = new Y.DataTable.Base({
100
 
        columnset: cols,
101
 
        recordset: data,
102
 
        summary: "Price sheet for inventory parts",
103
 
        caption: "Price sheet for inventory parts"
104
 
    }),
105
 
 
106
 
    //Create the main modal form
107
 
    panel = new Y.Panel({
108
 
      srcNode: "#panelContent",
109
 
      width: 250,
110
 
      centered: true,
111
 
      visible: false,
112
 
      modal:true,
113
 
      zIndex:5,
114
 
      headerContent: "Add A New Product",
115
 
      plugins: [Y.Plugin.Drag]
116
 
    }),
117
 
 
118
 
    addRowBtn = Y.one("#addRow"),
119
 
    nestedPanel;
120
 
 
121
 
 
122
 
    //Render The Datatable
123
 
    dt.render("#dt");
124
 
 
125
 
    //Add the footer buttons to the modal form
126
 
    panel.addButton(
127
 
      {
128
 
          value: "Add Item",
129
 
          action: function(e) { 
130
 
            e.preventDefault(); 
131
 
            addItem();
132
 
          },
133
 
          section: Y.WidgetStdMod.FOOTER
134
 
      }
135
 
    );
136
 
    panel.addButton(
137
 
      {
138
 
          value: "Remove All Items",
139
 
          action: function(e) { 
140
 
            e.preventDefault(); 
141
 
            removeAllItemsConfirm();
142
 
          },
143
 
          section: Y.WidgetStdMod.FOOTER
144
 
      }
145
 
    );
146
 
    
147
 
    //Render the modal form
148
 
    panel.render();
149
 
 
150
 
    //When the addRowBtn is pressed, show the modal form
151
 
    addRowBtn.on('click', function(e) {
152
 
      panel.show();
153
 
    });
154
 
 
155
 
    //Define the addItem function - this will be called 
156
 
    //when "Add Item" is pressed on the modal form
157
 
    var addItem = function() {
158
 
      var o = {}, 
159
 
      id = Y.one('#productId'),
160
 
      name = Y.one('#name'),
161
 
      price = Y.one('#price');
162
 
 
163
 
      o.id = id.get("value");
164
 
      o.name = name.get("value");
165
 
      o.price = price.get("value");
166
 
 
167
 
      id.set("value", "");
168
 
      name.set("value", "");
169
 
      price.set("value", "");
170
 
 
171
 
 
172
 
      data.push(o);
173
 
      dt.set('recordset', data).render();
174
 
      dt.render();
175
 
      panel.hide();
176
 
    };
177
 
 
178
 
    //Define the removeItems function - this will be called 
179
 
    //when "Remove All Items" is pressed on the modal form
180
 
    //and is confirmed "yes" by the nested panel.
181
 
    var removeItems = function() {
182
 
      data = [];
183
 
      dt.set('recordset', data).render();
184
 
      dt.render();
185
 
      panel.hide();
186
 
    };
187
 
 
188
 
 
189
 
    //Instantiate the nested panel if it doesn't exist, otherwise just show it.
190
 
    var removeAllItemsConfirm = function() {
191
 
      if (!nestedPanel) {
192
 
        nestedPanel = new Y.Panel({
193
 
          bodyContent: "Are you sure you want to remove all items?",
194
 
          zIndex: 6,
195
 
          centered:true,
196
 
          width:400,
197
 
          modal:true,
198
 
          buttons: [
199
 
            
200
 
            {
201
 
                value: "Yes",
202
 
                action  : function(e) { 
203
 
                  e.preventDefault(); 
204
 
                  nestedPanel.hide();
205
 
                  panel.hide();
206
 
                  removeItems();
207
 
                },
208
 
                section: Y.WidgetStdMod.FOOTER
209
 
            },
210
 
            {
211
 
                value: "No",
212
 
                action: function(e) { 
213
 
                  e.preventDefault(); 
214
 
                  nestedPanel.hide();
215
 
                },
216
 
                section: Y.WidgetStdMod.FOOTER
217
 
            }
218
 
          ]
219
 
        }).render('#nestedPanel');
220
 
      }
221
 
 
222
 
      else {
223
 
        nestedPanel.show();
224
 
      }
225
 
 
226
 
    }
227
 
});
228
 
</script>
229
 
 
230
 
 
231
 
</body>
232
 
</html>