LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
  1. Select a user
  2. Try to change Name or Nickname property
  3. Press "Send message to user" button and watch the nice popup window
  4. Select an other user too
  5. Try the multiple property edit (e.g. change status)
  6. Watch the "Add new user" button hover effect
CSS
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,800|Droid+Sans:400,700|Lato:300,400,700,900|PT+Sans:400,700|Ubuntu:300,400,500,700|Open+Sans:400,300,600,700|Roboto:400,300,500,700,900|Roboto+Condensed:400,300,700|Open+Sans+Condensed:300,700|Play:400,700|Maven+Pro:400,500,700,900&subset=latin,latin-ext);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html {
  background-color: #565656;
  font-family: "Open Sans", "Helvetica Neue", Tahoma, sans-serif;
  font-size: 16px;
  color: #d6d6d6;
}

body {
  overflow: hidden;
}

.messages .selectedCount, .users .user .info, .users .user dl, .users .user .funcs .icon:hover:after {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75);
}

body {
  padding: 30px;
}

.messages {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 20px;
  text-align: center;
  opacity: 0;
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.messages .selectedCount {
  display: inline-block;
  margin: auto;
  background-color: #707070;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  color: darker2;
  text-align: center;
  padding: 6px 20px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
}
.messages.visible {
  opacity: 1;
  -moz-transform: none;
  -ms-transform: none;
  -webkit-transform: none;
  transform: none;
}

.users {
  margin: 20px;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.users .user {
  position: relative;
  width: 280px;
  height: 320px;
  margin-bottom: 30px;
  margin-right: 0px;
  cursor: pointer;
  opacity: 0.0;
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
}
.users .user .photo {
  position: relative;
  text-align: center;
  z-index: 10;
}
.users .user .photo img {
  width: 200px;
  height: 200px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  -moz-transition: -moz-transform, ease 0.5s;
  -o-transition: -o-transform, ease 0.5s;
  -webkit-transition: -webkit-transform, ease 0.5s;
  transition: transform, ease 0.5s;
  -moz-perspective: 1000;
  -webkit-perspective: 1000;
  perspective: 1000;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.users .user .info {
  text-align: center;
  margin-top: 10px;
  font-family: "Open Sans Condensed", "Lato", "Segoe UI Light", Arial;
  font-size: 1.3rem;
  z-index: 8;
}
.users .user .info .name {
  text-align: center;
}
.users .user .info .nickName {
  margin-top: 4px;
  text-align: center;
  font-size: 0.9rem;
}
.users .user .info .nickName:before {
  content: "(";
}
.users .user .info .nickName:after {
  content: ")";
}
.users .user dl {
  z-index: 8;
  margin-top: 10px;
  font-size: 0.8rem;
}
.users .user dl dt {
  text-align: right;
  font-weight: 700;
  float: left;
  width: 30%;
  padding: 2px 0px;
}
.users .user dl dt:after {
  content: ":";
  margin-right: 10px;
}
.users .user dl dd {
  text-align: left;
  float: right;
  width: 70%;
  padding: 2px 0px;
}
.users .user dl dt, .users .user dl dd {
  opacity: 0;
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.users .user .funcs {
  position: absolute;
  left: 140px;
  top: 100px;
  z-index: 8;
}
.users .user .funcs .icon {
  position: absolute;
  opacity: 0.8;
  font-size: 1.3rem;
  -moz-transition: -moz-transform 0.5s ease, font-size 0.2s ease;
  -o-transition: -o-transform 0.5s ease, font-size 0.2s ease;
  -webkit-transition: -webkit-transform 0.5s ease, font-size 0.2s ease;
  transition: transform 0.5s ease, font-size 0.2s ease;
}
.users .user .funcs .icon:hover:after {
  position: absolute;
  display: block;
  content: attr(title);
  padding: .3em 1em;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  color: #d6d6d6;
  z-index: 20;
  white-space: nowrap;
  font-size: 0.8rem;
  font-family: "Open Sans";
  right: 1.8em;
  bottom: 0;
}
.users .user .funcs .left .icon {
  padding-left: 20px;
}
.users .user .funcs .right .icon {
  padding-right: 20px;
}
.users .user .funcs .right .icon:hover:after {
  right: initial;
  left: 2.2em;
}
.users .user:hover, .users .user.selected {
  opacity: 1.0 !important;
}
.users .user:hover img, .users .user.selected img {
  -moz-box-shadow: 0 0 20px black;
  -webkit-box-shadow: 0 0 20px black;
  box-shadow: 0 0 20px black;
}
.users .user:hover .funcs, .users .user.selected .funcs {
  z-index: 11;
}
.users .user:hover .funcs .icon:hover, .users .user.selected .funcs .icon:hover {
  opacity: 1.0;
  color: #fab000;
}
.users .user:hover .funcs .left :nth-child(1), .users .user.selected .funcs .left :nth-child(1) {
  -moz-transform: translate(-110px, 80px);
  -ms-transform: translate(-110px, 80px);
  -webkit-transform: translate(-110px, 80px);
  transform: translate(-110px, 80px);
}
.users .user:hover .funcs .left :nth-child(2), .users .user.selected .funcs .left :nth-child(2) {
  -moz-transform: translate(-130px, 50px);
  -ms-transform: translate(-130px, 50px);
  -webkit-transform: translate(-130px, 50px);
  transform: translate(-130px, 50px);
}
.users .user:hover .funcs .left :nth-child(3), .users .user.selected .funcs .left :nth-child(3) {
  -moz-transform: translate(-150px, 20px);
  -ms-transform: translate(-150px, 20px);
  -webkit-transform: translate(-150px, 20px);
  transform: translate(-150px, 20px);
}
.users .user:hover .funcs .left :nth-child(4), .users .user.selected .funcs .left :nth-child(4) {
  -moz-transform: translate(-155px, -10px);
  -ms-transform: translate(-155px, -10px);
  -webkit-transform: translate(-155px, -10px);
  transform: translate(-155px, -10px);
}
.users .user:hover .funcs .left :nth-child(5), .users .user.selected .funcs .left :nth-child(5) {
  -moz-transform: translate(-150px, -40px);
  -ms-transform: translate(-150px, -40px);
  -webkit-transform: translate(-150px, -40px);
  transform: translate(-150px, -40px);
}
.users .user:hover .funcs .left :nth-child(6), .users .user.selected .funcs .left :nth-child(6) {
  -moz-transform: translate(-135px, -70px);
  -ms-transform: translate(-135px, -70px);
  -webkit-transform: translate(-135px, -70px);
  transform: translate(-135px, -70px);
}
.users .user:hover .funcs .right :nth-child(1), .users .user.selected .funcs .right :nth-child(1) {
  -moz-transform: translate(70px, 80px);
  -ms-transform: translate(70px, 80px);
  -webkit-transform: translate(70px, 80px);
  transform: translate(70px, 80px);
}
.users .user:hover .funcs .right :nth-child(2), .users .user.selected .funcs .right :nth-child(2) {
  -moz-transform: translate(100px, 50px);
  -ms-transform: translate(100px, 50px);
  -webkit-transform: translate(100px, 50px);
  transform: translate(100px, 50px);
}
.users .user:hover .funcs .right :nth-child(3), .users .user.selected .funcs .right :nth-child(3) {
  -moz-transform: translate(110px, 20px);
  -ms-transform: translate(110px, 20px);
  -webkit-transform: translate(110px, 20px);
  transform: translate(110px, 20px);
}
.users .user:hover .funcs .right :nth-child(4), .users .user.selected .funcs .right :nth-child(4) {
  -moz-transform: translate(115px, -10px);
  -ms-transform: translate(115px, -10px);
  -webkit-transform: translate(115px, -10px);
  transform: translate(115px, -10px);
}
.users .user:hover .funcs .right :nth-child(5), .users .user.selected .funcs .right :nth-child(5) {
  -moz-transform: translate(110px, -40px);
  -ms-transform: translate(110px, -40px);
  -webkit-transform: translate(110px, -40px);
  transform: translate(110px, -40px);
}
.users .user:hover .funcs .right :nth-child(6), .users .user.selected .funcs .right :nth-child(6) {
  -moz-transform: translate(95px, -70px);
  -ms-transform: translate(95px, -70px);
  -webkit-transform: translate(95px, -70px);
  transform: translate(95px, -70px);
}
.users .user:hover dt, .users .user:hover dd, .users .user.selected dt, .users .user.selected dd {
  opacity: 1.0;
  transform: none;
}
.users .user.selected .name {
  color: #fab000;
  font-weight: 700;
}
.users .user.selected .photo img {
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.users .user.selected .photo:after {
  position: absolute;
  content: "";
  left: 37px;
  top: -3px;
  width: 200px;
  height: 200px;
  border: 3px dashed rgba(250, 176, 0, 0.5);
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -moz-animation: dash 20s infinite linear;
  -webkit-animation: dash 20s infinite linear;
  animation: dash 20s infinite linear;
}
.users .user.inactive .photo {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.users .user.inactive .info {
  font-style: italic;
}
.users .user.inactive:after {
  content: "INACTIVE";
  padding: 4px 10px;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 120px;
  width: 160px;
  height: 20px;
  line-height: 20px;
  margin: auto;
  z-index: 20;
  font-family: "Source Sans Pro", "Arial Black", Arial, sans-serif;
  font-weight: 700;
  color: #FFDDDD;
  font-size: 2.0rem;
  text-shadow: 0px 0px 1px red;
  text-align: center;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border: 3px solid #880000;
  -moz-transform: rotateZ(-20deg);
  -ms-transform: rotateZ(-20deg);
  -webkit-transform: rotateZ(-20deg);
  transform: rotateZ(-20deg);
  background-color: rgba(255, 0, 0, 0.3);
}
.users .user.new .photo {
  text-align: center;
}
.users .user.new .photo .placeHolder {
  margin: auto;
  width: 200px;
  height: 200px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  border: 8px dashed #707070;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition: -moz-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.users .user.new .photo:before {
  position: absolute;
  left: 30px;
  top: 0;
  text-align: center;
  vertical-align: middle;
  content: "\f234";
  font-family: FontAwesome;
  font-size: 5.0rem;
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #707070;
}
.users .user.new:hover .photo .placeHolder {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.editorBox {
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: -350px;
  width: 350px;
  -moz-perspective: 500;
  -webkit-perspective: 500;
  perspective: 500;
}
.editorBox .propertyEditor {
  background-color: #323232;
  font-size: 0.9rem;
}

.page {
  overflow: hidden;
  width: 100%;
}

/*
.page.editing {
	.users {
		margin-right:	$editorWidth;
	} // .users
	
	.editorBox {
		right: 0px;
	} // .editorBox
	
} // .page.editing
*/
.popup {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 300px;
  overflow: hidden;
  z-index: 20;
  font-family: "Montserrat", "Open Sans";
  padding: 10px;
  background-color: rgba(35, 35, 35, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.4);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
  -moz-transform-style: preserve-3D;
  -webkit-transform-style: preserve-3D;
  transform-style: preserve-3D;
  -moz-transform: perspective(1000px) translateY(300px) rotateX(-74deg);
  -ms-transform: perspective(1000px) translateY(300px) rotateX(-74deg);
  -webkit-transform: perspective(1000px) translateY(300px) rotateX(-74deg);
  transform: perspective(1000px) translateY(300px) rotateX(-74deg);
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0.2;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.popup.show {
  display: block;
  opacity: 1;
  -moz-transform: none;
  -ms-transform: none;
  -webkit-transform: none;
  transform: none;
}
.popup .header {
  padding: 10px 10px;
}
.popup .header .title {
  font-size: 1.6rem;
  font-family: "Open Sans Condensed";
  float: left;
}
.popup .header .icon {
  float: right;
  font-size: 1.3rem;
}
.popup .header .icon i {
  cursor: pointer;
  -moz-transform: none;
  -ms-transform: none;
  -webkit-transform: none;
  transform: none;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.popup .header .icon i:hover {
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.popup .header:before, .popup .header:after {
  content: "";
  display: table;
}
.popup .header:after {
  clear: both;
}
.popup .content {
  padding: 10px;
  position: relative;
}
.popup .content textarea {
  width: 100%;
  height: 200px;
  margin: 0;
  border: 0;
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.5);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "Open Sans";
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  color: White;
}
.popup .content textarea:-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.popup .content textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.popup .content textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.popup .content textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.instructions {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  font-size: 1.1rem;
  font-family: "Open Sans Condensed", "Lato", "Segoe UI Light", Arial;
  color: #d6d6d6;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  -moz-transition: color 0.3s linear;
  -o-transition: color 0.3s linear;
  -webkit-transition: color 0.3s linear;
  transition: color 0.3s linear;
}
.instructions ol {
  list-style-type: decimal;
  padding-left: 20px;
}
.instructions ol li {
  padding: 2px 0px;
}

body:hover .instructions {
  opacity: 0.2;
}

@-webkit-keyframes dash {
  0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes dash {
  0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes dash {
  0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
JS
### 
Instructions:
-------------
1. Select a user
2. Try to change Name or Nickname property
3. Press "Send message to user" button and watch the nice popup window
4. Select an other user too
5. Try the multiple property edit (e.g. change status)
6. Watch the "Add new user" button hover effect

### 

### 
Pictures: 
	http://rapsag.deviantart.com/art/Walter-White-396773756
	http://ignis-vitae.deviantart.com/art/Jesse-Pinkman-Breaking-Bad-343381256
	http://jkim34.deviantart.com/art/Saul-Goodman-369909575
###   

users = [
	id: 1
	name: "Walter White"
	userName: "Heisenberg"
	realName: "Brian Cranston"
	email: "heisenberg@breakingbad.com"
	born: "California, USA"
	dob: "1956-03-07"
	photo: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/102308/walter_white_by_rapsag.d6k88l8_(1).jpg"
	status: true
	created: "2015-03-30 22:49:32"
	skills: ["Chemist", "Teacher", "Clever"]
	settings:
		themeColor: "#fab000"
		motto: "Say my name!"
,		
	id: 2
	name: "Jesse Pinkman"
	userName: "jessy"
	realName: "Aaron Paul"
	email: "j.pinkman@breakingbad.com"
	born: "Idaho, USA"
	dob: "1979-08-27"
	photo: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/102308/jesse_pinkman___breaking_bad_by_ignis_vitae.d5ofuo8.jpg"
	status: true
	created: "2015-03-30 23:50:11"
	skills: ["Student", "Dealer", "Unmindful"]
	settings:
		themeColor: "#000"
		motto: "You're my free pass...!"		
,	
	id: 3
	name: "Saul Goodman"
	userName: "saul"
	realName: "James Morgan McGill"
	email: "saul@breakingbad.com"
	born: "Illinois, USA"
	dob: "1962-10-22"
	photo: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/102308/saul_goodman_by_jkim34.d648g1z.jpg"
	status: false
	created: "2015-03-31 13:42:50"
	skills: ["Lawyer", "Clever", "Corrupt"]
	settings:
		themeColor: "Red"
		motto: "Better call Saul!"	
]

showUsers = -> 
	container = $(".users")
	$.each users, (i, user) ->
		tpl = Handlebars.compile($("#user-template").html())
		userDiv = $(tpl(user)).data("object", user).appendTo container
		if not user.status
			userDiv.addClass "inactive"
		
	# New user
	tpl = Handlebars.compile($("#new-user-template").html())
	$(tpl({})).appendTo container
		
$ ->
	showUsers()

	# Show users (slideIn)
	tl = new TimelineLite()
	tl.staggerTo ".user", 1, {opacity: 0.6, y: 0}, 0.2

	# Event handler for user functions
	$(".user .icon.status").on "click", (e)->
		toastr.info "Change user status"		
		userDiv = $(e.target).closest(".user")
		userDiv.toggleClass("inactive")
		userDiv.data("object").status = not userDiv.data("object").status
		
		e.stopPropagation()

	$(".user .icon.delete").on "click", (e)->
		toastr.info "Delete user"		
		e.stopPropagation()

	$(".user .icon.clone").on "click", (e)->
		toastr.info "Clone user"		
		e.stopPropagation()

	$(".user .icon.send").on "click", (e)->
		$(".popup").addClass "show"		
		e.stopPropagation()
	
	$(".popup .icon i").on "click", ->
		$(".popup").removeClass("show")
		toastr.info "Message sent"		

	getUserDivs = -> $(".user.selected")
	
	# Event handler for selection
	$(".user:not(.new)").on "click", ->
		$this = $(this)
		$this.toggleClass "selected"

		selectedCount = $(".user.selected").length
		if selectedCount > 0
			# $(".page").addClass "editing"
			
			# Get selected objects
			selectedObjs = []
			$(".user.selected").each (i, user) ->
				selectedObjs.push $(user).data("object");				
				
			# Show editor
			pjs = new PJS ".propertyEditor", propertiesSchema, selectedObjs
			pjs.on "changed", (editor, value, objects) ->
				divs = getUserDivs objects
				switch (editor.fieldName)
					when "name" then $(divs).find(".info .name").text value
					when "userName" then $(divs).find(".info .nickName").text value
					when "born" then $(divs).find("dl dd:eq(0)").text value
					when "dob" then $(divs).find("dl dd:eq(1)").text value
					when "email" then $(divs).find("dl dd:eq(2)").text value
					when "status" 
						if value then $(divs).removeClass("inactive") else $(divs).addClass("inactive")
				
			pjs.on "function-sendMessage", (editor, objects) -> $(".popup").addClass "show"		

			# Show editor
			TweenLite.to ".editorBox", 0.8, { right: 0, ease:Power4.easeOut}
			TweenLite.to ".users", 1.9, { "margin-right": "350px", ease:Power2.easeOut}
		
			
		else
			# $(".page").removeClass "editing"
			# Hide editor
			TweenLite.to ".editorBox", 0.8, { right: "-350px", ease:Power4.easeOut}
			TweenLite.to ".users", 1.8, { "margin-right": "0px", ease:Power2.easeOut}


	# Event handler for new user
	$(".user.new").on "click", ->
		toastr.success "Add a new user"
	
# --- PROPERTIES SCHEMA ---	
propertiesSchema = 	
	editors: [		
			field: "name"
			title: "Name"
			type: "text"
			required: true
			multiEdit: true
			featured: true
		,
			field: "userName"
			title: "Nick name"
			type: "text"
			required: true
			multiEdit: false
			featured: true
		,
			field: "realName"
			title: "Real full name"
			toolTip: "This is the user's real born name"
			type: "text"
			required: false
			multiEdit: false		
		,
			field: "email"
			title: "E-mail"
			type: "email"
			required: false
			multiEdit: false		
			field: "password"
			title: "Password"
			type: "password"
			placeHolder: "Password"
			required: true
			multiEdit: true
			featured: true
			toolTip: "Enter the user's password"
			hint: "Minimum 6 characters"
			validate: (value, objs) -> if value.length < 6 then return "Password is too short! Minimum 6 characters!"
		,
			field: "phone"
			title: "Phone"
			type: "text"
			required: false
			multiEdit: true
			pattern: "^[0-9]{3}-[0-9]{4}$"
			hint: "Format: 000-0000"
		,		
			field: "born"
			title: "Born"
			type: "text"
			required: false
			multiEdit: true	
		,
			field: "dob"
			title: "Date of birth"
			type: "date"
			format: "YYYY-MM-DD"
			required: false
			multiEdit: true	
			validate: (value, objs) ->
				if value is "1963-03-07"
					return "Invalid date!"
		,
			field: "settings.isActor"
			title: "Is an actor?"
			type: "boolean"
			required: true
			default: false
			multiEdit: true	
		,
			field: "status"
			title: "Status"
			type: "boolean"
			required: true
			default: false
			multiEdit: true	
		,
			field: "created"
			title: "Created at"
			type: "timestamp"
			format: "YYYY-MM-DD HH:mm:ss"
			required: false
			readonly: true
		,
			field: "skills"
			title: "Skills"
			type: "checklist"
			multiEdit: true
			listBox: false
			required: true
			rows: 6
			values: [
				"Chemist"
				"Teacher"
				"Student"
				"Lawyer"
				"Dealer"
				"Clever"
				"Unmindful"
				"Corrupt"
			]
		,
			field: "settings.motto"
			title: "Motto"
			type: "textarea"
			required: false
			multiEdit: true
			placeHolder: "What do you think?"
			rows: 3
		,
			field: "settings.nativeLang"
			title: "Native language"
			type: "select"
			required: true
			multiEdit: true
			values: [
				{ id: "en", name: "English" }
				{ id: "de", name: "Deutsch" }
				{ id: "it", name: "Italiano" }
				{ id: "es", name: "Español" }
				{ id: "fr", name: "Français" }
			]
		,
			field: "sendMessage"
			title: "Send message to user"
			styleClass: "fa fa-envelope"
			type: "button"
			multiEdit: true
			schemaFunction: true
		,
			field: "clone"
			title: "Clone user"
			styleClass: "fa fa-copy"
			type: "button"
			schemaFunction: true
			multiEdit: false
			onclick: (objs)->
				toastr.info "Clone selected #{objs.length} users"
		,
			field: "delete"
			title: "Delete user"
			styleClass: "fa fa-trash"
			type: "button"
			schemaFunction: true
			multiEdit: true
			onclick: (objs)->
				toastr.info "Delete selected #{objs.length} users"
		
		
	]	
	

Description

Technologies: - Jade, SCSS, Coffeescript - PropertiesJS (https://github.com/icebob/propertiesjs) coming soon
Term
Mon, 11/27/2017 - 21:19

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv