Skip to content

Commit 416a5f7

Browse files
LipataLipata
committed
Move history.js sample to topics.
1 parent b7fd874 commit 416a5f7

6 files changed

Lines changed: 1410 additions & 3 deletions

File tree

‎HTMLSamples/grid/history.html‎

Lines changed: 382 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,382 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title>$$(Title_history)</title>
5+
6+
<!-- Ignite UI Required Combined CSS Files -->
7+
<link href="%%ignite-ui%%/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
8+
<link href="%%ignite-ui%%/css/structure/infragistics.css" rel="stylesheet">
9+
10+
<script src="%%modernizr%%"></script>
11+
<script src="%%jquery%%"></script>
12+
<script src="%%jquery-ui%%"></script>
13+
14+
<!-- Ignite UI Required Combined JavaScript Files -->
15+
<script src="%%ignite-ui%%/js/infragistics.core.js"></script>
16+
<script src="%%ignite-ui%%/js/infragistics.lob.js"></script>
17+
18+
<script src="%%historyjs%%"></script>
19+
20+
<style>
21+
.btn-container button { margin: 10px 10px 10px 0; width: 300px; }
22+
.seperator { float: left; }
23+
.clear { clear: both; }
24+
@media screen and (max-width: 500px) {
25+
.seperator { clear: both; }
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div class="btn-container">
31+
<button id="back">$$(btn_back)</button>
32+
<div class="seperator"></div>
33+
<button id="forward">$$(btn_forward)</button>
34+
<div class="clear"></div>
35+
<button id="copy">$$(btn_copy_state)</button>
36+
<div class="seperator"></div>
37+
<button id="mail">$$(btn_send_state_mail)</button>
38+
</div>
39+
<table id="gridHistoryJS"></table>
40+
41+
<script src="../../../../data-files/footballers.js"></script>
42+
<script>
43+
$(function () {
44+
var gridHistoryJS,
45+
manualStateChange = true, // true: fired by history go() and back() methods; false: fired when state is added to the history object.
46+
reverseState = [],
47+
// historyLength = window.History.storedStates.length,
48+
urlParams = window.location.search;
49+
50+
//--> Save igGrid state in the browser history object
51+
function addUndoState(feature, column, possibleUndo, oldValue) {
52+
var currState = window.History.getState(), data, undo = false;
53+
pos = previousPosition(feature, column);
54+
if (pos < 0) {
55+
data = { key: feature, value: column === null ? oldValue : (!oldValue) ? column : [column, oldValue] };
56+
undo = possibleUndo;
57+
} else if (pos === 0) {
58+
data = null;
59+
} else {
60+
data = pos.data;
61+
}
62+
if (data !== null) {
63+
data.undo = undo;
64+
currState.data.undoData = data;
65+
manualStateChange = false;
66+
window.History.replaceState(currState.data);
67+
}
68+
}
69+
function previousPosition(feature, column) {
70+
var states = window.History.savedStates,
71+
length = states.length,
72+
index;
73+
for (index = length - 1; index >= 0; index--) {
74+
if (states[index].data.key === feature &&
75+
(column === null || column !== null && states[index].data.value.indexOf(column) > -1)) {
76+
if (index === length - 1) {
77+
return 0;
78+
} else {
79+
return states[index];
80+
}
81+
}
82+
}
83+
return -1;
84+
}
85+
function pushToBrowserHistory(state, title, url) {
86+
manualStateChange = false;
87+
$(state).extend({ "manualStateChange": false });
88+
window.History ? window.History.pushState(state, title, url) : "";
89+
}
90+
91+
gridHistoryJS = (function initGrid() {
92+
var grid = $("#gridHistoryJS");
93+
grid.igGrid({
94+
primaryKey: "name",
95+
width: '100%',
96+
columns: [
97+
{ headerText: "$$(table_lbl_name)", key: "name", dataType: "string", width: "12%" },
98+
{ headerText: "$$(table_lbl_team)", key: "team", dataType: "string", width: "15%" },
99+
{ headerText: "$$(table_lbl_age)", key: "age", dataType: "number", width: "7%" },
100+
{ headerText: "$$(table_lbl_number_no)", key: "number", dataType: "number", width: "7%" },
101+
{ headerText: "$$(table_lbl_position)", key: "position", dataType: "string", width: "8%" },
102+
{ headerText: "$$(table_lbl_goals)", key: "goals", dataType: "number", width: "10%" },
103+
{ headerText: "$$(table_lbl_assists)", key: "assists", dataType: "number", width: "10%" },
104+
{ headerText: "$$(table_lbl_yellow)", key: "yellow", dataType: "number", width: "10%" },
105+
{ headerText: "$$(table_lbl_red)", key: "red", dataType: "number", width: "7%" },
106+
{ headerText: "$$(table_lbl_salary)", key: "salary", dataType: "number", format: "currency", width: "8%" }
107+
],
108+
autofitLastColumn: false,
109+
autoGenerateColumns: false,
110+
dataSource: dataSource,
111+
features: [
112+
{
113+
name: "Paging",
114+
type: "local",
115+
pageSize: 10,
116+
showPageSizeDropDown: false,
117+
pageIndexChanging: function (e, args) {
118+
addUndoState("page", null, false, args.currentPageIndex + 1, args.newPageIndex + 1);
119+
},
120+
pageIndexChanged: function (e, args) {
121+
var pageIndex = args.pageIndex + 1,
122+
state = { key: "page", value: pageIndex };
123+
pushToBrowserHistory(state, null, formURL("page", pageIndex));
124+
}
125+
},
126+
{
127+
name: "Sorting",
128+
type: "local",
129+
mode: "multi",
130+
modalDialogSortOnClick: true,
131+
columnSorting: function (e, args) {
132+
addUndoState("sort", args.columnKey, true, args.direction === "ascending" ? "descending" : "ascending");
133+
},
134+
columnSorted: function (e, args) {
135+
var columnKey = args.columnKey,
136+
dir = args.direction,
137+
state = { key: "sort", value: [columnKey, dir] };
138+
if (!isEmptyValue(columnKey) && !isEmptyValue(dir)) {
139+
pushToBrowserHistory(state, null, formURL("sort", [columnKey, dir]));
140+
}
141+
}
142+
},
143+
{
144+
name: "Filtering",
145+
type: "local",
146+
dataFiltering: function(e, args) {
147+
var expr = args.owner.grid.dataSource.settings.filtering.expressions,
148+
oldValue;
149+
oldValue = (expr.length > 0) ? expr[expr.length - 1].expr : null;
150+
addUndoState("filter", args.columnKey, true, oldValue);
151+
},
152+
dataFiltered: function (e, args) {
153+
var columnKey = args.columnKey,
154+
expr = args.owner.grid.dataSource.settings.filtering.expressions[0],
155+
state, settings;
156+
if (expr === undefined) {
157+
settings = [];
158+
} else {
159+
settings = [columnKey, expr.cond, expr.expr];
160+
}
161+
state = { key: "filter", value: settings };
162+
pushToBrowserHistory(state, null, formURL("filter", settings));
163+
}
164+
},
165+
{
166+
name: "Resizing",
167+
columnResizing: function (e, args) {
168+
addUndoState("resize", args.columnKey, false, args.originalWidth);
169+
},
170+
columnResized: function (e, args) {
171+
var columnKey = args.columnKey,
172+
width = args.originalWidth,
173+
state = { key: "resize", value: [columnKey, width] };
174+
pushToBrowserHistory(state, null, formURL("resize", [columnKey, width]));
175+
}
176+
}
177+
],
178+
rendered: function (e, args) {
179+
args.owner.element.find("tr td").css("text-align", "center");
180+
args.owner.element.find("tr td:first-child").css("text-align", "left");
181+
args.owner.element.find("tr td:last-child").css("text-align", "right");
182+
183+
setTimeout(function () {
184+
// Load Grid state from URL
185+
loadInitialStateFromUrl();
186+
if (urlParams === "") {
187+
// By default "goals" and "assists" columns are sorted
188+
manualInitialSort(args);
189+
}
190+
}, 200);
191+
}
192+
});
193+
return grid;
194+
})();
195+
//<-- Save igGrid state in the browser history object
196+
197+
//--> Recover igGrid state from the browser history object
198+
if (window.History && window.History.Adapter) {
199+
window.History.Adapter.bind(window, 'statechange', function (e, args) {
200+
var currState, undoState, state, prevState, stateOccurances;
201+
// isBackForward = (window.History.storedStates.length - historyLength) === 1;
202+
203+
if ($("#sample-title")[0] !== undefined && $("#sample-title")[0].textContent !== undefined && $("#sample-title")[0].textContent.toLowerCase().indexOf("history.js") == -1) {
204+
// This check is not related to history.js integaration. It's done to integrate the sample with the Samples Browser.
205+
return;
206+
}
207+
// historyLength = window.History.storedStates.length;
208+
if (manualStateChange === true) { // Fired only when called externally from browser buttons
209+
currState = window.History.getState();
210+
state = currState.data;
211+
undoState = state.undoData;
212+
switch (state.key) { // Load current state
213+
case "page": loadPagingState(state.key, state.value); break;
214+
case "sort": loadSortingState(state.key, state.value); break;
215+
case "filter": loadFilteringState(state.key, state.value); break;
216+
case "resize": loadResizingState(state.key, state.value); break;
217+
default: break;
218+
}
219+
// Load/Unload previous state
220+
if (undoState) {
221+
switch (undoState.key) {
222+
case "page": loadPagingState(undoState.key, undoState.value); break;
223+
case "sort": loadSortingState(undoState.key, undoState.value, undoState.undo); break;
224+
case "filter": loadFilteringState(undoState.key, undoState.value, undoState.undo); break;
225+
case "resize": loadResizingState(undoState.key, undoState.value); break;
226+
default: break;
227+
}
228+
}
229+
}
230+
manualStateChange = true;
231+
});
232+
}
233+
//<-- Recover igGrid state from the browser history object
234+
235+
//--> Load igGrid state from the browser URL
236+
function loadInitialStateFromUrl() {
237+
var params = urlParams, index, arrKeyValue;
238+
if (params !== "") {
239+
pairs = params.substring(1, params.length).split("&");
240+
for (index = 0; index < pairs.length; index++) {
241+
arrKeyValue = pairs[index].split("=");
242+
loadGridState(arrKeyValue[0], arrKeyValue[1]);
243+
}
244+
// Recover URL
245+
window.History.pushState({}, null, params);
246+
}
247+
}
248+
function manualInitialSort(args) {
249+
args.owner.element.igGridSorting("sortColumn", "goals", "descending"); manualStateChange = false;
250+
addUndoState("sort", "goals", true, "ascending");
251+
pushToBrowserHistory({ key: "sort", value: ["goals", "descending"] }, null, formURL("sort", ["goals", "descending"]));
252+
args.owner.element.igGridSorting("sortColumn", "assists", "descending"); manualStateChange = false;
253+
addUndoState("sort", "assists", true, "ascending");
254+
pushToBrowserHistory({ key: "sort", value: ["assists", "descending"] }, null, formURL("sort", ["assists", "descending"]));
255+
}
256+
//<-- Load igGrid state from the browser URL
257+
258+
//--> Load individual igGrid features
259+
function loadGridState(key, value) {
260+
switch (key) {
261+
case "page": loadPagingState(key, value); break;
262+
case "sort": loadSortingStateArray(key, value); break;
263+
case "filter": loadFilteringStateArray(key, value); break;
264+
case "resize": loadResizingStateArray(key, value); break;
265+
default: break;
266+
}
267+
}
268+
function loadPagingState(key, value) {
269+
gridHistoryJS.igGridPaging("pageIndex", value - 1);
270+
}
271+
function loadSortingState(key, descriptor, undo) {
272+
var column = descriptor[0],
273+
status = descriptor[1];
274+
if (undo) {
275+
gridHistoryJS.igGridSorting("unsortColumn", column);
276+
} else {
277+
gridHistoryJS.igGridSorting("sortColumn", column, status);
278+
}
279+
}
280+
function loadSortingStateArray(key, value) {
281+
var columns = value.split(";"), i;
282+
for (i = 0; i < columns.length; i++) {
283+
gridHistoryJS.igGridSorting("sortColumn", columns[i].split("_", 1)[0], columns[i].split("_", 2)[1]);
284+
}
285+
}
286+
function loadFilteringState(key, descriptor, undo) {
287+
if (undo || descriptor === undefined || descriptor.length === 0) {
288+
gridHistoryJS.igGridFiltering("filter", []);
289+
} else {
290+
gridHistoryJS.igGridFiltering("filter", [{ fieldName: descriptor[0], expr: descriptor[2], cond: descriptor[1] }]);
291+
}
292+
}
293+
function loadFilteringStateArray(key, value) {
294+
var columns = value.split(";"), i;
295+
for (i = 0; i < columns.length; i++) {
296+
gridHistoryJS.igGridFiltering("filter", [{ fieldName: columns[i].split("_", 1)[0], expr: columns[i].split("_", 3)[2], cond: columns[i].split("_", 2)[1] }]);
297+
}
298+
}
299+
function loadResizingState(key, descriptor) {
300+
gridHistoryJS.igGridResizing("resize", descriptor[0], descriptor[1]);
301+
}
302+
function loadResizingStateArray(key, value) {
303+
var columns = value.split(";"), i;
304+
for (i = 0; i < columns.length; i++) {
305+
gridHistoryJS.igGridResizing("resize", columns[i].split("_", 1)[0], columns[i].split("_", 2)[1]);
306+
}
307+
}
308+
//<-- Load individual igGrid features
309+
310+
//--> Create URL
311+
function formURL(key, value, multiple) {
312+
var params = window.location.search,
313+
urlValue = value, urlIndex, currentUrl, currentColumnState;
314+
315+
if (isEmptyValue(value)) { // remove parameters encoded in the URL
316+
urlIndex = params.indexOf(key + "=");
317+
params = params.replace(key + "=" + extractURLValue(key), "");
318+
if (params === "?") {
319+
params = "";
320+
} else {
321+
params = params.substring(0, urlIndex - 1) + params.substring(urlIndex, params.length);
322+
}
323+
} else { // add parameters encoded in the URL
324+
if (value instanceof Array) {
325+
urlValue = value[0];
326+
for (urlIndex = 1; urlIndex < value.length; urlIndex++) {
327+
urlValue += "_" + value[urlIndex];
328+
}
329+
}
330+
if (params === "") {
331+
params = "?" + key + "=" + urlValue;
332+
} else if (params.indexOf(key + "=") === -1) {
333+
params = params + "&" + key + "=" + urlValue;
334+
} else {
335+
currentUrl = key + "=" + extractURLValue(key);
336+
if (key === "page") {
337+
params = params.replace(currentUrl, key + "=" + urlValue);
338+
} else {
339+
currentColumnState = value[0] + "_";
340+
if (currentUrl.indexOf(currentColumnState) > -1) {
341+
params = params.replace(getColumnState(currentUrl, currentColumnState), urlValue);
342+
} else {
343+
params = params.replace(currentUrl, currentUrl + ";" + urlValue);
344+
}
345+
}
346+
}
347+
}
348+
return params;
349+
}
350+
function extractURLValue(key) {
351+
var params = window.location.search,
352+
value = "";
353+
value = params.substring(params.indexOf(key), params.length);
354+
value = value.substring(key.length + 1, (value.indexOf("&") > -1) ? value.indexOf("&") : value.length);
355+
return value;
356+
}
357+
function getColumnState(featureUrl, column) {
358+
var state, columnStartIndex, columnEndIndex;
359+
columnStartIndex = featureUrl.indexOf(column);
360+
state = featureUrl.substring(columnStartIndex, featureUrl.length);
361+
columnEndIndex = state.indexOf("&") > -1 ? state.indexOf("&") : state.length;
362+
state = state.substring(0, columnEndIndex);
363+
columnEndIndex = state.indexOf(";") > -1 ? state.indexOf(";") : state.length;
364+
state = state.substring(0, columnEndIndex);
365+
return state;
366+
}
367+
//<-- Create URL
368+
369+
function isEmptyValue(value) {
370+
return value === undefined || value === null || value.length === 0;
371+
}
372+
$("#back").igButton().click(function () { window.history.back(); });
373+
$("#forward").igButton().click(function () { window.history.forward(); });
374+
$("#copy").igButton().click(function () { window.prompt("$$(copy_url_button_msg)", window.location); });
375+
$("#mail").igButton().click(function () {
376+
var link = "mailto: ?subject= $$(grid_state_subj)&body= $$(grid_state_body)" + escape(window.location);
377+
window.location.href = link;
378+
});
379+
});
380+
</script>
381+
</body>
382+
</html>

0 commit comments

Comments
 (0)