<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/icebob/pen/ZGYMWx" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css'><link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/102308/propertiesJS.css'>
<style class="cp-pen-styles">* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
html {
color: #012;
font-size: 16px;
font-family: "Open Sans", "Helvetica Neue", Tahoma, sans-serif;
}
body {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/102308/Blur-4.jpg");
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 0;
margin: 0;
}
.page {
position: absolute;
left: 4%;
right: 4%;
top: 4%;
bottom: 4%;
background-color: rgba(255, 255, 255, 0.4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
overflow: hidden;
}
.content .dataTable table thead tr th {
text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
.content {
-webkit-flex: 1;
flex: 1;
position: relative;
overflow: hidden;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.content .header {
-webkit-flex: 0 0 36px;
flex: 0 0 36px;
padding: 8px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.2);
}
.content .header .title {
float: left;
font-size: 0.8rem;
}
.content .header .title .name {
font-size: 1.3rem;
font-weight: bold;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.content .header .functions {
float: right;
padding-right: 10px;
}
.content .header .functions .add {
cursor: pointer;
opacity: 0.6;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.content .header .functions .add .icon {
display: inline-block;
border: 2px solid #012;
border-radius: 100%;
width: 25px;
height: 25px;
text-align: center;
padding: 1px 0 0 0;
font-size: 1.1rem;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.content .header .functions .add span {
overflow: hidden;
display: inline-block;
margin-left: 5px;
font-size: 0.8rem;
width: 0px;
font-weight: 600;
white-space: nowrap;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.content .header .functions .add:hover {
opacity: 1.0;
}
.content .header .functions .add:hover span {
width: 60px;
}
.content .header .functions .add:hover .icon {
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.content .dataTable {
-webkit-flex: 1;
flex: 1;
padding: 10px;
font-size: 0.9rem;
overflow: auto;
}
.content .dataTable table {
width: 100%;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.content .dataTable table thead tr {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.content .dataTable table thead tr th {
text-align: left;
font-weight: 700;
padding: 4px 2px;
vertical-align: middle;
text-transform: uppercase;
}
.content .dataTable table thead tr th.selectAll {
font-size: 1.1rem;
vertical-align: middle;
padding-right: 2px;
}
.content .dataTable table thead tr th.selectAll.selected i:before {
content: "\f046";
}
.content .dataTable table tbody tr {
cursor: pointer;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.content .dataTable table tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05);
}
.content .dataTable table tbody tr td {
padding: 8px 2px;
}
.content .dataTable table tbody tr td:nth-child(1) .checkbox {
font-size: 1.1rem;
vertical-align: middle;
width: 18px;
}
.content .dataTable table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.content .dataTable table tbody tr.selected {
color: #000;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
}
.content .dataTable table tbody tr.selected td:nth-child(1) .checkbox:before {
content: "\f046";
}
.content .dataTable table tbody tr.inactive {
font-style: italic;
color: rgba(0, 17, 34, 0.5);
}
.content .dataTable table tbody tr.marked td:nth-child(2):after {
content: 'marked';
font-size: 0.6rem;
background-color: rgba(0, 92, 126, 0.17);
border: 1px solid rgba(0, 92, 126, 0.4);
color: White;
padding: 1px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-left: 5px;
vertical-align: top;
}
.properties {
-webkit-flex: 0 0 23rem;
flex: 0 0 23rem;
order: 1;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.properties .slider {
-webkit-flex: 0 0 3px;
flex: 0 0 3px;
width: 3px;
height: 100vh;
background-color: rgba(0, 0, 0, 0.1);
cursor: col-resize;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
-webkit-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
.properties .slider:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.properties .propertyEditor {
-webkit-flex: 1;
flex: 1;
overflow: auto;
background-color: transparent;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
color: #012;
}
.properties .propertyEditor table thead {
background-color: rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.properties .propertyEditor table tr td {
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.properties .propertyEditor table tr th {
padding: 8px 10px 9px 10px;
font-size: 1.1rem;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.properties .propertyEditor table tr td:nth-child(2) .hint {
color: #6E6E6E;
}
.properties .propertyEditor table tr td:nth-child(2) input:not([type="checkbox"]), .properties .propertyEditor table tr td:nth-child(2) textarea, .properties .propertyEditor table tr td:nth-child(2) select, .properties .propertyEditor table tr td:nth-child(2) .checklist, .properties .propertyEditor table tr td:nth-child(2) .droplist {
background-color: rgba(255, 255, 255, 0.4);
color: #012;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.properties .propertyEditor table tr td:nth-child(2) button.function {
background-color: rgba(68, 68, 68, 0.5);
}
.properties .propertyEditor table tr td:nth-child(2) button.function:hover {
background-color: rgba(68, 68, 68, 0.7);
}
.properties .propertyEditor table tr.validation-error .errors, .properties .propertyEditor table tr.validation-error td:nth-child(1) {
color: #C70000;
}
@media (max-width: 1200px) {
.dataTable th:nth-child(5), .dataTable td:nth-child(5) {
display: none;
}
}
@media (max-width: 1000px) {
.dataTable th:nth-child(4), .dataTable td:nth-child(4) {
display: none;
}
}
@media (max-width: 900px) {
.dataTable th:nth-child(3), .dataTable td:nth-child(3) {
display: none;
}
}
@media (max-width: 700px) {
.page {
-webkit-flex-direction: column;
flex-direction: column;
}
.properties {
-webkit-flex: 0 0 31rem;
flex: 0 0 31rem;
}
}
.ghostSlider {
position: absolute;
width: 3px;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
cursor: col-resize;
z-index: 9999;
}
::-webkit-scrollbar {
height: 8px;
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
-webkit-border-radius: 1ex;
border: none;
}
::-webkit-scrollbar-corner {
background: transparent;
}
</style></head><body>
<div class="page">
<div class="content">
<div class="header">
<div class="title"><span class="name">Users </span>(<span class="count">0</span>)</div>
<div class="functions">
<div class="add">
<div class="icon"> <i class="fa fa-plus"></i></div><span>Add user</span>
</div>
</div>
</div>
<div class="dataTable">
<table>
<thead>
<tr>
<th class="selectAll"> <i class="fa fa-square-o"></i></th>
<th>Name</th>
<th>Username</th>
<th>E-mail</th>
<th>Country</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="properties">
<div class="slider"></div>
<div class="propertyEditor"></div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/102308/faker.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/102308/propertiesJS.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js'></script>
<script >(function() {
var $doc, changeSelection, dataSource, dragging, generateFakeUsers, ghost, initRow, pjs, propertiesSchema, refreshDataCount, refreshEditor, selectedObjs;
pjs = null;
selectedObjs = void 0;
changeSelection = function() {
var row, selectedRows;
selectedRows = $(".dataTable table tbody tr.selected");
if (selectedRows.length > 0) {
selectedObjs = (function() {
var j, len, results;
results = [];
for (j = 0, len = selectedRows.length; j < len; j++) {if (window.CP.shouldStopExecution(1)){break;}
row = selectedRows[j];
results.push($(row).data("obj"));
}
window.CP.exitedLoop(1);
return results;
})();
}
return refreshEditor();
};
refreshEditor = function() {
return pjs = new PJS(".propertyEditor", propertiesSchema, selectedObjs);
};
dataSource = [];
generateFakeUsers = function() {
var i, j, results, user;
results = [];
for (i = j = 1; j <= 50; i = ++j) {if (window.CP.shouldStopExecution(2)){break;}
user = faker.helpers.createCard();
user.bio = faker.lorem.sentence();
user.marked = faker.helpers.randomize([false, false, false, false, false, true]);
user.status = faker.helpers.randomize([true, true, true, true, false]);
user.password = user.username;
results.push(dataSource.push(user));
}
window.CP.exitedLoop(2);
return results;
};
initRow = function(tr, item) {
var ref, selectAllCell;
selectAllCell = $(".dataTable table thead th.selectAll");
if (!item.status) {
tr.addClass("inactive");
} else {
tr.removeClass("inactive");
}
if (item.marked) {
tr.addClass("marked");
} else {
tr.removeClass("marked");
}
tr.empty().append([$("<td/>").append($("<i/>").addClass("checkbox fa fa-square-o")), $("<td/>").text(item.name || "<empty>"), $("<td/>").text(item.username || "<empty>"), $("<td/>").text(item.email || "<empty>"), $("<td/>").text(((ref = item.address) != null ? ref.country : void 0) || "")]);
tr.find("td:eq(0)").on("click", function(e) {
var checkbox, state;
e.preventDefault();
checkbox = tr.find("input[type=checkbox]");
state = tr.hasClass("selected");
if (state) {
state = false;
} else {
state = true;
}
tr.toggleClass("selected");
selectAllCell.removeClass("selected");
return changeSelection();
});
return tr.find("td:not(:eq(0))").on("click", function(e) {
tr.addClass("selected").siblings().removeClass("selected");
selectAllCell.removeClass("selected");
return changeSelection();
});
};
refreshDataCount = function() {
return $(".header .count").text(dataSource.length);
};
$(function() {
var rows, selectAllCell, tbody, thead;
generateFakeUsers();
thead = $(".dataTable table thead");
tbody = $(".dataTable table tbody");
rows = [];
selectAllCell = thead.find("th.selectAll");
$.each(dataSource, function(i, item) {
var tr;
tr = $("<tr/>").attr("data-id", i).data("obj", item);
initRow(tr, item);
item.__row = tr;
return rows.push(tr);
});
tbody.append(rows);
refreshDataCount();
selectAllCell.on("click", function(e) {
if (selectAllCell.hasClass("selected")) {
tbody.find("tr").removeClass("selected");
} else {
tbody.find("tr").addClass("selected");
}
selectAllCell.toggleClass("selected");
return changeSelection();
});
$(".header .functions .add").on("click", function() {
var obj, tr;
selectedObjs = void 0;
$(".dataTable tr.selected").removeClass("selected");
refreshEditor();
obj = pjs.getObject();
dataSource.push(obj);
selectedObjs = [obj];
refreshDataCount();
tr = $("<tr/>").data("obj", obj).addClass("selected");
initRow(tr, obj);
obj.__row = tr;
tbody.append(tr);
return $('.dataTable').stop().animate({
scrollTop: $('.dataTable table').height()
}, 500);
});
return refreshEditor();
});
$doc = $(document);
dragging = false;
ghost = null;
$(".slider").on("mousedown", function(e) {
var offsetX, width;
e.preventDefault();
dragging = true;
width = $(".page").width();
offsetX = $(".page").offset().left;
ghost = $("<div/>", {
"class": "ghostSlider",
css: {
left: $(".properties").offset().left - offsetX
}
}).appendTo($(".page"));
$(".size").text(parseInt($(".properties").width()) + "px").fadeIn("fast");
$doc.on("mousemove", function(ev) {
dragging = true;
ghost.css({
left: ev.pageX - offsetX
});
return $(".size").text(parseInt(width - ev.pageX + offsetX) + "px");
});
return $doc.on("mouseup", function(ev) {
e.preventDefault();
if (dragging) {
$doc.off("mousemove mouseup");
$(".properties").css({
"flex": "0 0 " + (width - ghost.offset().left + offsetX) + "px"
});
ghost.remove();
return dragging = false;
}
});
});
propertiesSchema = {
liveEdit: true,
editors: [
{
field: "name",
title: "Name",
type: "text",
required: true,
multiEdit: false,
featured: true
}, {
field: "username",
title: "Username",
type: "text",
required: true,
multiEdit: false,
featured: true
}, {
field: "email",
title: "E-mail",
type: "email",
required: false,
multiEdit: false
}, {
field: "password",
title: "Password",
type: "password",
placeHolder: "Password",
required: true,
multiEdit: false,
featured: true,
toolTip: "Enter the user's password",
hint: "Minimum 6 characters",
validate: function(value, objs) {
if (value.length < 6) {
return "Password is too short! Minimum 6 characters!";
}
}
}, {
field: "phone",
title: "Phone",
type: "text",
required: false,
multiEdit: true,
hint: "Format: 0-000-000-0000 x000"
}, {
field: "website",
title: "Website",
type: "text",
required: false,
multiEdit: true
}, {
field: "address.country",
title: "Country",
type: "text",
required: false,
multiEdit: true
}, {
field: "address.city",
title: "City",
type: "text",
required: false,
multiEdit: true
}, {
field: "address.streetC",
title: "Street",
type: "text",
required: false,
multiEdit: true
}, {
field: "address.zipcode",
title: "Zip",
type: "number",
required: false,
multiEdit: true
}, {
field: "company.name",
title: "Company name",
type: "text",
required: false,
multiEdit: true
}, {
field: "company.bs",
title: "Company keywords",
type: "text",
required: false,
multiEdit: true
}, {
field: "bio",
title: "Biography",
type: "textarea",
required: false,
multiEdit: true,
rows: 3
}, {
field: "marked",
title: "Marked",
type: "boolean",
required: false,
"default": false,
multiEdit: true
}, {
field: "status",
title: "Status",
type: "boolean",
required: true,
"default": true,
multiEdit: true
}, {
field: "deleteUser",
title: "Delete user(s)",
type: "button",
schemaFunction: true,
multiEdit: true,
onclick: function(objs) {
_.remove(dataSource, function(obj) {
if (objs.indexOf(obj) !== -1) {
obj.__row.remove();
return true;
}
});
refreshDataCount();
selectedObjs = [];
return refreshEditor();
}
}
],
onChanged: function(editor, value, objs) {
console.log("Field '" + editor.fieldName + "' value changed to '" + value + "'");
return $.each(selectedObjs, function(i, item) {
return initRow(item.__row, item);
});
}
};
}).call(this);
//# sourceURL=pen.js
</script>
</body></html>
