Skip to content

Commit

Permalink
Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@johanrisch
johanrisch committed Mar 28, 2015
1 parent ab18926 commit aa8b262
Show file tree
Hide file tree
Showing 8 changed files with 11,077 additions and 18 deletions.
172 changes: 172 additions & 0 deletions ezList.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ezList</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,700,300italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="styles.css">

<link type="text/css" rel="stylesheet" href="sh_styles.css">
</head>
<body onload="sh_highlightDocument();">
<div class="container">
<div class="row header-row">
<div class="col-lg-4 col-lg-offset-4 header_row__picture-container">
<img class="header-row__picture" src="https://lh3.googleusercontent.com/-8irm2nJoeFM/U7hYkk5CLTI/AAAAAAAAG88/YzwVbl1Qxfg/w716-h715-no/IMG_0145.JPG"/>
</div>
</div>
<div class="row content-post">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-3 col-md-offset-3">
<div class="content-post__header">
<h2>ezList</h2>

</div>
<div class="content-post__bread-text">
<strong>ezList</strong> is a javascript library meant for sites with large tables (both a lot of rows and columns). Check out the <b><a href="http://johanrisch.github.io/ezList/index2.html">simple configuration demo</a></b> and the <b><a href="http://johanrisch.github.io/ezList/">advanced configuration demo</a></b>or you can get the source directly from <b><a href="http://github.com/johanrisch/ezList">Github</a></b>

<br/><b>Simpel configuration demo javascript:</b>
<pre class="sh_javascript">
var ezList = new ez.list({
controlDiv: "control",
paginator: {
pageSize: 20,
paginatorContainer: "ezPager"
}
});
</pre>
The paginator object can be removed from the arguments, the only required argument is either "controlDiv", the id of the container to hold all of the toggle, set and filter elements. In the simple demo the table has not been marked with any datafields, they are generated by ezList. It is possible to markup the table with data to inform ezList on how to behave. This can be seen in the <b><a href="http://johanrisch.github.io/ezList/">advanced configuration demo</a>.</b>
<pre class="sh_javascript">
var list = new ez.list({
toggleContainerDiv: "control",
setContainerDiv: "setControl",
filterContainerDiv: "filterContainer",
initial: 0,
sets: [{
name: "Contact and Address",
show: "name,phone,adr,city,country,email",
sortCols: "city,name",
order: "asc",
id: "set1",
actived: function(self) {},

}, {
name: "Salary and age",
show: "name,adr,city,age,salary",
id: "set2",
sortCols: "data6",
order: "desc",
sort: function(a, b) {
var mult = -1;
if (a.data['salary'] === b.data['salary']) {
if (a.data['age'] === b.data['age']) {
return mult * (a.index - b.index);
} else if (a.data['age'] < b.data['age']) {
return mult * -1;
}
return mult * 1;
} else if (a.data['salary'] < b.data['salary']) {
return mult * -1;
}
return mult * 1;

},
actived: function(self) {},

}, {
name: "Bank",
show: "name,card,bank,deposit",
sortCols: "card",
order: "asc",
id: "set3",
activated: function(self) {},

}, {
name: "Employer",
show: "name,employer,iq,6",
id: "set4",
actived: function(self) {},

}],
filters: [{
id: "filter1",
type: "preset",
name: "Salary above 500",
filter: function(item) {
var salary = item.data['salary'].substring(1);
return parseInt(salary) > 500;
}
}, {
id: "filter2",
type: "text",
name: "Search all",
extra: {
column: "all"
}
}, {
id: "filter3",
type: "text",
name: "Search on name",
extra: {
column: "name"
}
}, {
id: "filter4",
type: "text",
name: "Search on phone",
extra: {
column: "phone"
}
}, {
id: "filter5",
type: "text",
name: "{minAge}-{maxAge}",
filter: function(item, value) {
var range = value.split("-");
if (range.length == 2 && range[1].length > 0 && !isNaN(parseInt(range[0], 10)) && !isNaN(parseInt(range[1], 10)) && parseInt(range[0], 10) < parseInt(range[1], 10)) {
var age = parseInt(item.data["age"]);
var minAge = parseInt(range[0]);
var maxAge = parseInt(range[1]);
var ret = (minAge < age && age < maxAge) ? true : false;;
return ret;
} else {
return true;
}
}
}, {
id: "filter6",
type: "text",
name: "{column}_{regexp}",
filter: function(item, value) {
var range = value.split("_");
if (range.length == 2 && range[0].length > 0 && range[1].length > 0 && range[0] in item.data) {
return item.data[range[0]].match(range[1]);
} else {
return true;
}
}
}

],
paginator: {
pageSize: 20,
paginatorContainer: "ezPager"
}
});
</pre>
As you can see there are three types of controls. Toggle buttons (generated by ezList), set buttons and filter fields (defined by you). There really is no limit to what you can do in these filters. Be sure to take a look at the API documentation on gihub to see the full potential.
</div>

</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sh_javascript.js"></script>
<script type="text/javascript" src="sh_main.min.js"></script>
</body>
</html>
50 changes: 50 additions & 0 deletions ezRest.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ezList</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,700,300italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="styles.css">

<link type="text/css" rel="stylesheet" href="sh_styles.css">
</head>
<body onload="sh_highlightDocument();">
<div class="container">
<div class="row header-row">
<div class="col-lg-4 col-lg-offset-4 header_row__picture-container">
<img class="header-row__picture" src="https://lh3.googleusercontent.com/-8irm2nJoeFM/U7hYkk5CLTI/AAAAAAAAG88/YzwVbl1Qxfg/w716-h715-no/IMG_0145.JPG"/>
</div>
</div>
<div class="row content-post">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-3 col-md-offset-3">
<div class="content-post__header">
<h2>ezRest</h2>

</div>
<div class="content-post__bread-text">
<strong>ezRest</strong> is an Android library that has two components, one module that let's you post tasks on background threads, derived from <b><a href="https://github.com/johanrisch/ICDispatch">ICDispatch</a></b>, combined with a fully fledged framework for sending http requests.

<br/><b>Simpel configuration demo javascript:</b>
<pre class="sh_javascript">
</pre>
The paginator object can be removed from the arguments, the only required argument is either "controlDiv", the id of the container to hold all of the toggle, set and filter elements. In the simple demo the table has not been marked with any datafields, they are generated by ezList. It is possible to markup the table with data to inform ezList on how to behave. This can be seen in the <b><a href="http://johanrisch.github.io/ezList/">advanced configuration demo</a>.</b>
<pre class="sh_javascript">

</pre>
As you can see there are three types of controls. Toggle buttons (generated by ezList), set buttons and filter fields (defined by you). There really is no limit to what you can do in these filters. Be sure to take a look at the API documentation on gihub to see the full potential.
</div>

</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sh_javascript.js"></script>
<script type="text/javascript" src="sh_main.min.js"></script>
</body>
</html>
80 changes: 62 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Johan Risch</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
</head>
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1 col-xs-12">
<h2>Hello world!</h2>
</div>
</div>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Johan Risch</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,700,300italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="styles.css">

<link type="text/css" rel="stylesheet" href="sh_styles.css">
</head>
<body onload="sh_highlightDocument();">
<div class="container">
<div class="row header-row">
<div class="col-lg-4 col-lg-offset-4 header_row__picture-container">
<img class="header-row__picture" src="https://lh3.googleusercontent.com/-8irm2nJoeFM/U7hYkk5CLTI/AAAAAAAAG88/YzwVbl1Qxfg/w716-h715-no/IMG_0145.JPG"/>
</div>
<h2 class="col-lg-4 col-lg-offset-4 header-row__title">ezModules</h2>
</div>
<div class="row content-post">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-3 col-md-offset-3">
<div class="content-post__bread-text">
I've piled up a few programs that's almost a complete module/library. My goal is to go the final yards towards making them good enough for public use. The mantra when doing these libraries will be that there should be a minimal need for configurations to get started but full configuration capabilities available if required. In other words, getting started should be one line of code but utilizing the full potential should still be possible with a bit more work.

</div>

</div>
</div>
<div class="row content-post">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-3 col-md-offset-3">
<div class="content-post__header">
<h2>ezList</h2>

</div>
<div class="content-post__bread-text">
<strong>ezList</strong> is a javascript library meant for sites with large tables (both a lot of rows and columns). Check out the <b><a href="http://johanrisch.github.io/ezList/index2.html">simple configuration demo</a></b> and the <b><a href="http://johanrisch.github.io/ezList/">advanced configuration demo</a></b>or you can get the source directly from <b><a href="http://github.com/johanrisch/ezList">Github</a></b>
<br/><br/><a href="ezList.html">Read more...</a>
</div>

</div>
</div>
<div class="row content-post">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-3 col-md-offset-3">
<div class="content-post__header">
<h2>ezRest</h2>

</div>
<div class="content-post__bread-text">
<strong>ezRest</strong> is an Android library that has two components, one module that let's you post tasks on background threads, derived from <b><a href="https://github.com/johanrisch/ICDispatch">ICDispatch</a></b>, combined with a fully fledged framework for sending http requests.
<br/><br/><a href="ezRest.html">Read more...</a>
</div>

</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sh_javascript.js"></script>
<script type="text/javascript" src="sh_main.min.js"></script>
</body>
</html>
Loading

0 comments on commit aa8b262

Please sign in to comment.