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 @@
.file-list{
list-style: none;
overflow: hidden;
.name{
float: left;
}
......@@ -246,6 +247,9 @@
.filetype-up {
background-image: url(icons/upload-cloud.png);
}
.filetype-jump-out {
background-image: url(icons/arrow-curve-090.png);
}
.wm-on{
background-image: url(icons/computer-cloud.png);
}
......
one/static/cloud.js
var toggleDetails;
$(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(){
if($(this).next('.details').is(':hidden')){
$(this).next('.details').slideDown(700);
......@@ -45,22 +71,66 @@ $(function(){
var Model=function(){
var self=this;
self.files=ko.observableArray();
$.ajax({
type: 'POST',
url: '/ajax/store/list',
dataType: 'json',
}).done(function(data){
self.notInRoot=ko.observable(false);
self.jumpUp=function(){
var s=self.currentPath();
self.currentPath(s.substr(0,s.substr(0,s.length-1).lastIndexOf('/')+1));
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){
data[i].getTypeClass=function(t){
return 'name filetype-'+(t=='D'?'folder':'text');
}(data[i].TYPE);
data[i].SIZE=data[i].TYPE=='D'?'katalógus':(data[i].SIZE+'K');
data[i].TYPE=data[i].TYPE=='D'?'katalógus':'fájl';
var d=data[i];
if(data[i].TYPE === 'D'){
viewData[i]={
originalName: d.NAME,
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);
$('.wm .summary').unbind('click').click(toggleDetails);
})
self.files(viewData);
}
self.currentPath=ko.observable('/');
loadFolder(self.currentPath());
}
var model=new 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 @@
</ul>
</div>
</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>
</div>
<div class="contentblock" id="template">
......@@ -56,7 +65,7 @@
<li class="wm">
<div class="summary">
<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 class="name">Win7 Matlab</div>
<div class="status">2/10</div>
......@@ -68,7 +77,6 @@
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<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>
......@@ -81,7 +89,7 @@
<li class="wm">
<div class="summary">
<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 class="name">Win7 Matlab</div>
<div class="status">7/10</div>
......@@ -93,7 +101,6 @@
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<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>
......@@ -106,7 +113,7 @@
<li class="wm">
<div class="summary">
<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 class="name">Win7 Matlab</div>
<div class="status">10/10</div>
......@@ -118,7 +125,6 @@
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<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>
......@@ -139,7 +145,6 @@
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<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>
......@@ -158,9 +163,9 @@
<li class="wm small">
<div class="summary">
<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 class="name">Kvóta: 19/100</div>
<div class="name">Elosztható Kvóta: 19/100</div>
<div class="clear"></div>
</div>
</li>
......@@ -184,11 +189,25 @@
</h2>
<div class="content">
<ul class="file-list">
<!-- ko foreach: files -->
<li class="wm">
<li class="wm small">
<div class="summary">
<div class="name" data-bind="text: NAME, attr: {class: getTypeClass}"></div>
<div class="info" data-bind="text: SIZE"></div>
<div class="name">Jelenlegi hely: <span data-bind="text: currentPath"></span></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">
<a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
......@@ -199,8 +218,8 @@
<div class="details">
<div class="details-container">
<ul>
<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>Módosítva: <span class="value" data-bind="text: mTime"></span></li>
<li>Típus: <span class="value" data-bind="text: type"></span></li>
</ul>
</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