Статьи помеченные algorithm
Как отсортировать картинки мышкой
Сортировка строк мышкой
Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием."
Речь о расширении yii2-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.
На тот момент этой функциональности не было. Собирался я долго. Наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).
Как подключить кеширование
Ускорение работы сайта с помощью кеширования
Содержание конкретной страницы, как правило, требует предварительной подготовки. Например, в посте присутствует сразу текст на русском и на английском языке. В этом случае нужна предварительная обработка, чтобы на экране отображался только текст на текущем языке.
Если текст поста меняется редко, желательно выполнять работу по подготовке страниц в "первый" просмотр и затем выводить уже готовые страницы.
Пример загрузки контента без перезагрузки страницы
Динамическая загрузка контента
Блог - это лента из заголовков статей и нескольких строчек из них. Пусть так и останется, когда посетитель решит прочитать содержимое выбранной статьи. То есть вся лента останется и добавится контент выбранной статьи.
Как сделать галерею фотографий "До и После"
Показ фотографий до и после момента времени
Представьте, что вы продаете курс похудания. Вам нужно наглядно представить результат вашего курса. Фото "До" и "После", что может быть лучшей иллюстрацией?
Как и в предыдущем примере примем, что участников ограниченное количество. Например 4. Забудем про похудающих - слишком скучно. Будем "работать" с кинозвездами. Для каждого можно загрузить только 4 фотографии. Таким образом всего 16 фото. Если загружены все 16 и кому-то захочется добавить "свои" фото, то придется что-то удалить. Демо.
Делаем демо для загрузки фото
Загрузка жестко определенного количества файлов
Чтобы показать, как работает загрузка изображений, нужно разрешить загружать изображения на свой сайт. Но, в этом случае, дисковое пространство может быть быстро исчерпано и нужно как-то удалять оставленный посетителями "мусор".
Обычно загруженные файлы удаляются автоматически спустя время, но можно ограничить количество файлов - демо.
Как работает аутентификация OAuth2
OAuth2 аутентификация на примере Google
Если у вас есть аккаунт в Google, то вы наверняка пользовались документами. Например, электронными таблицами.
Доступ к таблицам разрешен только вам и тем, кому вы предоставите такое право. Причем доступ возможен не только из Google.
Можно просматривать список таблиц и редактировать выбранную таблицу оставаясь в рамках своего приложения. Примерно так - http://sample.vorst.ru/googl
Как устроена структура данных Nested Set
Как сделать рубрикатор
Рубрикатор, как средство поиска интересных статей, имеет свои недостатки - трудно придумать иерархию, названия рубрик, трудно потом решить к какой конкретно рубрике относится статья. "Но, так принято" - скажите вы и будете правы.
Цепочки статей в блоге
Можно ли сделать блог удобнее?
Для группировки статей существует возможность помечать статьи метками или прикреплять к наперед заданной рубрике. Кроме того, в конце статьи есть навигация - предыдущая, следующая статья, ну и меню конечно. Вроде все удобно.
Поиск
Метки
- 1. Делаем демо для загрузки фото
- 2. Как сделать галерею фотографий "До и После"
- 3. Как добавить атрибут к загруженному файлу
- 4. Как отсортировать картинки мышкой
Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через 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
при вызове виджета.
Оставьте комментарий
Только зарегистрированные пользователи могут оставлять комментарии. Пожалуйста войдите или пройдите регистрацию.
Можно авторизоваться, используя социальную сеть-
-
-