Merge pull request #260 from openclassify/vedatakdogan

update media field type
This commit is contained in:
Fatih Alp 2020-01-30 08:54:43 +03:00 committed by GitHub
commit f48303686a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 65 additions and 69 deletions

View File

@ -1,9 +1,11 @@
.ads-responsive-image {
width: 152px;
}
.ads-box-image { .ads-box-image {
padding: 5px; padding: 5px;
} }
.ads-responsive-image {
height: 100px!important;
}
.ads-box-image:hover { .ads-box-image:hover {
padding: 5px; padding: 5px;
transform: scale(1.1); transform: scale(1.1);
@ -15,7 +17,7 @@
.main-image { .main-image {
background-color: #5cb85c; background-color: #5cb85c;
height: 25px; height: 25px;
width: 25px; width: 40px;
color: #fff; color: #fff;
position: absolute; position: absolute;
z-index: 15; z-index: 15;
@ -23,16 +25,13 @@
top: 0px; top: 0px;
} }
#setimage { #setimage {
margin: -3px; padding: 9px 10px;
padding: 0px 10px; color: white;
border-radius: 0px; border-radius: 0px;
font-weight: bold;
} }
/*Mobil Modu*/ /*Mobil Modu*/
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.ads-responsive-image {
width: 80%;
height: 20vh;
}
.ads-box-image { .ads-box-image {
padding: 5px; padding: 5px;
margin: 10px; margin: 10px;
@ -44,10 +43,6 @@
/*Tablet Modu*/ /*Tablet Modu*/
@media only screen and (max-width: 767px) and (min-width: 601px) { @media only screen and (max-width: 767px) and (min-width: 601px) {
.ads-responsive-image {
width: 50%;
height: 20vh;
}
#setimage { #setimage {
width: 17%; width: 17%;
} }

View File

@ -2,9 +2,9 @@
Dropzone.autoDiscover = false; Dropzone.autoDiscover = false;
$("div#myDrop").dropzone({url: "/file/post"}); $("div#myDrop").dropzone({url: "/file/post"});
var uploaded = $('input[name="files"]').val().split(',').map(Number);
$(function () { $(function () {
var uploaded = [];
var uploader = $('#upload'); var uploader = $('#upload');
var element = $('.dropzone'); var element = $('.dropzone');
@ -78,6 +78,8 @@ $(function () {
file.previewElement.querySelector('[data-dz-uploadprogress]').setAttribute('class', 'progress progress-success'); file.previewElement.querySelector('[data-dz-uploadprogress]').setAttribute('class', 'progress progress-success');
setTimeout(function () { setTimeout(function () {
addAppendByData(uploaded[0])
file.previewElement.remove(); file.previewElement.remove();
}, 500); }, 500);
}); });
@ -95,48 +97,40 @@ function addAppendByData(data_id) {
return $('a[data-id=' + data_id + ']').parent().parent().append('<div class="main-image image-eye-' + data_id + '"><i class="fa fa-eye "></i></div>'); return $('a[data-id=' + data_id + ']').parent().parent().append('<div class="main-image image-eye-' + data_id + '"><i class="fa fa-eye "></i></div>');
} }
$('.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 () { function rotateImage(id) {
var event = $(this).parent('div').parent('div').find('img'); var img = $('.ads-box-image[data-id="' + id + '"]').find('img')
var img = event.attr('src'); var img_url = img.attr('src');
$.ajax({ $.ajax({
type: 'get', type: 'get',
dataType: "json", dataType: "json",
data: {img_url: img}, data: {img_url: img_url},
url: '/image/rotate', url: '/image/rotate',
success: function (response) { success: function (response) {
if (response.status == "success") { if (response.status == "success") {
hideLoader() var newURL = updateQueryStringParameter(img_url, 't', Math.floor(Math.random() * 100000000));
var newURL = updateQueryStringParameter(img, 't', Math.floor(Math.random() * 100000000)); img.attr('src', newURL);
event.attr('src', newURL);
} }
},
beforeSend: function () {
showLoader()
} }
}); });
}); }
//Set Main İmage //Set Main İmage
function setMain(id) { function setMain(id) {
var imageList = $('[name="files"]').val().split(','); $('.image-eye-' + uploaded[0]).remove();
$('.image-eye-' + imageList[0]).remove(); var key_item = $.inArray(id, uploaded);
if (imageList.length != 1) { uploaded.splice(key_item, 1);
imageList.splice($.inArray(id, imageList), 1); uploaded.unshift(id);
$('[name="files"]').val(id + ',' + imageList.join(',')); $('input[name="files"]').val(uploaded.join(','))
}
addAppendByData(id); addAppendByData(id);
} }

View File

@ -1,16 +1,17 @@
{{ asset_add("styles.css", "visiosoft.field_type.media::css/imgList.css") }} {{ asset_add("styles.css", "visiosoft.field_type.media::css/imgList.css") }}
{{ asset_add('scripts.js', 'visiosoft.field_type.media::js/input.js') }} {{ asset_add('scripts.js', 'visiosoft.field_type.media::js/input.js') }}
<div class="row"> <div class="row imageList">
{% for row in table.rows %} {% for row in table.rows %}
<div class="col-xs-12 col-sm-3 ads-box-image"> <div class="col-12 col-sm-3 ads-box-image" data-id="{{ row.key }}">
<div class="card text-center"> <div class="card text-center">
<a class="img-card"> <a class="img-card">
<img class="ads-responsive-image" height="114px" src="{{ url('files/' ~ row.columns.0.value) }}" alt="" /> <img class="ads-responsive-image img-thumbnail" src="{{ url('files/' ~ row.columns.0.value) }}"
</a> alt=""/>
<div class="card-read-more text-center"> </a>
{{ buttons(row.buttons)|raw }} <div class="card-read-more text-center row">
</div> {{ buttons(row.buttons)|raw }}
</div> </div>
</div> </div>
{% endfor %} </div>
</div> {% endfor %}
</div>

View File

@ -52,31 +52,37 @@ class ValueTableBuilder extends TableBuilder
* @var array * @var array
*/ */
protected $buttons = [ protected $buttons = [
'window' => [ 'window' => [
'text' => 'visiosoft.field_type.media::button.showOn', 'text' => 'visiosoft.field_type.media::button.showOn',
'icon' => 'fa fa-eye', 'icon' => 'fa fa-eye',
'type' => 'success', 'type' => 'success',
'data-id' => 'entry.id', 'data-id' => 'entry.id',
'class' => 'col-4',
'attributes' => [ 'attributes' => [
'id' => 'setimage', 'id' => 'setimage',
'onclick' => 'setMain({entry.id})' 'onclick' => 'setMain({entry.id})'
], ],
], ],
'rotate' => [ 'rotate' => [
'target' => '_blank', 'target' => '_blank',
'icon' => 'fas fa-redo', 'icon' => 'fas fa-redo',
'type' => 'info', 'type' => 'info',
'text' => '', 'text' => '',
'class' => 'col-4',
'attributes' => [ 'attributes' => [
'id' => 'setimage', 'id' => 'setimage',
'data-action' => 'rotate-image', // 'data-action' => 'rotate-image',
'onclick' => 'rotateImage({entry.id})',
], ],
], ],
'remove' => [ 'deleteImage' => [
'data-dismiss' => 'file', 'target' => '_blank',
'data-file' => 'entry.id', 'icon' => 'fas fa-trash',
'type' => 'danger',
'text' => '', 'text' => '',
'class' => 'col-4 deleteImage',
'attributes' => [ 'attributes' => [
'onclick' => 'deleteImage({entry.id})',
'id' => 'setimage', 'id' => 'setimage',
], ],
], ],
@ -88,10 +94,10 @@ class ValueTableBuilder extends TableBuilder
* @var array * @var array
*/ */
protected $options = [ protected $options = [
'limit' => 9999, 'limit' => 9999,
'show_headers' => false, 'show_headers' => false,
'sortable_headers' => false, 'sortable_headers' => false,
'table_view' => 'visiosoft.field_type.media::table/table', 'table_view' => 'visiosoft.field_type.media::table/table',
'no_results_message' => 'visiosoft.field_type.media::message.no_files_selected', 'no_results_message' => 'visiosoft.field_type.media::message.no_files_selected',
]; ];
@ -156,7 +162,7 @@ class ValueTableBuilder extends TableBuilder
/** /**
* Set the field type. * Set the field type.
* *
* @param MediaFieldType $fieldType * @param MediaFieldType $fieldType
* @return $this * @return $this
*/ */
public function setFieldType(MediaFieldType $fieldType) public function setFieldType(MediaFieldType $fieldType)
@ -192,7 +198,7 @@ class ValueTableBuilder extends TableBuilder
/** /**
* Set the table entries. * Set the table entries.
* *
* @param \Illuminate\Support\Collection $entries * @param \Illuminate\Support\Collection $entries
* @return $this * @return $this
*/ */
public function setTableEntries(\Illuminate\Support\Collection $entries) public function setTableEntries(\Illuminate\Support\Collection $entries)