An improvement upon the previous example. Files and folders are now sorted alphabetically, icons reflect the file’s type, files are represented as big tiles with previews in case of image files.
// Generated by CoffeeScript 1.10.0
(function() {
var breadcrumb, bttf_cover, cd, cd__, cut_path, cwd, documents, files_container, index_n_sort, movies, music, open_folders, photos, pictures, ramona, redraw, root, subfolders_container, up;
ramona = {
id: 0,
name: 'ramona flowers.png',
type: 'image'
};
bttf_cover = {
id: 1,
name: 'Back to the Future - Cover.jpg',
type: 'image'
};
photos = {
id: 10,
name: 'Photos',
subfolders: [],
files: []
};
pictures = {
id: 2,
name: 'Pictures',
subfolders: [photos],
files: [
ramona, {
id: 9,
name: 'chibi miku.jpg',
type: 'image'
}, bttf_cover
]
};
movies = {
id: 3,
name: 'Movies',
subfolders: [],
files: [
{
id: 6,
name: 'Back to the Future.mkv',
type: 'video'
}, bttf_cover
]
};
documents = {
id: 4,
name: 'Documents',
subfolders: [photos],
files: [
ramona, {
id: 12,
name: 'money money money.txt',
type: 'text'
}, {
id: 13,
name: 'pitfalls.pdf',
type: 'pdf'
}
]
};
music = {
id: 14,
name: 'Music',
subfolders: [],
files: [
{
id: 15,
name: 'Tell your world (初音ミク).mp3',
type: 'audio'
}, {
id: 16,
name: 'Surrounded (Dream Theater).mp3',
type: 'audio'
}
]
};
root = {
id: 5,
subfolders: [pictures, movies, documents, music],
files: [
{
id: 7,
name: 'vmlinuz'
}
]
};
index_n_sort = function(node) {
if (node.index != null) {
return;
}
node.index = {};
node.subfolders.forEach(function(sf) {
return node.index[sf.name] = sf;
});
node.files.forEach(function(f) {
return node.index[f.name] = f;
});
node.subfolders.sort(function(a, b) {
return d3.ascending(a.name, b.name);
});
node.files.sort(function(a, b) {
return d3.ascending(a.name, b.name);
});
return node.subfolders.forEach(function(sf) {
return index_n_sort(sf);
});
};
index_n_sort(root);
open_folders = [root];
cd = function(sf_name) {
open_folders.push(open_folders[open_folders.length - 1].index[sf_name]);
return redraw();
};
cd__ = function() {
if (open_folders.length > 1) {
open_folders.pop();
return redraw();
}
};
cut_path = function(folder) {
if (open_folders.length === 1 || open_folders[open_folders.length - 1].id === folder.id) {
redraw();
return;
}
open_folders.pop();
return cut_path(folder);
};
cwd = d3.select('#cwd');
subfolders_container = cwd.append('div');
files_container = cwd.append('div');
up = d3.select('#up_btn');
breadcrumb = d3.select('#breadcrumb');
up.on('click', function() {
return cd__();
});
redraw = function() {
var cwd_data, enter_files, enter_previews, files, path_items, subfolders;
cwd_data = open_folders[open_folders.length - 1];
subfolders = subfolders_container.selectAll('.subfolder').data(cwd_data.subfolders, function(d) {
return d.id;
});
subfolders.enter().append('div').attr({
"class": 'subfolder node'
}).html(function(d) {
return '<i class="icon fa fa-fw fa-folder"></i> ' + d.name;
}).on('click', function(d) {
return cd(d.name);
});
subfolders.exit().remove();
subfolders.order();
files = files_container.selectAll('.file').data(cwd_data.files, function(d) {
return d.id;
});
enter_files = files.enter().append('div').attr({
"class": 'file node'
});
enter_previews = enter_files.append('div').attr({
"class": 'preview'
});
enter_previews.each(function(d) {
if (d.type === 'image') {
return d3.select(this).style({
'background-image': "url(" + (encodeURI(d.name)) + ")"
});
} else {
return d3.select(this).html(function(d) {
return "<i class='icon fa fa-4x fa-file" + (d.type != null ? '-' + d.type : '') + "-o'></i>";
});
}
});
enter_files.append('div').attr({
"class": 'filename'
}).html(function(d) {
return "<span>" + d.name + "</span>";
});
files.exit().remove();
files.order();
path_items = breadcrumb.selectAll('.path_item').data(open_folders, function(d) {
return d.id;
});
path_items.enter().append('div').attr({
"class": 'path_item'
}).html(function(d) {
return '<span>' + (d.name != null ? d.name : 'Home' + '</span>');
}).on('click', function(d) {
return cut_path(d);
});
return path_items.exit().remove();
};
redraw();
}).call(this);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Virtual Filesystem UI 2</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div id="bar">
<button id="up_btn"><i class="icon fa fa-level-up"></i></button>
<div id="breadcrumb"></div>
</div>
<div id="cwd"></div>
<script src="index.js"></script>
</body>
</html>
���� JFIF �� C !"$"$�� C�� � �" ��
�� � } !1AQa"q2���#B��R��$3br�
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������
�� � w !1AQaq"2�B���� #3R�br�
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������� ? �.�(��(��(����_t�x�|'m�_kZ��%�ɞ8��~J�3��=k�l� jj^6Ҵm;���o5�.���K��8w�
����A�i'wb�\a��>�&�p��y����a��5ݟ���M��Ћ��^����dm��k��6����-Ω�+�S^h����$�4�����X�f��N��<��y�3
PvZ�ԯ<C���a�ִ�yGT��5oȚ[}C�`��Ɲ3�#�����x����G�l,F��o5��D]>���˒3��&�!�O��B_C�
��F�eM6��1���W�W���V�Y�{�3�֔zW�x~o�e�<?)�%�/� ��v�l?��W_�:5ן����\��?]�B}���o|��
5��3R�C�(�7������4�J)�=���,��v�� �el���7�5������;�(�^.��FE�
(��
(��
(��
(��
) ����E Uj�����>�[i.f>��X���ל|c���p�
��(o)u���Yݴ�I��ǰȕ��J����-{�.�����u�7Ӽ���0�ݮ�E�8]���8ھ��V�C�m�����\�O0�6r�R�y��#�js�.?N��g�|��Y[6�P~df �ό��gqm���q�x;�K<����b;{h�'�EQ�EvЧ�՞>a��Z1��1���ߙ���h���T�2�jS��-ě�.\n��Ҹ/
��Ox�@�u�-$ݽռ%O�D1�VU쁶|ǖ�Ӛ�ҭ�~!x��\�*h�'��[lm�|�OD�=���[t�����{���S�,�����g<W��F0���<]m4�W�y���|G��,w�&�4�|���Fl�)����t� uk���Y��1�t�� -cl���~�ڤ���=�&$�/�c�Ƈˏ����O��SKg�����0��>_�h�2 �=��8ֱN� ǫ<�2ˡ�}.o[�D�F���������ԣP�eB?�����E����Z��w���ݫ27��V��k��]ϔQv���Ӧ���ex���1��e��8=������
�Rå�����8�pY���}9� _�?8� V��-��o ��}��͐N�=�F�#��%얖F;r~�p�L�OV��ʢ���:p�J�aO�t=w�O��bO_����A�� �ka1����$�t铂}+��Y�Jx�������YI�_�me�U���1'�7�u{ڼ��C����'��
u,�"GA+���A'��\��+�(|�v��M}b#�x� |�-�Q��BUélp¼�M�sc��(�R[�ߟ���tW
�/�_��/�<C#�Kn"�N�ܧ� #��3�F܊��(����x����T�5gv
�&���lo��cyot�pZU�?Ph��Q@K�S���i:u�Zl6�V���;��DF@ � � �����
kIxu��E���m"O<S^��Ox6>�b0�G���5]+�M4�H4{��Ž���VU=��z�㡬o�����
�D�A&|��c����&�,o�T��ޏo#�sG��okNO�
�}�m*MK����GS����R�����E��,��>�ͧ�����GAr�}�<
�"�}�%�̏�+�h�]���,6�gt�p����������������x�F��mc\T�F$�vE E뀣��tu��A�j7y�O��6�6��R�d>[A�ϖXr�e9����4� ���W�+V���80�-�1�1�5�j;�k��������ǥh_�^����$6�p�M��/%��$�ԒOz��⟌�o��,t�3Q�.X�Y��X�=ef8U�O�j�(x���M��N�[h�e?������*�����
�����2j��l�m�{�b��%�1?x��m�i���!x��<���VP��GVn|6�w���es�I���,���Ö��aϙw'��>~b�swc[_G��.82��J+�F*��w�_
����i����ŧkt�SʋՐ8Á�i$w��l��[���א�7������?�x�&�^.}Ϩ��T�T�;��U|!�N�� �Ԛ�<i��v�M�6S6� ��lI����x8 d�<��>��C��ۯ��������
��j�3=������k����%��x����ݷ����#��^Ծ|DX�Um��}+��V�$��7c�EX����8�zߊ�i%��<3��^!��I����H.Rh�<���\7��X��y��<+���Y��I:L�̪d]�c���.,�9��>��ltm6�W���u�G,�ȇc�g����RU!i�Q��a��n���{��X�X�������y
��� �O榾F����(ʒ��3}Ƹ+���N�g�}]����5��VHe2�\�ʬ?1_1����^����e�KtVS�1��F:���P���5�̰x���K%�����<s������7Iv�L63�13ǎ�x�zv��y��b8e�ε8GS�#�J7�*�Gּ��^���^+��8W��7`t�C�a��q�Z�>j����c�Gwk�Ak(l�".Nz/5υ�S䒳GvuA:X�.hI�?�?;���c_��n<9~�4�^�쳂p�ޏ�)}��ާ�>����k����5��.�Q�c�pRU� {���W���d�0�y�jwe�b�i���#��;�dz��M;K�嘇8:r��#-G<�m$�*(%��Z�=C�?ګ�w���y|<�d��<Q�����{����Q��5y��5�Gº�Zց)����Wʲc�OB~~�w'����=�琲H^2}��#�9�\� �,.|Q�+h�no���Pvƿ�#ʫ�?Oz��U՝�ϝ�"X���}O�j�xN�-�WA��l~�T�E�:n�i�[�ɵ� �?�U
?AEz��x��'⤳�|-<��iwhf�WEv�K�T]��
�I9ۂ+�<��e�%���E�Y�7�M�䊦a9��8�@;�b�{���~xw�
Օޫq�Y�Y��f��U�2rQ�+3�8���Z���
| �GI�������7�C>v� �q\��~מ�/
U�}�6���
j�LV��
@I�!��(�!��Q��
��@ :��� ���y⸷K�eIb�C��VR2#�#���-�G�[����p���c&�01�(�"����c�ZǓ��xo�w�%���n���r�p��c��C��6��n���;��c�g�<�A
���Q$6�Ɓc7���&