block by nitaku ce69c0cb655897b95daf

Virtual Filesystem UI 2

Full Screen

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.

index.js

// 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);

index.html

<!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>

chibi miku.jpg

����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�
(��
(��
(��
(��
)	����EUj�����>�[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$�vEE뀣��tu��A�j7y�O��6�6��R�d>[A�ϖXr�e9����4����W�+V���80�-�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���&u(���I/q^U�y���r*��[���&M�%L��?�_��o����P�|wKq-�$-p��q$��4�����>�+�5�Ě��ԝ��%�(�-s��zt!�|�:��R^Zr�u_h�D���kZ�E&:�@��6����~����?x���4e��4�s��4)<�b��g�1^3�B�V��?���;
:����T*��B�)=I���+��tO�oǚ��|o��1kPC���\���XAX�UV���`�W���FX�^��l�	*8%��we��b%�����l����k:t�d���um���wR;�]6����}�v���H$�u��q��o<?���K�<x4�+@�nV��DӮ��.W�\��PBu��Z�s����T���==6���/��V^��o�uޞ^�v����~�(?�c�(��Y���"�Z�T�V�Lӣ~~�h�ogO����N��v�oa5����
q '#y=3��I�'���e񝷏����x�>�s�&K=J�����/#�54&�;�LD���~9��o�����E&�-���d.͇$�:�+�o6�a�;K����e�ʖ���rr
��}	��|Y���׊��7��S}&�k�����.�"V�O'�~�:���.�iAo�DTF�G�d#�^�Z)=��u0�v�j�R;-U��EH�oz����G5��T`0�Ǎuv���;�<��pL>�?��G���6��4n�2�	RI8#��^ʲ��Z�g���&���I�k��El�%����O�^ꭨɯA��
�/�B���{�a���[���C��� ��^�i������‘#��\�>�cYUK�E�;0��j��]i�u��y5�\�a� "x�����\W컭�;�Z�����}Z�]¤�'�
��h�?��z�t(�!���˗��x;�6��gc���&[�1I�>�3�ʊ�����E���h3\_��7�58��+{k��9"����d,6�����
�[]�e���>��O��2��!��!82��b#}���xsã][��+Y��P����>��}��m�XKt_Bƿ���֖>���6x�fϢi��:�H���cc>ϔ���u=+��Q�?�줻��l.uۤ�q}wp��s�Ī>T���Ǔ�F���h7i�&az�y���v�=��(PX����$�q�8x�-�I�N���|_ѫ�xj���dx/���i|�{W�]����5;kX/,�ro�#���8bH!������?�-�>�N�\�྿�X�X��y6��X��fb\�pW}.nEϹ�a�EJ*�����EV��0�>�����}^���t���$��!������Er<�e#���7N+����|-��n�:����pV����?��z,��rQ՜�|8𮩡�جWֱڒ��WҲDG���~���5�T��GxcI��!�H��2��T�$v��l�Os�k<6����y<�d��~[�\w*�*��ð5�uk����,��sqr� ò��#-�rO�Q�s�e�͛ѥ:�T����Lx)��U�5���$0�=���;}�l~�ºv�`%�\������>��~ͺ��Dž/4M�o,o$�e�����O�r�u��U�"�%N��>��iW�����cƾ%Ӽ%����LJ��ȋ@%v8UPH>�5���:6�	�{5���T?j}X��@G�	o��~�?�
C�W��O�z��uCa�¸L�dʷ�c�=�r}�5�R���b{�vU�����"M+�g��9?hM4���Qs�����ѕ��S⍮�s
��oh֒��}l�o��(,���F3�y��χ���˔��~���۠��~�c��}I�����9�.��3���=T��2}NF��
iy����D�+Ƴ��\
��=�r�:���~���3��r�2�e#Ђ�D�]����폾����鿽$gio�
��*���t�F�����!�Q��fo̪�U:.u�՘��8|;�Ji��.x��ȴe�v�	�˱�ܻ���Z�$�0���E`p�z���I񪦟k�Y�?����N9F9B?�+��ws;�T�5�>䓁�W���#J�u>	*U�ԩJ�om�w�
-��[�/	��;^�D�C���v���>����>&Mk�u���-V�Җ- �
�s<��3���ʡ�
O�|�c-�wR\�q=��ݭ�8�k<lA`�s��2���8�������'�ClE6�����dg[x��C&>���J1s���M�d�����:f�e�]��Ժ��-=�@�+Tu�y@��@�.X��+�����
_I��Gm��_�.�ʹ5��ȼb2J�����Ƿ�v���B�6�4�3��, &I�ʠ���������+e��b��I��m����&\��rA�Y�=�~ng�Y�h�c.sԾX�6З]�W�w6w-j�{sii���ڇ���g�3�Z�P�q_7�˺���o��rb�=J�o-�z�l�}J:�	����kV�q����Š(��Š(��(�O���>���\�,��߳,žMĤG?�n��Y��zrxrԏ+L���\vl���O�'�����M&�v��yYǹ�3<_��
��0Չ��]�T��P����խ5�g&"~�a���ߌ�՞������s�Mmr��a�F�݉�x���A"L��*GO̓�ֿ�'�����2�W�b{Hf�#��^E����K"<����s���ڊ��VC�>zJOv}���xR�6*e��O	|����1��=�_[�C�zO��=m�h�"���pq�Fy�����+F֭�o 2�Z�
��C���]o�?x��������B�ȩ6�&L7D��ʿ`ß\�+eU��i�Tt#(Kk��~4�{�O���zyp�֖qnX��+��d�޽�š���
'N��1r��~W?zF=����
�|1�hg�׋�
v��^��m���E�y	0��n`;��W��A���9d����xE=�p��I��ȼ*�g�F�g���+{��a����r�|K��{��@��@4�0;H��y?1/�5��k:w��Ao���QZX.�v�K+F�@z��M|��^����4w���&�G�f$-!ݎ�}�R=�[,�s���~g��F�����S�|W��jX۫�'1�T<1��f�����k]���mi�����zq���ʟkm �^@�}��>�GY״�,�_2a�,�9o�Һ�M����Ѝ(��W�|9�n��xo÷W�N	���"���i���Gj3r���_j�-ԯ7$-!<b?�G��}�	x����^�fe�u�y,�;I�~��ҡ�N./����8�]?Ꮱ.�=Z����(�C��uX��t����S#�4�pҜ�N
�9bh~кy���L#���Z��vӧ�ݵ� ���g�X_l��.�U�#
���ua-��'7N��In�>t�|=�x�~��(�v��M��3����_k�C��|%m���3��F����pk�φZ��$�p��/l!�_i6��`ž.>�a�T�7�GEW!�Q@����<�S���)x�\��}G�Ӑ�����~�����X�k����.缜�RG?��?�]P/�-WY	����l�V_!}<�pG�WI�����8��a4�����]���G͞&����6>_���6��q{wpJ�����$p6����y�>x�I�,
B�y�-�`=ׯ�{�NO�tU��z�8p���4���%���Z}��3��c$
�6A��Ez����I.~+h���Ip��k�s�-/ ו�_Q�3�g���<-6�������K{�䄤�sJ���l�n2z����S�|5�]?Ş׮�沛����h�U*U�޻]AV#'w^��ߖ^�ҵ�M۪;o
-�����Yk�u��G�e�a�9`x9,!�\߈��xsD�՞������ew��%�<�bOv�i�V>0��m<Q��w�؁�����C(����aL�$My�ũ��!��e�K=�-"(��c�H�xʦG3ǘ�ԕK3ݎ&�,=�cJ���SP����xW��飁�8GU�l�2 �Q��5��?�~<�t��K���]�}��(����p��8=Et�6]g�w��/��.{�^f��5�%�	�b��� .3��N+ǝ��G����dV9!��o\�l�ֽ�zPKMO�;ZRn^�CcG�Y�������ܒ�+q+I��+�$(��8�������x?����V�X�)��9h�v_/z���&�{�mM
�&�u����+���k�,�D��7�11�A�k�.<[��t���x�S�l<q{�9��c�s�k��Y�(�h����)�2�V[�z#����}��h�t�t��n���976�
�����8����I'�5��/٧�0�b�^�gMh��gf�3-��KH�)�$�f0%v����~��7g�ž�;��y�
��]7��Mhϕkg���߇<Ei���"I��F�# �}x���ך�E�G�׼}s*��K==c���f�U�^�������d�y8�C���FJ֕'Q���L0���T��u��)<-ig�ui(ԯ�H���Tx���pLg�]��`�G�-���~�lF�/�
c|2������6�y1��Fs�s�:�Ki�k}F���$~u���>G�*��^����r���п���n|��r6_H�fH���:~�8��ׄx���Z��fF<��@=�q^��/�e�T�WLY�I�%��?�ɇ��Z�x\�ʪr���}1E��O�
(��
��4����
����B@�H�+������{m�k�V'�iե��->٠����h>�~y���S)@	>巟ƽQ`�b�xI�����ޠu?�����"NbO`��5곒��#�F��k�Q�b���Nj�%�����+��>����<χz������i�>����d��5���>4Ӌ}۫[�_A$%��j�6�i�i���̑��PA�-ć�ƃ�?�$�	����>�4��O��|{��Z>�c�}O]&*�GI6�݁�	��xSY�tK~��j��tc�V�c��@-Ո�0���J��ߊ5���W��_+n����">�$�uf'��~?x��Kᶡsl��/�`w����IAsH�x�^^�~g�_5�|k�6��ݙ�����[io��*�~"h6�Ym�!I�<��Ub�t���W�>����o�;�����Ēk��q��N<g���0�q�\ҹ�Ѧ�AAt<@�Kke,lk#$s\Z�7E0��a���#����?��M*�C��E���ӄ*m᷈G!Q�85��ʲ�ʷ�k�o��\����Dž���L�+k79>d9�����Ric����(�����c�=��X��4���^�X��{��v�[iv�~h��C�
���jK�k�kT�
�MJk{��>d��
_491��Wv;���g�b}]��-���x��k�o�����Ɣ��Ccٔ��UφˏY��XO�;^o�MP��@�P�f���{�S�5Z��ŨF��y���?�����.�G�9�EdxQm��5@�Uud���˅hO��
��h�!�����&Oɳ��y�)��%��Z�Nbu��e���R�����^L��zR�6w][�q��*	#aѕ�A��M^I��EPk���q�w��YAH����{yV� ?�»�^A�f�������i~��Xt�<Ѡ�qiJ<�H��O�Ҕ���k�y�]���$��^�;�|��
�ب�5���g�k��#�=<x��\_�
W��%��(4U�z��t`���YnP.�xf<��fS�	W�]񫤾8�m�����L3ʃ�ħ���5�U�������]�m��euh�0���2)�9G�dt�=+#������6����OZ�8n�����Z(��U��8
J�%e^���U%�Q�����:���9�
^�+Hg.p[���O�_���i�dt�Vs���{�\q�V'���g�s�TjR�7��,����8
	�G�y��,�⫄�֯4{�'�y%�3�	��������}�sEj�K���))�Z����Q�{z��`�}����T�\iwp��_�MA��;��L�e�ۺ9U�	3ղ89��@V,@P�xw'ڹlz�΃��}O�k-/�|E��Oد��!�d,�����O�
�km>�)��_P�K��gT�u�%����peo~wj�����]^���(�,����
�ӗǘ�-��3�28P
�bT��ԀsEyW���A���:�e��h��GN-���'v�����}O���H�¿k{�}/�J��'������ʿ��n�����N��ZKlťi��G�������*��ק���|�iS��]�����%�,���Ex]���>=4����\W��M�v���?E��~��B��y7���Z�Gߑ�Y����=���m�^��lgٓ��^����*��8�m�O�H���/���>��?����<?�x"�H���S^��V�>��Qz���?_ƻR}"���w�K�]=y���3O�;�[�{����)3�?W�גՙ��wI�QH�5���+�x�V�+='LE�L��c�ă����+�����jv�wr�K���hm�E�ҭ�kl���d8���n{��1�iu<��V��'�)���=4��k��cKմ
wP�u��K�7M�J�5t ��1RzeM}���|;ԣ��i�^�2��>m�Pn2����EG<�@�Ҹ@�I�I�m�Ȟ�;k��������T�U�aM���0!g�w't|������l��Miw
 ����Q$7*����g���+�t��m��Wp��kR?�8�2��:�>"x$�:������Wv�W�J|A�������m�v�̫�0p9&��J\��e����������"�4m����]���<���:u�����D�֧��Q��.ῶF�]$�%M��pr�^��?�ޟ��`��Sk�)�S�2��,��&6�W
r��z��1�ͥh���$���X�ȥYF�v�=(�2'��[�*���M�$����h��X�M������vk�վ%C�=5�����,/���W"a�r�-������_=�'��D�}�@.�I��XҦ�t�w9kZֻ�I{�_����c<�P?���U[�)-<�o��D����v$�~��jF�B�o/�Q���	u��v#���_��+�[(�_��^�[��R�����Вs��*y#��9�he~�^�.��KL������Hw\�HSi �V=���r��W��A�%�s���v��#��>'���������*��Ms���v���%������Y�]o|,��mɴ6�����c������]�+k�����u�d��Z���I��Y��CD�게���v����q"ƿEʡ�P��Q�ȗ3J�~T%T�����y8��chE#���Z�����v�����������!ώ������N-!9��s��g�N�j��}���$�lS�����>���-2�9lB��j���%f�Um��2X��#���>�m�oS��2�I��y͞�}	�f2�A^�^+�"J���x��u�_���X:����&}�zQ~AET���+�,l'���b��6�Wf�UPX�OA�k�~�}�
xĺ����ϧ��Kp�$�$�\�z.��C��YZ�zm֝}
�ku�<m�є�)��EIim
��V���8�tU~B�m()4�C�oګCk/h~)�1�GK� p%Bd���2��^��8��;Q��|��!�G�[���j�ڷ3D$����;�;�l�Á�bk��u8�Gਵ(�h��	!o��J��W��]�Y�r�&gC�j��|Ҽ���R�/��<Q���ޫ�[�I�4�ë�*��~U>�{��~�>�ƾ%M%|ȬaQ.�p�(����� z
��W�zm���c���v���Pă
�����e,��~�k����~
�����[�q5�����+
�Sb����"�u����%����-Tکi$�7V��",|��Z�.��|E����y	�������V�qY��Ԡ�y�Xk���gf�wj܇x��X�[n�{��)˟sأIQw��3�m�ĝ/K���]��z�.����$��O�͐�
�*{�7�xg�E��m���g�P��]�Q��$�kƼI�x���-ּ6ő�_�g�r�b�e�����y���y�
?�R-��<
U]<��m�۞��#	�ᖇ\�
�Ԃo��m���������|7�����h������gzd��w�_n�t�/|(�L�k9���i�o�_?0�8��<׹~�R�q�����ݴ��OS�W�~ԓ^�;�zo�,ll��֭�r6D�}�
��o�8��m�>��
�y��3d�.�~��ɦ������t����+m�Ԑ��������h��ş
�>��Ma��5�eIQn�^c�5�9��q^⿌� �B��-E�h�*�h��>䲲�=Ej~ž+�G�hY�?�s^��C�F$6��D6���>�f��w攮Z�e�(����+�k-d?�#����;�W*:�l���g��׽7�?J�|/־!�V�5_	����Z�RPg��!W�]�b��;���5�6�$ن"�7��$��5�k-�����:n���P��㢎V�>��τ�L_.�1�V���A�Z��|��Gϙ#ufq�O����K�4m3A�`�t�,lm�dPB�UG�'�'�zց�u�7s<>�r�y��5xu�iz�亷F#���2�C?
���Qï�7��cI�v�R=+ݴ�Q������٦j�&��|����b���Ҽ�0�oō/G���^���# �o �3�k�5����<
�f�
�vo�x#Q���xG�i%�~(������ʎ2�V��c�m������W��[��$���/�τcc�=c��p޸�)��W�Ib��6ތ�	F ��C�GК�~&x:�����oI�O���J�{Y��H�N�wRA�\p�II6{Ur�r����?���z��U�����?�{�x_�i��:��t=n�욝�ݩ��gnLL����#ܤv`:�+�+:�96��<\)F/t��(�6
(���T�z�e�w�u���C�����l�f��K���
K�%c�M{C5����KO41H�G����UBn�ƽև,�g���|��Ь��9����l��쁅Q��]eQI��٤b���3I�KE"��l���^=n4"�]�Yc�>F��C���ψ���m���~Lk�{���}y��	m�,X��V���}�N
��۔�25�O�>
�O���4�O��K�Yf���CwV�����٠��e�+�>�(�F2jO�/���o�����{�;,_��������d��WE��Ï������2�[�*��~b=��{b�6��������@p���^���_��l��O��V�b-�������b��џ����K��V�.P�۴��g�Y*�@,w)�0�v�E���x��>�u��i���M
��U�4 3/���<��@HR`R�@Q@gş]k~[�!�T�m�Kp@�Z�"C��=���d�(^I���HdO:Q�Z	��6G����U��21L��a�#��$���rI$թ�S'J.���D��(�5"��q�Z(��(��(��(��(��(��Q@EPm�E�QEQEQEQEQEQE��

index.coffee

# data

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 = (node) ->
  if node.index?
    return
  
  node.index = {}
  node.subfolders.forEach (sf) -> node.index[sf.name] = sf
  node.files.forEach (f) -> node.index[f.name] = f
  
  node.subfolders.sort (a,b) -> d3.ascending(a.name, b.name)
  node.files.sort (a,b) -> d3.ascending(a.name, b.name)
  
  node.subfolders.forEach (sf) ->
    index_n_sort(sf)
    
index_n_sort(root)

# status
  
open_folders = [root]

cd = (sf_name) ->
  open_folders.push open_folders[open_folders.length-1].index[sf_name]
  redraw()
  
cd__ = () ->
  if open_folders.length > 1
    open_folders.pop()
    redraw()
    
cut_path = (folder) ->
  if open_folders.length is 1 or open_folders[open_folders.length-1].id is folder.id
    redraw()
    return
  
  open_folders.pop()
  cut_path(folder)
  
# UI

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', () -> cd__()

redraw = () ->
  cwd_data = open_folders[open_folders.length-1]
  
  
  subfolders = subfolders_container.selectAll('.subfolder')
    .data(cwd_data.subfolders, (d) -> d.id )
    
  subfolders.enter().append('div')
    .attr
      class: 'subfolder node'
    .html (d) -> '<i class="icon fa fa-fw fa-folder"></i> '+d.name
    .on 'click', (d) -> cd d.name
    
  subfolders.exit().remove()
  
  subfolders.order()
  
  
  files = files_container.selectAll('.file')
    .data(cwd_data.files, (d) -> d.id )
    
  enter_files = files.enter().append('div')
    .attr
      class: 'file node'
    
  enter_previews = enter_files.append('div')
    .attr
      class: 'preview'
        
  enter_previews.each (d) ->
    if d.type is 'image'
      d3.select(this)
        .style
          'background-image': "url(#{encodeURI(d.name)})"
    else
      d3.select(this)
        .html (d) -> "<i class='icon fa fa-4x fa-file#{if d.type? then '-'+d.type else ''}-o'></i>"
    
  enter_files.append('div')
    .attr
      class: 'filename'
    .html (d) -> "<span>#{d.name}</span>"
    
  files.exit().remove()
  
  files.order()
  
  
  path_items = breadcrumb.selectAll('.path_item')
    .data(open_folders, (d) -> d.id )
    
  path_items.enter().append('div')
    .attr
      class: 'path_item'
    .html (d) -> '<span>' + if d.name? then d.name else 'Home' + '</span>'
    .on 'click', (d) -> cut_path(d)
    
  path_items.exit().remove()
  
  
redraw()

index.css

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 14px;
  color: #333;
  background: #DDD;
}

#cwd {
  padding: 4px;
}
#bar {
  padding: 6px;
  box-shadow: 0px 0px 6px #777;
  background: #EEE;
}
#bar > * {
  display: inline-block;
}
.path_item {
  display: inline-block;
  margin-right: 6px;
  cursor: pointer;
}
.path_item:not(:first-child)::before {
  content: '\f054';
  margin-right: 6px;
  font-family: 'FontAwesome';
  color: #999;
  font-size: 10px;
}
.path_item:hover > span {
  text-decoration: underline;
}

.node {
  margin: 4px;
  background: white;
}
.subfolder {
  padding: 6px;
}
.subfolder:hover {
  cursor: pointer;
  background: #FFF4DC;
}

#cwd .icon {
  color: #777;
}

.file {
  display: inline-block;
  width: 142px;
  height: 132px;
  text-align: center;
  vertical-align: text-top;
  position: relative;
}
.file .icon {
  margin-top: 16px;
}
.preview {
  width: 100%;
  background-size: 100%;
  height: 90px;
}
.filename {
  box-sizing: border-box;
  padding: 4px;
  background: #EEE;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 42px;
  line-height: 32px;
}
.filename > span {
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}