vorst.ru - Статьи о задачах возникающих при создании сайта и их решении
Статьи помеченные algorithm

Как отсортировать картинки мышкой

Сортировка строк мышкой

Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием."

Речь о расширении yii2-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.

На тот момент этой функциональности не было. Собирался я долго. Наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).


Как подключить кеширование

Ускорение работы сайта с помощью кеширования

Содержание конкретной страницы, как правило, требует предварительной подготовки. Например, в посте присутствует сразу текст на русском и на английском языке. В этом случае нужна предварительная обработка, чтобы на экране отображался только текст на текущем языке.

Если текст поста меняется редко, желательно выполнять работу по подготовке страниц в "первый" просмотр и затем выводить уже готовые страницы.


Пример загрузки контента без перезагрузки страницы

Динамическая загрузка контента

Блог - это лента из заголовков статей и нескольких строчек из них. Пусть так и останется, когда посетитель решит прочитать содержимое выбранной статьи. То есть вся лента останется и добавится контент выбранной статьи.


Как работает аутентификация OAuth2

OAuth2 аутентификация на примере Google

Если у вас есть аккаунт в Google, то вы наверняка пользовались документами. Например, электронными таблицами.

Доступ к таблицам разрешен только вам и тем, кому вы предоставите такое право. Причем доступ возможен не только из Google.

Можно просматривать список таблиц и редактировать выбранную таблицу оставаясь в рамках своего приложения. Примерно так - http://sample.vorst.ru/googl


Как устроена структура данных Nested Set

Как сделать рубрикатор

Рубрикатор, как средство поиска интересных статей, имеет свои недостатки - трудно придумать иерархию, названия рубрик, трудно потом решить к какой конкретно рубрике относится статья. "Но, так принято" - скажите вы и будете правы.


Цепочки статей в блоге

Можно ли сделать блог удобнее?

Для группировки статей существует возможность помечать статьи метками или прикреплять к наперед заданной рубрике. Кроме того, в конце статьи есть навигация - предыдущая, следующая статья, ну и меню конечно. Вроде все удобно.



Поиск



Как отсортировать картинки мышкой

Сортировка строк мышкой

Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием."

Речь о расширении yii2-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.

На тот момент этой функциональности не было. Собирался я долго. Наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).


    Поделиться

Пусть таблица, это список строк загруженных файлов. Каждая строчка в таблице имеет ID.

В начале перетаскивания (кнопка мыши только нажата) необходимо считать по порядку ID всех строк. Когда перетаскивание закончилось (кнопка отпущена), нужно опять собрать по порядку ID всех строк.

Если порядок идентичный - перемещение строк не состоялось. Иначе нужно зафиксировать новый порядок строк.

Таков нехитрый алгоритм. Реализация с помощью jquery ui тоже не сложная.

$( function() {
    var before, after;
    function getRowsIds() {
        // get rows by .table selector
        var rows = $('#files-div .table li'), a = []; i = 0;
        $.each(rows, function(index, row) {
            // id is "row-123"
            a[i++] = row.id.substr(4);
        });
        return JSON.stringify(a);
    }
    $( "#sortable" ).sortable({
        revert: true,
        start: function( event, ui ) {before = getRowsIds()},
        update: function( event, ui ) {
            after = getRowsIds();
            if(before != after) {
                // save new order
                $.ajax({
                    method: "POST",
                    url: "controller/swap",
                    data: {ids: after},
                    success: function(id, status, xhr) {}
                });
            }
        }
    });
    $( "#draggable" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
});

Осталось определить в контроллере действие, записывающее новый порядок по ajax-запросу.

В расширении yii2-uploader информация обо всех загруженных файлах хранится в одной таблице OneFile. Поэтому действие очень короткое.

public function actionSwap()
{
    if(Yii::$app->request->isAjax)
    {
        $ids = json_decode(Yii::$app->request->post('ids'));
        $time = time(); $j = 0;
        for($i = 0; $i < count($ids); $i++) {
            $model = OneFile::findOne($ids[$i]);
            // rows will be sorted by time
            $model->created_at = $time + $i;
            if($model->save()) $j++;
        }
        echo $j;
    }
}

Сортировка строк будет выполняться по полю created_at. Соответственно, при выборе всех файлов, принадлежащих модели, нужно добавить сортировку. Например для модели Post.

public function getFiles()
{
    return $this->hasMany(OneFile::className(), ['parent_id' => 'id'])
        ->where('model=:model', [':model' => 'common\models\Post'])
        ->orderBy('created_at');
}

Новый порядок строк сохраняется при каждом перетаскивании. Значит меняются местами только две строки и ID остальных строк можно не передавать на сервер. Как? Вы можете посмотреть на gitHub.

Заключение

Собственно это только анонс нового свойства модуля загрузки фото и вообще файлов. Возможность сортировать строки перетаскиванием по умолчанию отключена и нужно не забыть установить флаг draggable при вызове виджета.

Оставьте комментарий

Только зарегистрированные пользователи могут оставлять комментарии. Пожалуйста войдите или пройдите регистрацию.