|
1 {% extends "soc/models/edit.html" %} |
|
2 {% comment %} |
|
3 Licensed under the Apache License, Version 2.0 (the "License"); |
|
4 you may not use this file except in compliance with the License. |
|
5 You may obtain a copy of the License at |
|
6 |
|
7 http://www.apache.org/licenses/LICENSE-2.0 |
|
8 |
|
9 Unless required by applicable law or agreed to in writing, software |
|
10 distributed under the License is distributed on an "AS IS" BASIS, |
|
11 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
12 See the License for the specific language governing permissions and |
|
13 limitations under the License. |
|
14 {% endcomment %} |
|
15 |
|
16 {% block stylesheet %} |
|
17 {{ block.super }} |
|
18 <link rel='stylesheet' href='/soc/content/css/jquery-ui-sortable-090806.css' |
|
19 type='text/css' media='all' /> |
|
20 {% endblock %} |
|
21 |
|
22 {% block scripts %} |
|
23 {{ block.super }} |
|
24 <script type="text/javascript" src="/jquery/jquery-in-place-edit.js"></script> |
|
25 <script type="text/javascript" src="/jquery/jquery-ui.sortable.js"></script> |
|
26 <script type="text/javascript"> |
|
27 var submit_handler = function(element, id, value) { |
|
28 $.get("/ghop/program/difficulty_tag_edit", |
|
29 { 'tag_data': [$("#"+id).attr("name"), value], |
|
30 'program_key_name': '{{ program_key_name }}' }, |
|
31 function(data) { |
|
32 if (!data) { |
|
33 $("#"+id).remove(); |
|
34 } else { |
|
35 $("#"+id).attr('name', data); |
|
36 } |
|
37 } |
|
38 ); |
|
39 return true; |
|
40 }; |
|
41 |
|
42 var cancel_handler = function(element) { |
|
43 // Nothing |
|
44 return true; |
|
45 }; |
|
46 |
|
47 // Enable in-place-edit |
|
48 $(document).ready(function(){ |
|
49 |
|
50 // paragraph, list examples |
|
51 $(".in-place-edit").children().inPlaceEdit({ |
|
52 submit : submit_handler, |
|
53 cancel : cancel_handler |
|
54 }); |
|
55 |
|
56 $("#dynamic-add").sortable({ |
|
57 update : function () { |
|
58 var order = $('#dynamic-add').sortable('toArray'); |
|
59 var new_order = new Array(); |
|
60 for (i in order) { |
|
61 if (order[i]) |
|
62 new_order[i] = $("#"+order[i]).attr("name"); |
|
63 } |
|
64 $.get("/ghop/program/difficulty_tag_edit", |
|
65 { 'order': new_order, |
|
66 'program_key_name': '{{ program_key_name }}' } |
|
67 ); |
|
68 } |
|
69 }); |
|
70 }); |
|
71 </script> |
|
72 {% endblock %} |
|
73 |
|
74 {% block body %} |
|
75 To add new tags click on Add button. To edit a tag click on the tag. To |
|
76 delete a tag click on it and make its content empty. To order them drag and |
|
77 drop the tags. |
|
78 <ul class="in-place-edit" id="dynamic-add"> |
|
79 {% for difficulty in difficulties %} |
|
80 <li id="existing-{{ forloop.counter }}" |
|
81 name="{{ difficulty.tag }}" class="handle">{{ difficulty.tag }}</li> |
|
82 {% endfor %} |
|
83 </ul> |
|
84 <p> |
|
85 <input style="font-weight: bold" type="button" |
|
86 value="Add" onclick="return add()"/> |
|
87 </p> |
|
88 |
|
89 <script type="text/javascript"> |
|
90 var index = 0; |
|
91 |
|
92 function add() { |
|
93 $('#dynamic-add').append( |
|
94 '<li id="category-new-' + index + '" name="" class="handle">Type name here...</li>'); |
|
95 |
|
96 var new_element = $("#category-new-" + index); |
|
97 new_element.inPlaceEdit({ |
|
98 submit : submit_handler, |
|
99 cancel : cancel_handler |
|
100 }); |
|
101 |
|
102 new_element.click(); |
|
103 |
|
104 new_element.find('.field').focus(); |
|
105 new_element.find('.field').select(); |
|
106 |
|
107 index = index + 1; |
|
108 |
|
109 return false; |
|
110 } |
|
111 </script> |
|
112 {% endblock %} |
|
113 |