1
Here's a small CodePen project for you to play around in, you can fork it or simply copy and paste the code into your own project.
2
Your personal demo JWT sub you use when playing around is . Keep this in handy when you start adding <weavy/> to your app and see how it works.
3
That's it. Now play around with the spaces, apps, etc to see how <weavy/>works.
body {
font-family:Arial;
}
.header { grid-area: header; background:#fbfbfb; border-bottom:1px solid #e0e0e0; padding:0 25px }
.menu { grid-area: menu; background:#c0c0c0; }
.dashboard { grid-area: main; background:#f5f5f5 }
.grid-container {
display: grid;
grid-template:
'menu header'
'menu main';
grid-template-columns: 48px auto;
grid-template-rows: 50px auto;
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
height:100%;
}
.grid-dashboard {
display: grid;
padding:20px 20px;
grid-template-columns:auto auto auto;
box-sizing:border-box;
position:absolute;
top:55px;
left:65px;
right:0px;
bottom:0px;
}
.grid-dashboard>div { box-sizing:border-box; height:100%; position:relative; }
.widget { position:absolute; padding-bottom:20px; top:0px; left:0px; right:0px; bottom:40px; margin:0 5px; }
.widget .head { color:#fff; background:#36ace2; height:40px; padding:0 20px; display:flex; align-items:center; border-radius:5px 5px 0 0 }
.widget .head i { margin-right:10px; }
.widget .body { background:#fff; height:100%; padding:0px; box-sizing:border-box; border-radius:0 0 5px 5px }
.header ul { padding:0; margin:0; list-style:none; float:right; }
.header ul li { position:relative; height:48px; align-items:center; display:flex; width:48px; float:left; }
.header ul li i { cursor:pointer; margin:auto; color:#888; font-size:24px; }
.header ul li.active { background:#36ace2; }
.header ul li.active i { color:#fff; }
.header input {
width:400px;
height:36px;
margin:4px 0;
padding:0 10px;
border-radius:4px;
border:1px solid #e0e0e0;
}
.menu ul { padding:0; margin:0; list-style:none;}
.menu ul li { height:48px; align-items:center; display:flex; width:48px; }
.menu ul li i { cursor:pointer; margin:auto; color:#888; font-size:24px; }
.header ul li.active #messenger-layer {
opacity:1;
z-index:100;
margin-top:0px;
}
#messenger-layer {
position:absolute;
background:#fff;
width:400px;
height:520px;
top:48px;
transform:translateX(-50%);
box-shadow: 0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3), 0 -18px 60px -10px rgba(0,0,0,.025);
z-index:-10;
border-radius:5px;
display:grid;
grid-template-rows:48px auto;
opacity:0;
margin-top:5px;
transition:.5s;
}
#messenger-layer>div:first-child {
background:#36ace2;
display:flex;
align-items:center;
padding:0 20px;
color:#fff;
border-radius:5px 5px 0 0
}
#messenger-layer>div:first-child i { font-size:80%; position:absolute; right:20px; }
.unread-badge {
background: #F92;
position: absolute;
top: 8px;
right: 6px;
width: 10px;
height: 10px;
border-radius: 10px;
z-index: 100;
display:none;
}
#instantmessaging.has-unread .unread-badge {
display:block;
}
<head>
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
<script src="https://demo.weavycloud.com/javascript/weavy.jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="grid-container">
<div class="header">
<ul>
<li id="instantmessaging">
<div class="unread-badge"></div>
<i class='lni lni-comments-alt'></i>
<div id="messenger-layer">
<div class="layer-header">Messenger<i class='lni lni-close'></i></div>
<div id="messenger-placeholder">
</div>
</div>
</li>
<li><i class='lni lni-user'></i></li>
<li><i class='lni lni-bulb'></i></li>
<li><i class='lni lni-cog'></i></li>
</ul>
</div>
<div class="menu">
<ul>
<li><i class='lni lni-home'></i></li>
<li><i class='lni lni-briefcase'></i></li>
<li><i class='lni lni-layers'></i></li>
</ul>
</div>
<div class="dashboard">
<div class="grid-dashboard">
<div>
<div class="widget">
<div class="head">
<i class='lni lni-text-align-justify'></i>My feed
</div>
<div class="body" id="feed-placeholder">
<!-- Placeholder for my feed -->
</div>
</div>
</div>
<div>
<div class="widget">
<div class="head">
<i class='lni lni-folder'></i>My files
</div>
<div class="body" id="files-placeholder">
<!-- Placeholder for my file -->
</div>
</div>
</div>
<div>
<div class="widget">
<div class="head">
<i class='lni lni-checkbox'></i>
My tasks
</div>
<div class="body" id="tasks-placeholder">
<!-- Placeholder for my tasks -->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
// ---------------------------------
// -- Welcome to this mock up app where you can play around with - feel free to
// -- take the code snippets into your own project.
// ---------------------------------
// ---------------------------------
// -- Your demo JWT (GUID)
var sub = '';
// ---------------------------------
if (sub!='') {
// -- Simplified login with your JWT sub
var weavy = new Weavy({ jwt: sub });
// -- Create a space in , using sub here as key too - can be anything, but should be unique
// -- This key is what you use to uniquely attach a space to any view within your app.
var weavySpace = weavy.space({ key: sub });
// -- Adding our features to the space (we call it apps), and injects them into the DOM (container)
// -- All content now created (files, posts, tasks, etc) is now associated with this space
weavySpace.app({ key: "feed", type: "posts", container: "#feed-placeholder" });
weavySpace.app({ key: "files", type: "files", container: "#files-placeholder" });
weavySpace.app({ key: "tasks", type: "tasks", container: "#tasks-placeholder" });
weavySpace.app({ key: "messenger", type: "messenger", container: "#messenger-placeholder" });
// -- Handle badge update for new messages
weavy.on("badge", function (e, data) {
var im = $("#instantmessaging");
data.conversations > 0 ? im.addClass("has-unread") : im.removeClass("has-unread");
});
}
// ---------------------------------
$('.header li').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$('.header li').removeClass('active');
$(this).addClass('active');
}
});
$('.layer-header i').click(function() {
$(this).parent().parent().removeClass('active');
});
