Skip to content

Gelencsér Szabolcs / cloud

Go to a project
Commit de69822e by Dányi Bence
Options

store ajax navigation

parent ac864845
Showing with 121 additions and 28 deletions
one/static/box.less
...@@ -216,6 +216,7 @@ ...@@ -216,6 +216,7 @@
.file-list{ .file-list{
list-style: none; list-style: none;
overflow: hidden;
.name{ .name{
float: left; float: left;
} }
...@@ -246,6 +247,9 @@ ...@@ -246,6 +247,9 @@
.filetype-up { .filetype-up {
background-image: url(icons/upload-cloud.png); background-image: url(icons/upload-cloud.png);
} }
.filetype-jump-out {
background-image: url(icons/arrow-curve-090.png);
}
.wm-on{ .wm-on{
background-image: url(icons/computer-cloud.png); background-image: url(icons/computer-cloud.png);
} }
......
one/static/cloud.js
var toggleDetails; var toggleDetails;
$(function(){ $(function(){
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
crossDomain: false,
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
toggleDetails=function(){ toggleDetails=function(){
if($(this).next('.details').is(':hidden')){ if($(this).next('.details').is(':hidden')){
$(this).next('.details').slideDown(700); $(this).next('.details').slideDown(700);
...@@ -45,22 +71,66 @@ $(function(){ ...@@ -45,22 +71,66 @@ $(function(){
var Model=function(){ var Model=function(){
var self=this; var self=this;
self.files=ko.observableArray(); self.files=ko.observableArray();
$.ajax({ self.notInRoot=ko.observable(false);
type: 'POST', self.jumpUp=function(){
url: '/ajax/store/list', var s=self.currentPath();
dataType: 'json', self.currentPath(s.substr(0,s.substr(0,s.length-1).lastIndexOf('/')+1));
}).done(function(data){ loadFolder(self.currentPath());
}
var loadFolder=function(path){
console.log('loadFolder');
$.ajax({
type: 'POST',
data: 'path='+path,
url: '/ajax/store/list',
dataType: 'json',
success: function(data){
$('.file-list .real').css({left:0,position:'relative'}).animate({left:'-100%'},1000).promise().done(function(){
loadFolderDone(data);
$('.file-list .real').css({left:'-300%',position:'relative'}).animate({left:0},1000);
});
},
})
}
var loadFolderDone=function(data){
self.notInRoot(self.currentPath().lastIndexOf('/') !== 0);
var viewData=[];
for(var i in data){ for(var i in data){
data[i].getTypeClass=function(t){ var d=data[i];
return 'name filetype-'+(t=='D'?'folder':'text'); if(data[i].TYPE === 'D'){
}(data[i].TYPE); viewData[i]={
data[i].SIZE=data[i].TYPE=='D'?'katalógus':(data[i].SIZE+'K'); originalName: d.NAME,
data[i].TYPE=data[i].TYPE=='D'?'katalógus':'fájl'; name: d.NAME.length>30?(d.NAME.substr(0,27)+'...'):d.NAME,
size: 'katalógus',
type: 'katalógus',
mTime: d.MTIME,
getTypeClass: 'name filetype-folder',
clickHandler: function(item){
self.currentPath(self.currentPath()+item.originalName+'/');
loadFolder(self.currentPath());
}
};
} else {
viewData[i]={
name: d.NAME.length>30?(d.NAME.substr(0,27)+'...'):d.NAME,
size: data[i].SIZE+'K',
type: 'fájl',
mTime: d.MTIME,
getTypeClass: 'name filetype-text',
clickHandler: function(){
}
};
}
} }
self.files(data); self.files(viewData);
$('.wm .summary').unbind('click').click(toggleDetails); }
}) self.currentPath=ko.observable('/');
loadFolder(self.currentPath());
} }
var model=new Model(); var model=new Model();
ko.applyBindings(model); ko.applyBindings(model);
document.addEventListener('dragenter', function(e){console.log(e);e.stopPropagation();e.preventDefault();return false;});
document.addEventListener('dragover', function(e){console.log(e);e.stopPropagation();e.preventDefault();return false;});
document.addEventListener('drop', function(e){console.log(e);e.stopPropagation();e.preventDefault();return false;});
}) })
one/templates/home.html
...@@ -48,6 +48,15 @@ ...@@ -48,6 +48,15 @@
</ul> </ul>
</div> </div>
</li> </li>
<li class="wm small">
<div class="summary">
<div class="quota">
<div class="used" style="background-color: rgba(0,255,0,0.2); width: 0%"></div>
</div>
<div class="name">Saját Kvóta: 0/10</div>
<div class="clear"></div>
</div>
</li>
</ul> </ul>
</div> </div>
<div class="contentblock" id="template"> <div class="contentblock" id="template">
...@@ -56,7 +65,7 @@ ...@@ -56,7 +65,7 @@
<li class="wm"> <li class="wm">
<div class="summary"> <div class="summary">
<div class="quota"> <div class="quota">
<div class="used" style="background-color: rgba(0,255,0,0.5); width: 20%"></div> <div class="used" style="background-color: rgba(0,255,0,0.2); width: 20%"></div>
</div> </div>
<div class="name">Win7 Matlab</div> <div class="name">Win7 Matlab</div>
<div class="status">2/10</div> <div class="status">2/10</div>
...@@ -68,7 +77,6 @@ ...@@ -68,7 +77,6 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="details"> <div class="details">
<h3>Részletek</h3>
<ul> <ul>
<li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li> <li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li>
<li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li> <li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
...@@ -81,7 +89,7 @@ ...@@ -81,7 +89,7 @@
<li class="wm"> <li class="wm">
<div class="summary"> <div class="summary">
<div class="quota"> <div class="quota">
<div class="used" style="background-color: rgba(255,128,0,0.5); width: 70%"></div> <div class="used" style="background-color: rgba(255,128,0,0.2); width: 70%"></div>
</div> </div>
<div class="name">Win7 Matlab</div> <div class="name">Win7 Matlab</div>
<div class="status">7/10</div> <div class="status">7/10</div>
...@@ -93,7 +101,6 @@ ...@@ -93,7 +101,6 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="details"> <div class="details">
<h3>Részletek</h3>
<ul> <ul>
<li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li> <li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li>
<li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li> <li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
...@@ -106,7 +113,7 @@ ...@@ -106,7 +113,7 @@
<li class="wm"> <li class="wm">
<div class="summary"> <div class="summary">
<div class="quota"> <div class="quota">
<div class="used" style="background-color: rgba(255,0,0,0.5); width: 100%"></div> <div class="used" style="background-color: rgba(255,0,0,0.2); width: 100%"></div>
</div> </div>
<div class="name">Win7 Matlab</div> <div class="name">Win7 Matlab</div>
<div class="status">10/10</div> <div class="status">10/10</div>
...@@ -118,7 +125,6 @@ ...@@ -118,7 +125,6 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="details"> <div class="details">
<h3>Részletek</h3>
<ul> <ul>
<li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li> <li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li>
<li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li> <li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
...@@ -139,7 +145,6 @@ ...@@ -139,7 +145,6 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="details"> <div class="details">
<h3>Részletek</h3>
<ul> <ul>
<li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li> <li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li>
<li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li> <li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
...@@ -158,9 +163,9 @@ ...@@ -158,9 +163,9 @@
<li class="wm small"> <li class="wm small">
<div class="summary"> <div class="summary">
<div class="quota"> <div class="quota">
<div class="used" style="background-color: rgba(0,255,0,0.5); width: 19%"></div> <div class="used" style="background-color: rgba(0,255,0,0.2); width: 19%"></div>
</div> </div>
<div class="name">Kvóta: 19/100</div> <div class="name">Elosztható Kvóta: 19/100</div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</li> </li>
...@@ -184,11 +189,25 @@ ...@@ -184,11 +189,25 @@
</h2> </h2>
<div class="content"> <div class="content">
<ul class="file-list"> <ul class="file-list">
<!-- ko foreach: files --> <li class="wm small">
<li class="wm">
<div class="summary"> <div class="summary">
<div class="name" data-bind="text: NAME, attr: {class: getTypeClass}"></div> <div class="name">Jelenlegi hely: <span data-bind="text: currentPath"></span></div>
<div class="info" data-bind="text: SIZE"></div> <div class="clear"></div>
</div>
</li>
<li class="wm real" data-bind="visible: notInRoot, click: jumpUp">
<div class="summary">
<div class="name filetype-jump-out">
Szülő mappa
</div>
<div class="clear"></div>
</div>
</li>
<!-- ko foreach: files -->
<li class="wm real">
<div class="summary" data-bind="click: clickHandler">
<div class="name" data-bind="text: name, attr: {class: getTypeClass}"></div>
<div class="info" data-bind="text: size"></div>
<div class="actions"> <div class="actions">
<a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a> <a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a> <a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
...@@ -199,8 +218,8 @@ ...@@ -199,8 +218,8 @@
<div class="details"> <div class="details">
<div class="details-container"> <div class="details-container">
<ul> <ul>
<li>Módosítva: <span class="value" data-bind="text: MTIME"></span></li> <li>Módosítva: <span class="value" data-bind="text: mTime"></span></li>
<li>Típus: <span class="value" data-bind="text: TYPE"></span></li> <li>Típus: <span class="value" data-bind="text: type"></span></li>
</ul> </ul>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment