image_sizer.php 10.1 KB
<?php
    use yii\helpers\Html;

    $field_name = mb_strtolower($model->formName()) . "-" . $field;

    $id = $model->tableSchema->primaryKey[ 0 ];
?>
<div class="file-uploader-block">
    <?php if(!$multi): ?>
        <?= Html::activeHiddenInput($model, $field, [ 'id' => "$field_name" ]) ?>
    <input type="hidden" id="<?= $field ?>_old_img" name="ImageSizerForm[old_img]" value="<?= $model->$field ?>"/>
    <input type="hidden" id="<?= $field ?>_new_img" name="ImageSizerForm[new_img]" value=""/>
    <input type="hidden" id="<?= $field ?>_row_id" name="ImageSizerForm[new_img]" value="<?= $model->$id ?>"/>
        <div class="tst">
            <div id="<?= $field ?>_img_block" class="admin-avatar-pattern-wr">
                <div class="admin-avatar-pattern">
                    <?php
                        if($remover && $model->$field) {
                            ?>
                            <span id="<?= $field ?>_remove_img" class="remover_image" style="left:<?= $size[ 0 ][ 'width' ] ?>px"><img src="/images/delete-ico.png" alt=""></span>
                            <?php
                        }
                    ?>
                    <?= $model->$field ? Html::img($model->$field) : '' ?>
                </div>
            </div>
        </div>
        <span class="btn btn-success fileinput-button uploader-button">
<!--        <i class="glyphicon glyphicon-plus"></i>-->
        <span><?= $name ?></span>

            <?= Html::activeFileInput(new \common\models\ImageSizerForm(), 'file', [
                'id'       => $field,
                'data-url' => Yii::$app->getUrlManager()
                                       ->createUrl('file/uploader/download-photo'),
            ]); ?>
    </span>
        <script>
            $(
                function()
                {
                    $("#<?= $field?>").fileupload(
                        {
                            dataType : 'json', formData : {size : '<?= json_encode($size)?>'},
                            done : function(e, data)
                            {
                                if($("#<?=$field?>_buttons_block").length)
                                {
                                    $("#<?=$field?>_buttons_block").remove()
                                }

                                $("#<?= $field?>").parent().prev().find('.admin-ava-wr').remove()

                                var host = window.location.host.toString();
                                var img = '<div class="admin-ava-wr">' +
                                          <?php
                                          if($remover) {
                                              echo "'<span id=\"" . $field . "_remove_img\" class=\"remover_image\" style=\"left:{$size[0]['width']}px\"><img src=\"/images/delete-ico.png\" alt=\"\"></span>'+";
                                          }
                                          ?>
                                          '<img style="vertical-align: middle; width: <?=$width?>px; height: <?=$height?>px;" src="http://' + host + data.result.link + '"></div>' + '<div id="<?=$field?>_buttons_block">' + '<button type="button" id="<?=$field?>_save_img" class="btn btn-success img-action-buttons" >Сохранить</button>' + '<button type="button" id="<?=$field?>_remove_img" class="btn btn-danger img-action-buttons" >Отмена</button>' + '</div>';
                                var block = $("#<?= $field?>_img_block .admin-avatar-pattern");
                                block.find('img').remove();
                                block.append(img);
                                block.parents('.file-uploader-block').parent()
                                     .addClass('success_download');
                                $("#<?=$field_name?>").val(data.result.link).trigger('change');
                                $("#<?=$field?>_new_img").val(data.result.link);
                            }
                        }
                    );

                    $('body').on(
                        'click', '#<?=$field?>_save_img', function()
                        {
                            $("#<?= $field?>_img_block").parent().parent().parent()
                                                        .removeClass('success_download')

                            $("#<?=$field?>_buttons_block").remove();
                            var old_url = $('#<?=$field?>_old_img').val();
                            var new_url = $('#<?=$field?>_new_img').val();
                            var model = '<?=str_replace('\\', '-', $model::className());?>';
                            $.post(
                                "/file/uploader/delete-image", {
                                    new_url : new_url, old_img : old_url, model : model,
                                    field : "<?= $field?>", id : "<?=$model->$id?>", action : 'save'
                                }, function()
                                {
                                }
                            );
                            $("#<?=$field_name?>").val(new_url).trigger('change');
                        }
                    );

                    $('body').on(
                        'click', '#<?=$field?>_remove_img', function()
                        {
                            $("#<?= $field?>_img_block").parent().parent().parent()
                                                        .removeClass('success_download');
                            $("#<?= $field?>_img_block").parent().parent().find('.admin-ava-wr')
                                                        .remove();
                            if($(this).hasClass('remover_image')) {
                                $('#<?=$field?>_new_img').val('');
                            }
                            $("#<?=$field?>_buttons_block").remove();
                            var old_url = $('#<?=$field?>_old_img').val();
                            var new_url = $('#<?=$field?>_new_img').val();
                            $.post(
                                "/file/uploader/delete-image", {old_img : new_url}, function()
                                {
                                }
                            );
                            <?php
                            if($remover) {
                                echo "if(old_url.length<1 || new_url.length<1) {
                                    $(\"#$field_name\").val('');
                                    $('#{$field}_img_block').find('img').remove();
                                } else {
                                    $(\"#$field_name\").val(old_url).trigger('change');
                                    $('#{$field}_remove_img').append('<img src=\'/images/delete-ico.png\'>');
                                    $('#{$field}_img_block').find('.admin-avatar-pattern').append('<img src=\"'+old_url+'\">');
                                }";
                            } else {
                                echo "$(\"#$field_name\").val(old_url).trigger('change');
                        if(old_url.length<=1){
                            $('#{$field}_img_block').find('img').remove()
                        }
                        else {
                            $('#{$field}_img_block').find('img').attr('src',old_url);
                        }";
                            };
                            ?>
                        }
                    );
                }
            );
        </script>
    <?php else: ?>
        <span class="btn btn-success fileinput-button uploader-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span><?= $name ?></span>
            <?= Html::activeFileInput(new \common\models\ImageSizerForm(), 'file', [
                'id'       => $field,
                'data-url' => Yii::$app->getUrlManager()
                                       ->createUrl('file/uploader/download-photo'),
                'multiple' => 'multiple',
            ]); ?>
    </span>
    <?= Html::activeHiddenInput($model, $field, [ 'id' => "$field_name" ]) ?>
    <input type="hidden" name="ImageSizerForm[multi]" value="true"/>
        <div id="<?= $field ?>_img_block">
            <?php

                foreach($this->context->getGallery() as $image) {
                    echo $this->render('_gallery_item', [ 'item' => [ 'image' => $image ] ]);
                }
            ?>
        </div>
        <script>
            $(
                function()
                {

                    $("#<?= $field?>").fileupload(
                        {
                            dataType : 'json',
                            formData : {size : '<?= json_encode($size)?>', multi : 1},
                            done : function(e, data)
                            {
                                var img = data.result.view;
                                var block = $("#<?= $field?>_img_block");
                                block.append(img);
                                var gallery = $("#<?=$field_name?>");
                                gallery.val(gallery.val() + data.result.link + ',');
                            }
                        }
                    );
                    $('body').on(
                        'click', '.delete-gallery-item', function()
                        {
                            var url = $(this).data('url');
                            $(this).parent('.gallery_image').remove();
                            var gallery = $("#<?=$field_name?>");
                            var urls = gallery.val();
                            gallery.val(urls.replace(url + ',', ""));
                            $.post(
                                "/file/uploader/delete-image", {old_img : url}, function(data)
                                {
                                    $(".result").html(data);
                                }
                            );
                        }
                    )

                }
            )
        </script>
    <?php endif; ?>
</div>