Skip to content

Commit 6181322

Browse files
programcsharpjehhynes
programcsharp
authored and
jehhynes
committed
Add editly component js
Add support for client side navigation Add support for validation
1 parent c899abd commit 6181322

14 files changed

+3306
-13
lines changed

‎Griddly/App_Start/BundleConfig.cs

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ public class BundleConfig
88
public static void RegisterBundles(BundleCollection bundles)
99
{
1010
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
11-
"~/Scripts/jquery-{version}.js"));
11+
"~/Scripts/jquery-{version}.js",
12+
"~/Scripts/jquery.validate.js",
13+
"~/Scripts/jquery.validate.unobtrusive.js"));
1214

1315
// Use the development version of Modernizr to develop with and learn from. Then, when you're
1416
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.

‎Griddly/Griddly.csproj

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@
170170
<Content Include="Scripts\bootstrap-multiselect.js" />
171171
<Content Include="Scripts\bootstrap.js" />
172172
<Content Include="Scripts\bootstrap.min.js" />
173+
<Content Include="Scripts\editly.js" />
173174
<Content Include="Scripts\griddly.js" />
174175
<Content Include="Scripts\bootstrap.min.js.map">
175176
<DependentUpon>bootstrap.min.js</DependentUpon>
@@ -187,6 +188,11 @@
187188
<None Include="Scripts\jquery-2.1.0.intellisense.js" />
188189
<Content Include="Scripts\jquery-2.1.0.js" />
189190
<Content Include="Scripts\jquery-2.1.0.min.js" />
191+
<None Include="Scripts\jquery.validate-vsdoc.js" />
192+
<Content Include="Scripts\jquery.validate.js" />
193+
<Content Include="Scripts\jquery.validate.min.js" />
194+
<Content Include="Scripts\jquery.validate.unobtrusive.js" />
195+
<Content Include="Scripts\jquery.validate.unobtrusive.min.js" />
190196
<Content Include="Scripts\modernizr-2.7.1.js" />
191197
<Content Include="Scripts\npm.js" />
192198
<Content Include="Scripts\respond.js" />

‎Griddly/Scripts/_references.js

284 Bytes
Binary file not shown.

‎Griddly/Scripts/editly.js

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
/*
2+
* Editly script
3+
* http://griddly.com
4+
* Copyright 2013-2015 Chris Hynes and Data Research Group, Inc.
5+
* Licensed under MIT (https://github.com/programcsharp/griddly/blob/master/LICENSE)
6+
*
7+
* WARNING: Don't edit this file -- it'll be overwitten when you upgrade.
8+
*
9+
*/
10+
11+
!function ($)
12+
{
13+
"use strict"; // jshint ;_;
14+
15+
var Editly = function(element, options)
16+
{
17+
this.$element = $(element);
18+
this.options = options;
19+
this.create();
20+
};
21+
22+
var ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9;
23+
24+
var serializeObject = function ($elements)
25+
{
26+
// http://stackoverflow.com/a/1186309/8037
27+
var data = {};
28+
29+
$.each($elements.serializeArray(), function ()
30+
{
31+
if (data[this.name] !== undefined)
32+
{
33+
if (!data[this.name].push)
34+
data[this.name] = [data[this.name]];
35+
36+
data[this.name].push(this.value || '');
37+
}
38+
else
39+
{
40+
data[this.name] = this.value || '';
41+
}
42+
});
43+
44+
return data;
45+
};
46+
47+
Editly.prototype = {
48+
constructor: Editly,
49+
50+
// create and bind
51+
create: function ()
52+
{
53+
var self = this;
54+
var active = null;
55+
//var url = this.$element.data("griddly-url");
56+
57+
//this.options.url = url;
58+
59+
this.$element.find("tbody td").each(function ()
60+
{
61+
if (!this.tabIndex || this.tabIndex < 0)
62+
this.tabIndex = 0;
63+
});
64+
65+
var movement = function (element, keycode)
66+
{
67+
if (keycode === ARROW_RIGHT)
68+
return element.next('td');
69+
else if (keycode === ARROW_LEFT)
70+
return element.prev('td');
71+
else if (keycode === ARROW_UP)
72+
return element.parent().prev().children().eq(element.index());
73+
else if (keycode === ARROW_DOWN)
74+
return element.parent().next().children().eq(element.index());
75+
76+
return [];
77+
};
78+
79+
var showEditor = function (select)
80+
{
81+
active = self.$element.find('td:focus');
82+
83+
if (active.length)
84+
{
85+
var template = self.options.editors[active[0].cellIndex];
86+
var editor = template.is(":input") ? template : template.find(":input");
87+
88+
var validator = editor.parents("form").data('validator')
89+
90+
//validator.settings.showErrors = function (errorMap, errorList)
91+
//{
92+
93+
//};
94+
95+
//validator.settings.errorPlacement = function (error, element)
96+
//{
97+
// $(template).popover(
98+
// {
99+
// container: "body",
100+
// content: error.html(),
101+
// html: true
102+
// }).popover("show");
103+
//};
104+
105+
template
106+
.show()
107+
.offset(active.offset())
108+
.width(template == editor ? active.width() : active.outerWidth())
109+
.height(template == editor ? active.height() : active.outerHeight());
110+
111+
editor.val(active.text())
112+
.removeClass('error')
113+
.css(active.css(self.options.cloneProperties))
114+
.height(active.height())
115+
.focus()
116+
.off("blur")
117+
.on("blur", function()
118+
{
119+
active.text(editor.val());
120+
template.hide();
121+
template.popover("hide");
122+
})
123+
.off("keydown")
124+
.on("keydown", function (e)
125+
{
126+
if (e.which === ENTER)
127+
{
128+
//active.text(editor.val());
129+
//setActiveText();
130+
131+
template.hide();
132+
active.focus();
133+
134+
e.preventDefault();
135+
e.stopPropagation();
136+
}
137+
else if (e.which === ESC)
138+
{
139+
editor.val(active.text());
140+
141+
e.preventDefault();
142+
e.stopPropagation();
143+
144+
template.hide();
145+
active.focus();
146+
}
147+
else if (e.which === TAB)
148+
{
149+
active.focus();
150+
151+
// Have to move here because dropdown eats it somehow if not
152+
var possibleMove = movement(active, e.shiftKey ? ARROW_LEFT : ARROW_RIGHT);
153+
154+
if (possibleMove.length > 0)
155+
{
156+
possibleMove.focus();
157+
158+
e.preventDefault();
159+
e.stopPropagation();
160+
}
161+
}
162+
else if (this.selectionEnd - this.selectionStart === this.value.length ||
163+
(this.tagName == "SELECT" && (e.which == ARROW_RIGHT || e.which === ARROW_LEFT)))
164+
{
165+
var possibleMove = movement(active, e.which);
166+
167+
if (possibleMove.length > 0)
168+
{
169+
possibleMove.focus();
170+
171+
e.preventDefault();
172+
e.stopPropagation();
173+
}
174+
}
175+
});
176+
177+
if (template == editor)
178+
editor.width(active.width());
179+
180+
if (editor.valid())
181+
{
182+
validator.settings.unhighlight(editor);
183+
184+
// TODO: do we need this if app has proper bs highlight method?
185+
editor.parents(".form-group").removeClass("has-error");
186+
}
187+
else
188+
{
189+
validator.settings.highlight(editor);
190+
191+
// TODO: do we need this if app has proper bs highlight method?
192+
editor.parents(".form-group").addClass("has-error");
193+
194+
window.setTimeout(function ()
195+
{
196+
$(template)
197+
.popover(
198+
{
199+
container: "body",
200+
content: function () { return validator.errorList[0].message; }
201+
})
202+
.popover("show");
203+
}, 100);
204+
}
205+
206+
if (select)
207+
{
208+
editor.select();
209+
}
210+
}
211+
};
212+
213+
$(this.$element).on("click keypress dblclick", $.proxy(function (e)
214+
{
215+
showEditor(true);
216+
}, this));
217+
218+
$(this.$element).on("keydown", $.proxy(function (e)
219+
{
220+
var prevent = true,
221+
possibleMove = movement($(e.target), e.which);
222+
223+
if (possibleMove.length > 0)
224+
{
225+
possibleMove.focus();
226+
}
227+
else if (e.which === ENTER)
228+
{
229+
showEditor(false);
230+
}
231+
else if (e.which === 17 || e.which === 91 || e.which === 93)
232+
{
233+
showEditor(true);
234+
prevent = false;
235+
}
236+
else
237+
{
238+
prevent = false;
239+
}
240+
241+
if (prevent)
242+
{
243+
e.stopPropagation();
244+
e.preventDefault();
245+
}
246+
}, this));
247+
},
248+
249+
// destroy and unbind
250+
destroy: function ()
251+
{
252+
253+
}
254+
};
255+
256+
$.fn.editly = function (option, parameter)
257+
{
258+
var value;
259+
var args = arguments;
260+
261+
this.each(function ()
262+
{
263+
var data = $(this).data('editly'),
264+
options = typeof option == 'object' && option;
265+
266+
// initialize editly
267+
if (!data)
268+
{
269+
var instanceOptions = $.extend({}, $.fn.editly.defaults, options);
270+
271+
$(this).data('editly', (data = new Editly(this, instanceOptions)));
272+
}
273+
274+
// call editly method
275+
if (typeof option == 'string')
276+
{
277+
value = data[option].apply(data, Array.prototype.slice.call(args, 1));
278+
}
279+
});
280+
281+
if (value !== undefined)
282+
return value;
283+
else
284+
return this;
285+
};
286+
287+
$.fn.editly.defaults =
288+
{
289+
cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
290+
'text-align', 'font', 'font-size', 'font-family', 'font-weight']//,
291+
//'border', 'border-top', 'border-bottom', 'border-left', 'border-right']
292+
293+
};
294+
295+
$(function()
296+
{
297+
$("[data-role=editly]").editly();
298+
});
299+
}(window.jQuery);

‎Griddly/Scripts/griddly.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* Griddly script
33
* http://griddly.com
4-
* Copyright 2013-2014 Chris Hynes and Data Research Group, Inc.
4+
* Copyright 2013-2015 Chris Hynes and Data Research Group, Inc.
55
* Licensed under MIT (https://github.com/programcsharp/griddly/blob/master/LICENSE)
66
*
77
* WARNING: Don't edit this file -- it'll be overwitten when you upgrade.

0 commit comments

Comments
 (0)