{% extends "_layouts/element" %} {% import "_includes/forms" as forms %} {% set redirectUrl = (crumbs|last).url %} {% set canUpdateSource = canEdit %} {% set saveSourceAction = 'assets/save-asset' %} {% set deleteSourceAction = 'assets/delete-asset' %} {% hook "cp.assets.edit" %} {% block actionButton %}
{% if assetUrl %} {{ 'View'|t('app') }} {% endif %}
{% if canReplaceFile %} {% endif %} {{ parent() }} {% endblock %} {% block content %} {{ parent() }} {# Give plugins a chance to add other things here #} {% hook 'cp.assets.edit.content' %} {% endblock %} {% block details %} {{ previewHtml|raw }} {{ parent() }} {# Give plugins a chance to add other things here #} {% hook "cp.assets.edit.details" %} {% endblock %} {% block settings %} {{ forms.textField({ label: 'Filename'|t('app'), id: 'filename', name: 'filename', value: element.filename, errors: element.getErrors('newLocation'), }) }} {# Give plugins a chance to add other things here #} {% hook "cp.assets.edit.settings" %} {% endblock %} {% block meta %}
{{ 'Location'|t('app') }}
{{ volume.name|t('site') }} {% if element.folderPath %} → {{ element.folderPath|trim('/')|replace('/', ' → ') }} {% endif %}
{% if formattedSize %}
{{ 'File size'|t('app') }}
{{ tag('div', { id: 'file-size-value', class: 'value', text: formattedSize, title: formattedSizeInBytes, aria: { label: formattedSizeInBytes, }, }) }}
{% endif %} {% set uploader = element.getUploader() %} {% if uploader %}
{{ 'Uploaded by'|t('app') }}
{% include '_elements/element' with { element: uploader, } %}
{% js %} new Craft.ElementThumbLoader().load($('#uploader-element')); {% endjs %}
{% endif %} {% if dimensions %}
{{ 'Dimensions'|t('app') }}
{{ dimensions }}
{% endif %} {{ parent() }} {# Give plugins a chance to add other things here #} {% hook "cp.assets.edit.meta" %} {% endblock %} {% js on ready %} var assetId = {{ element.id|json_encode|raw }}; var $previewThumbContainer = $('#details .preview-thumb-container'); function updatePreviewThumb() { $previewThumbContainer.addClass('loading'); Craft.postActionRequest('assets/preview-thumb', { assetId: assetId, width: 350, height: 190 }, function(response, textStatus) { $previewThumbContainer.removeClass('loading'); if (textStatus === 'success') { $previewThumbContainer.find('img').replaceWith(response.img); } }); } $('#download-btn').on('click', function() { var $form = Craft.createForm().appendTo(Garnish.$bod); $(Craft.getCsrfInput()).appendTo($form); $('', { type: 'hidden', name: 'action', value: 'assets/download-asset' }).appendTo($form); $('', { type: 'hidden', name: 'assetId', value: assetId }).appendTo($form); $('', { type: 'submit', value: 'Submit', }).appendTo($form); $form.submit(); $form.remove(); }); $('#replace-btn').on('click', function() { var $fileInput = $('') .appendTo(Garnish.$bod); var uploader = new Craft.Uploader($fileInput, { url: Craft.getActionUrl('assets/replace-file'), dropZone: null, fileInput: $fileInput, paramName: 'replaceFile', events: { fileuploadstart: function() { $previewThumbContainer.addClass('loading'); console.log('okay'); }, fileuploaddone: function(event, data) { if (data.result.error) { $previewThumbContainer.removeClass('loading'); alert(data.result.error); } else { $('#filename').val(data.result.filename); $('#file-size-value') .text(data.result.formattedSize) .attr('title', data.result.formattedSizeInBytes); var $dimensionsVal = $('#dimensions-value'); if (data.result.dimensions) { if (!$dimensionsVal.length) { $('
' + '
' + {{ 'Dimensions'|t('app')|json_encode|raw }} + '
' + '
' + '
').appendTo($('#meta-details')); $dimensionsVal = $('#dimensions-value'); } $dimensionsVal.text(data.result.dimensions); } else if ($dimensionsVal.length) { $dimensionsVal.parent().remove(); } updatePreviewThumb(); Craft.cp.runQueue(); } } } }); uploader.setParams({ assetId: assetId }); $fileInput.click(); }); $('#edit-btn').on('click', function() { new Craft.AssetImageEditor(assetId, { onSave: function () { updatePreviewThumb(); }, allowDegreeFractions: Craft.isImagick }); }); var settings = {}; {% if dimensions %} {% set previewDimensions = dimensions|split('×') %} settings.startingWidth = {{ previewDimensions[0] }}; settings.startingHeight = {{ previewDimensions[1] }}; {% endif %} $('#preview-btn').on('click', function() { new Craft.PreviewFileModal(assetId, null, settings); }); {% endjs %}