path: root/data/assets/js/admin/tabs/files.js

jQuery(function($) {
  "use strict";

  var TEMPLATES = new LuigiTemplate.Cache({
    file: [
      "<a ",
        "href='#' ",
        "class='list-group-item' ",
        "data-type='%{type|h}' ",
        "data-name='%{name|h}' ",
        "data-size='%{size|h}' ",
        "data-path='%{path|h}' ",
        "data-url='%{url|h}' ",
        "title='%{name|h} (double-click to download).' ",
      ">",
        "<i class='fa fa-file-o'></i>",
        " ",
        "%{name|h}",
        " ",
        "(%{size|h} bytes)",
      "</a>",
    ],

    dir: [
      "<a ",
        "href='#' ",
        "class='list-group-item' ",
        "data-type='%{type|h}' ",
        "data-name='%{name|h}' ",
        "data-size='%{size|h}' ",
        "data-path='%{path|h}' ",
        "title='Folder \"%{name|h}\" (double-click to view contents).' ",
      ">",
        "<i class='fa fa-folder-o'></i>",
        " ",
        "%{name|h}",
      "</a>",
    ],

    no_files: [
      "<span class='list-group-item disabled'>",
        "<i class='fa fa-ban'></i>",
        " ",
        "No files.",
      "</span>",
    ],

    crumb: [
      "<div class='btn-group btn-group-sm'>",
        "<a ",
          "href='#' ",
          "class='crumb btn btn-default btn-sm' ",
          "data-path='%{path|h}' ",
        ">",
          "%{name|h}",
        "</a>",
      "</div><!-- btn-group -->",
    ],

    move_prompt: [
      "Enter destination path for \"%{name|h}\":",
    ],

    delete_confirm: [
      "Are you sure you want to delete \"%{name|h}\"?",
    ],

    sites: [
      "<div class='btn-group btn-group-sm'>",
        "<a ",
          "href='#' ",
          "class='btn btn-default' ",
          "title='Choose site.' ",
          "data-toggle='dropdown' ",
        ">",
          "Site: <span>%{name|h}</span>",
          " ",
          "<i class='fa fa-caret-down'></i>",
        "</a>",

        "<ul class='dropdown-menu'>",
          "%{body}",
        "</ul>",
      "</div><!-- btn-group -->",
    ],

    site: [
      "<li class='%{css|h}'>",
        "<a ",
          "href='#' ",
          "title='%{text|h}' ",
          "data-id='%{site_id|h}' ",
          "data-name='%{name|h}' ",
        ">",
          "%{name|h}",
        "</a>",
      "</li>",
    ],
  });

  function get_selected_site() {
    var site_id = $('#files').data('site_id');

    return $.grep(DATA.sites, function(row) {
      return site_id == row.site_id;
    })[0];
  }

  function make_site_dropdown() {
    var curr_site = get_selected_site();

    return TEMPLATES.run('sites', {
      name: curr_site.name,
      body: $.map(DATA.sites, function(row) {
        return TEMPLATES.run('site', $.extend({}, row, {
          css:  (row.site_id == curr_site.site_id) ? 'active' : '',
          text: 'Show files for this site.', // FIXME
        }));
      }).join(''),
    });
  }

  function get_crumbs(path) {
    var r = [];

    $.each(path.replace(/^\//, '').split(/\//), function(i, part) {
      if (part.length > 0)
        r.push('/' + r.concat([part]).join('/'));
    })

    // prepend root
    r.unshift('/');

    return r;
  }

  var NO_FILES = TEMPLATES.run('no_files');

  function reload() {
    var btns = $('#files-reload, #files-crumbs .btn'),
        list = $('#files');

    // show loading
    btns.toggleClass('disabled').find('.loading').toggleClass('hidden');
    // list.html(TEMPLATES.run('loading'));

    send('file/list', {
      site_id:  $('#files').data('site_id'),
      path:     $('#files').data('path'),
    }).always(function() {
      btns.toggleClass('disabled').find('.loading').toggleClass('hidden');
      // list.html('');
    }).fail(function(r) {
      gripe(r, 'list files');
    }).done(function(r) {
      // disable action buttons
      $('#file-actions li').addClass('disabled');

      // draw crumbs
      var crumbs = get_crumbs($('#files').data('path'));
      $('#files-crumbs').html([
        make_site_dropdown()
      ].concat($.map(crumbs, function(crumb) {
        return TEMPLATES.run('crumb', {
          path: crumb,
          name: crumb.replace(/^.*\/(.+)/, '$1'),
        });
      })).join(''));

      // draw files
      $('#files').html((r.length > 0) ? $.map(r, function(row) {
        return TEMPLATES.run(row.type, row);
      }).join('') : NO_FILES);

      // update file count
      $('#files-count').text(r.length);
    });

    // stop event
    return false;
  }

  $('#files').on('dblclick', 'a.list-group-item', function() {
    var data = $(this).data();

    if (data.type == 'dir') {
      // load directory
      $('#files').data('path', data.path);
      reload();
    } else {
      // select and download file
      $(this).click();
      $('#file-actions a[data-id="download"]').click();
    }

    // stop event
    return false;
  }).on('click', 'a.list-group-item', function() {
    var data = $(this).data();

    // disable file actions
    $('#file-actions li').removeClass('disabled');

    // update highlight
    $('#files .active').removeClass('active');
    $(this).addClass('active');

    // stop event
    return false;
  });

  $('#files-crumbs').on('click', 'a.crumb', function() {
    $('#files').data('path', $(this).data('path'));
    reload();

    // stop event
    return false;
  });

  $('#files-crumbs').on('click', 'ul.dropdown-menu a', function() {
    var data = $(this).data(),
        ul = $(this).parents('ul');

    // hide dropdown
    $('body').trigger('click');

    // refresh selection
    ul.find('li.active').removeClass('active');
    $(this).parent('li').addClass('active');

    // update button text
    ul.prev('a').find('span').text(data.name);

    // save site id and path
    $('#files').data({
      site_id:  data.id,
      path:     '/',
    });

    // reload file list
    reload();

    // stop event
    return false;
  });

  $('#file-actions').on('click', 'a', function() {
    var action_id = $(this).data('id'),
        data = $('#files .active').data();

    // hide dropdown
    $('body').trigger('click');

    if (data) {
      if (action_id == 'download') {
        if (data.url)
          location.href = data.url;
      } else if (action_id == 'move') {
        var dst_path = prompt(TEMPLATES.run('move_prompt', data), data.path);
        if (dst_path) {
          send('file/move', {
            site_id:  $('#files').data('site_id'),
            src_path: data.path,
            dst_path: dst_path,
          }).always(function() {
            // TODO: need loading handler
          }).fail(function(r) {
            gripe(r, 'move file');
          }).done(function() {
            // reload file list
            reload();
          });
        }
      } else if (action_id == 'delete') {
        if (confirm(TEMPLATES.run('delete_confirm', data))) {
          send('file/delete', {
            site_id:  $('#files').data('site_id'),
            path:     data.path,
          }).always(function() {
            // TODO: need loading handler
          }).fail(function(r) {
            gripe(r, 'delete file');
          }).done(function() {
            // reload file list
            reload();
          });
        }
      }
    }

    // stop event
    return false;
  });

  $('#files-upload').click(function() {
    alert('TODO: upload');

    // stop event
    return false;
  });

  $('#files-mkdir').click(function() {
    var me = $(this),
        path = prompt('Name of new folder:', 'New Folder');

    if (!path || !path.match(/\S/))
      return false;

    if (path.match(/\//)) {
      alert("Error: Folder name cannot contain '/' characters");
      return false;
    }

    // disable button, show spinner
    me.toggleClass('disabled').find('.loading').toggleClass('hidden');

    send('file/mkdir', {
      site_id:  $('#files').data('site_id'),
      path:     ($('#files').data('path') + '/' +  path).replace(/\/\/+/, '/')
    }).always(function() {
      // enable button, hide spinner
      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
    }).fail(function(r) {
      gripe(r, 'create folder');
    }).done(function(r) {
      // reload file list
      reload();
    });

    // stop event
    return false;
  });

  // set defaults
  $('#files').data({
    path:     '/',
    site_id:  DATA.default_site_id,
  });

  $('#files-reload').click(reload);

  // load users
  $('#admin-tab-files').on('show.bs.tab', function() {
    reload();
  });
});