Bug Tracker

Ticket #929: test.3.html

File test.3.html, 4.7 KB (added by KDan, 15 years ago)

A test file for Bug #929

Line 
1<html>
2        <head>
3                <title>Bug #929 Test</title>
4       
5                <script type="text/javascript" src="js/jQuery-1.1/jquery.js"></script>
6                <script type="text/javascript" src="js/jQuery-1.1/jquery.compat-1.0.js"></script>
7                <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/interface.js"></script>
8                <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/iutil.js"></script>
9       
10                <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/ifx.js"></script>
11                <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/ifxslide.js"></script>
12                <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/iautocompleter.js"></script>
13                <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/idrag.js"></script>
14                <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/idrop.js"></script>
15                <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/isortables.js"></script>
16       
17                <script type="text/javascript">
18                /**
19                 * Adapted from: http://www.dyve.net/jquery/?editable
20                 */
21               
22                $.fn.editable = function(options) {
23                        // Options
24                        options = arrayMerge({
25                                "callin": null,
26                                "url": "url",
27                                "idName": "id",
28                                "valName": "val",
29                                "callback": null,
30                                "saving": "saving ...",
31                                "delayOnBlur": 0,
32                                "extraParams": {},
33                                "editClass": null
34                        }, options);
35                        // Set up
36                        this.click(function(e) {
37                                        if (this.editing) return;
38                                        if (!this.editable) this.editable = function() {
39                                                var me = this;
40                                                if (options.callin) {
41                                                        options.callin($(me).attr(options.idName));
42                                                }
43                                                var width = $(me).width();
44                                                me.editing = true;
45                                                me.orgHTML = $(me).html();
46                                                me.innerHTML = "";
47                                                if (options.editClass) $(me).addClass(options.editClass);
48                                                var i = createInputElement(me.orgHTML);
49                                                $(i).addClass(options.editClass);
50                                                $(i).css("width", width+20);
51                                                var t = 0;
52                                                me.appendChild(i);
53                                                i.focus();
54                                                $(i).blur(
55                                                                options.delayOnBlur ? function() { t = setTimeout(reset, options.delayOnBlur) } : reset
56                                                        )
57                                                        .keydown(function(e) {
58                                                                if (e.keyCode == 27) { // ESC
59                                                                        e.preventDefault;
60                                                                        reset
61                                                                } else if (e.keyCode == 13) { // ENTER
62                                                                        e.preventDefault;
63                                                                        var p = {};
64                                                                        p[options.idName] = $(me).attr(options.idName);
65                                                                        p[$(i).name()] = $(i).val();
66                                                                        p = arrayMerge(p, options.extraParams);
67                                                                        $(me).html(options.saving);
68                                                                        $.post(
69                                                                                options.url,
70                                                                                p,
71                                                                                function(data) {
72                                                                                        if (options.callback) {
73                                                                                                options.callback(me, data);
74                                                                                        }
75                                                                                        m.editing = false;
76                                                                                });
77                                                                }
78                                                        });
79                                                /*$(f).submit(function(e) {
80                                                        if (t) clearTimeout(t);
81                                                        e.preventDefault();
82                                                        var p = {};
83                                                        p[i.name] = $(i).val();
84                                                        $(me).html(options.saving).load(options.url, arrayMerge(options.extraParams, p), function() {
85                                                                // Remove script tags
86                                                                me.innerHTML = me.innerHTML.replace(/<\s*script\s*.*>.*<\/\s*script\s*.*>/gi, "");
87                                                                // Callback if necessary
88                                                                if (options.callback) options.callback(me);
89                                                                // Release
90                                                                me.editing = false;                                             
91                                                        });
92                                                }); */
93                                                function reset() {
94                                                        me.innerHTML = me.orgHTML;
95                                                        if (options.editClass) $(me).removeClass(options.editClass);
96                                                        me.editing = false;                                     
97                                                }
98                                        };
99                                        this.editable();
100                                })
101                        ;
102                        // Don't break the chain
103                        return this;
104                        // Helper functions
105                        function arrayMerge(a, b) {
106                                if (a) {
107                                        if (b) for(var i in b) a[i] = b[i];
108                                        return a;
109                                } else {
110                                        return b;               
111                                }
112                        };
113                        function createInputElement(v) {
114                                var i = document.createElement("input");
115                                i.type = "text";
116                                $(i).val(v);
117                                i.name = options.valName;
118                                return i;
119                        }
120                };
121               
122                </script>
123               
124                <style type="text/css">
125                .editClass {
126                        display: inline;
127                }
128                </style>
129               
130        </head>
131       
132        <script type="text/javascript">
133       
134                var blankFn = function() {}
135       
136                var disableDrag = function(id) {
137                        $("#"+id).DraggableDestroy();
138                }
139       
140                $(document).ready(function() {
141                        $(".dropZone").Sortable({
142                                accept:         'dropItem',
143                                opacity:        0.4,
144                                revert:         true,
145                                ghosting:       true,
146                                tolerance:      'intersect',
147                                fit:            true,
148                                fx:                     200
149                        });
150                        $(".dropItem").editable({
151                                editClass:      "editClass",
152                                idName:         "id",
153                                valName:        "name",
154                                callin:         disableDrag
155                        });
156                });
157       
158        </script>
159       
160        <body>
161                <ul class="dropZone">
162                        <li class="dropItem" id="e1">Hello, I could be edited</li>
163                        <li class="dropItem" id="e2">Me too!</li>
164                        <li class="dropItem" id="e3">Me three!</li>
165                        <li class="dropItem" id="e4">I don't want to be edited :-(</li>
166                </ul>
167                <hr>
168                <ul class="dropZone">
169                        <li class="dropItem" id="e5">I'm also editable!</li>
170                </ul>
171        </body>
172</html>         
173