diff --git a/addons/default/visiosoft/media-field_type/resources/css/imgList.css b/addons/default/visiosoft/media-field_type/resources/css/imgList.css index 9c8049c68..f58362254 100644 --- a/addons/default/visiosoft/media-field_type/resources/css/imgList.css +++ b/addons/default/visiosoft/media-field_type/resources/css/imgList.css @@ -1,9 +1,11 @@ -.ads-responsive-image { - width: 152px; -} + .ads-box-image { padding: 5px; } + +.ads-responsive-image { + height: 100px!important; +} .ads-box-image:hover { padding: 5px; transform: scale(1.1); @@ -15,7 +17,7 @@ .main-image { background-color: #5cb85c; height: 25px; - width: 25px; + width: 40px; color: #fff; position: absolute; z-index: 15; @@ -23,16 +25,13 @@ top: 0px; } #setimage { - margin: -3px; - padding: 0px 10px; + padding: 9px 10px; + color: white; border-radius: 0px; + font-weight: bold; } /*Mobil Modu*/ @media only screen and (max-width: 600px) { - .ads-responsive-image { - width: 80%; - height: 20vh; - } .ads-box-image { padding: 5px; margin: 10px; @@ -44,10 +43,6 @@ /*Tablet Modu*/ @media only screen and (max-width: 767px) and (min-width: 601px) { - .ads-responsive-image { - width: 50%; - height: 20vh; - } #setimage { width: 17%; } diff --git a/addons/default/visiosoft/media-field_type/resources/js/upload.js b/addons/default/visiosoft/media-field_type/resources/js/upload.js index 5901cd910..54a22f4fa 100644 --- a/addons/default/visiosoft/media-field_type/resources/js/upload.js +++ b/addons/default/visiosoft/media-field_type/resources/js/upload.js @@ -2,9 +2,9 @@ Dropzone.autoDiscover = false; $("div#myDrop").dropzone({url: "/file/post"}); +var uploaded = $('input[name="files"]').val().split(',').map(Number); $(function () { - var uploaded = []; var uploader = $('#upload'); var element = $('.dropzone'); @@ -78,6 +78,8 @@ $(function () { file.previewElement.querySelector('[data-dz-uploadprogress]').setAttribute('class', 'progress progress-success'); setTimeout(function () { + + addAppendByData(uploaded[0]) file.previewElement.remove(); }, 500); }); @@ -95,48 +97,40 @@ function addAppendByData(data_id) { return $('a[data-id=' + data_id + ']').parent().parent().append('
'); } -$('.panel-table').on('click', '[data-dismiss="file"]', function (e) { - var arr = $('input[name="files"]').val().split(','); - arr.splice(arr.indexOf(String($(this).data('file'))), 1); - $('.panel-table').load( - REQUEST_ROOT_PATH + '/streams/media-field_type/selected?uploaded=' + arr.join(','), - function () { - $('input[name="files"]').val(arr.join(',')) - } - ); -}); +function deleteImage(id) { + var key_item = $.inArray(id, uploaded); + uploaded.splice(key_item, 1); + $('input[name="files"]').val(uploaded.join(',')) + $('.imageList').find('div[data-id="' + id + '"]').remove() +} -$('a[data-action="rotate-image"]').click(function () { - var event = $(this).parent('div').parent('div').find('img'); - var img = event.attr('src'); +function rotateImage(id) { + var img = $('.ads-box-image[data-id="' + id + '"]').find('img') + var img_url = img.attr('src'); $.ajax({ type: 'get', dataType: "json", - data: {img_url: img}, + data: {img_url: img_url}, url: '/image/rotate', success: function (response) { if (response.status == "success") { - hideLoader() - var newURL = updateQueryStringParameter(img, 't', Math.floor(Math.random() * 100000000)); - event.attr('src', newURL); + var newURL = updateQueryStringParameter(img_url, 't', Math.floor(Math.random() * 100000000)); + img.attr('src', newURL); } - }, - beforeSend: function () { - showLoader() } }); -}); +} //Set Main İmage function setMain(id) { - var imageList = $('[name="files"]').val().split(','); - $('.image-eye-' + imageList[0]).remove(); - if (imageList.length != 1) { - imageList.splice($.inArray(id, imageList), 1); - $('[name="files"]').val(id + ',' + imageList.join(',')); - } + $('.image-eye-' + uploaded[0]).remove(); + var key_item = $.inArray(id, uploaded); + uploaded.splice(key_item, 1); + uploaded.unshift(id); + $('input[name="files"]').val(uploaded.join(',')) + addAppendByData(id); } diff --git a/addons/default/visiosoft/media-field_type/resources/views/table/partials/body.twig b/addons/default/visiosoft/media-field_type/resources/views/table/partials/body.twig index 17445cf98..28e133dee 100644 --- a/addons/default/visiosoft/media-field_type/resources/views/table/partials/body.twig +++ b/addons/default/visiosoft/media-field_type/resources/views/table/partials/body.twig @@ -1,16 +1,17 @@ {{ asset_add("styles.css", "visiosoft.field_type.media::css/imgList.css") }} {{ asset_add('scripts.js', 'visiosoft.field_type.media::js/input.js') }} -
- {% for row in table.rows %} -
-
- - - -
- {{ buttons(row.buttons)|raw }} -
-
-
- {% endfor %} -
\ No newline at end of file +
+ {% for row in table.rows %} +
+
+ + + +
+ {{ buttons(row.buttons)|raw }} +
+
+
+ {% endfor %} +
\ No newline at end of file diff --git a/addons/default/visiosoft/media-field_type/src/Table/ValueTableBuilder.php b/addons/default/visiosoft/media-field_type/src/Table/ValueTableBuilder.php index 6c4ff96a8..3140f40c2 100644 --- a/addons/default/visiosoft/media-field_type/src/Table/ValueTableBuilder.php +++ b/addons/default/visiosoft/media-field_type/src/Table/ValueTableBuilder.php @@ -52,31 +52,37 @@ class ValueTableBuilder extends TableBuilder * @var array */ protected $buttons = [ - 'window' => [ + 'window' => [ 'text' => 'visiosoft.field_type.media::button.showOn', 'icon' => 'fa fa-eye', 'type' => 'success', 'data-id' => 'entry.id', + 'class' => 'col-4', 'attributes' => [ 'id' => 'setimage', 'onclick' => 'setMain({entry.id})' ], ], - 'rotate' => [ - 'target' => '_blank', + 'rotate' => [ + 'target' => '_blank', 'icon' => 'fas fa-redo', 'type' => 'info', 'text' => '', + 'class' => 'col-4', 'attributes' => [ 'id' => 'setimage', - 'data-action' => 'rotate-image', +// 'data-action' => 'rotate-image', + 'onclick' => 'rotateImage({entry.id})', ], ], - 'remove' => [ - 'data-dismiss' => 'file', - 'data-file' => 'entry.id', + 'deleteImage' => [ + 'target' => '_blank', + 'icon' => 'fas fa-trash', + 'type' => 'danger', 'text' => '', + 'class' => 'col-4 deleteImage', 'attributes' => [ + 'onclick' => 'deleteImage({entry.id})', 'id' => 'setimage', ], ], @@ -88,10 +94,10 @@ class ValueTableBuilder extends TableBuilder * @var array */ protected $options = [ - 'limit' => 9999, - 'show_headers' => false, - 'sortable_headers' => false, - 'table_view' => 'visiosoft.field_type.media::table/table', + 'limit' => 9999, + 'show_headers' => false, + 'sortable_headers' => false, + 'table_view' => 'visiosoft.field_type.media::table/table', 'no_results_message' => 'visiosoft.field_type.media::message.no_files_selected', ]; @@ -156,7 +162,7 @@ class ValueTableBuilder extends TableBuilder /** * Set the field type. * - * @param MediaFieldType $fieldType + * @param MediaFieldType $fieldType * @return $this */ public function setFieldType(MediaFieldType $fieldType) @@ -192,7 +198,7 @@ class ValueTableBuilder extends TableBuilder /** * Set the table entries. * - * @param \Illuminate\Support\Collection $entries + * @param \Illuminate\Support\Collection $entries * @return $this */ public function setTableEntries(\Illuminate\Support\Collection $entries)