silverstripe-dms/javascript/DMSDocumentAddExistingField.js

(function ($) {
  "use strict";

  $.entwine('ss', function ($) {
    $('.document-add-existing').entwine({
      adddocument: function (document_id) {
        var documentSetId = $(this).closest('form').find('input[name="DSID"]').val();

        jQuery.ajax(
          'admin/pages/adddocument/linkdocument?dsid=' + documentSetId + '&documentID=' + document_id,
          {
            dataType: 'json',
            success: function (data, textstatus) {
              var fn = window.tmpl.cache['ss-uploadfield-addtemplate'];
              var fnout = fn({
                files: [data],
                formatFileSize: function (bytes) {
                  if (typeof bytes !== 'number') {
                    return '';
                  }
                  if (bytes >= 1000000000) {
                    return (bytes / 1000000000).toFixed(2) + ' GB'
                  }
                  if (bytes >= 1000000) {
                    return (bytes / 1000000).toFixed(2) + ' MB';
                  }
                  return (bytes / 1000).toFixed(2) + ' KB';
                }
              });

              $('.ss-add-files').append(fnout);
            }
          }
        );
      },
      selectdocument: function (documentID, documentName) {
        if (typeof(documentID) !== "undefined") {
          // Substitute the ID for the full document name, if no name is present
          if (typeof(documentName) === "undefined") {
            documentName = documentID;
          }
          $('.ss-add-files').html('<div class="selected-document" data-document-id="'+documentID+'">'+documentName+'</div>');
        } else {
          $('.ss-add-files').html('');
        }
      }
    });

    $('.document-add-existing .document-autocomplete').entwine({
      onmatch: function () {
        var self = this;
        this.autocomplete({
          source: 'admin/pages/adddocument/documentautocomplete',
          select: function (event, ui) {
            if (ui.item) {
              if (self.closest('.document-add-existing').hasClass('link-editor-context')) {
                $(this).closest('.document-add-existing').selectdocument(ui.item.value, ui.item.label);
              } else {
                $(this).closest('.document-add-existing').adddocument(ui.item.value);
              }

              $(this).val('');

              return false;
            }
          }
        });
      }
    });

    // Add label to tree drop down button
    $('.document-add-existing .treedropdownfield-toggle-panel-link').entwine({
      onmatch: function () {
        this.prepend('<span>Browse by page</span>');
      }
    });

    $('.document-add-existing .TreeDropdownField').entwine({
      onpanelshow: function () {
        $(this).closest('.document-add-existing').find('input.document-autocomplete').prop('disabled', true);
      },
      onpanelhide: function () {
        $(this)
          .closest('.document-add-existing')
          .find('input.document-autocomplete')
          .prop('disabled', $(this).closest('.document-add-existing').find('.document-list:visible').length > 0);
      }
    });

    $('.document-add-existing input[name=PageSelector]').entwine({
      onchange: function (event) {
        var doclist = $(this).closest('.document-add-existing').find('.document-list');
        doclist.html('<p>Loading...</p>');
        doclist.show();
        doclist.load(
          'admin/pages/adddocument/documentlist?pageID=' + $(this).val()
        );
      }
    });

    $('.document-add-existing a.add-document').entwine({
      onclick: function (event) {
        var document_id = this.data('document-id');
        var dae = this.closest('.document-add-existing');

        if (dae.hasClass('link-editor-context')) {
          dae.selectdocument(document_id, this.text());
        } else {
          dae.adddocument(document_id);
        }

        $(this).closest('.document-list').hide();
        $(this).closest('.document-add-existing').find('input.document-autocomplete').prop('disabled', false);

        return false;
      }
    });

    $('body').entwine({
      onclick: function (event) {
        $('.document-list:visible')
          .hide()
          .closest('.document-add-existing')
          .find('input.document-autocomplete')
          .prop('disabled', false);
      }
    });

    $('.document-add-existing .treedropdownfield-toggle-panel-link').entwine({
      onclick: function (event) {
        $('.document-list:visible').hide();
      }
    });
  });
}(jQuery));