related to #1614 replacing selectize in photo editor for related categories

This commit is contained in:
Matthieu Leproux
2022-03-08 16:56:31 +01:00
committed by Matthieu Leproux
parent 34fe0fc36f
commit 66bd06176c
9 changed files with 454 additions and 17 deletions
@@ -49,6 +49,14 @@ str_are_you_sure = '{'Are you sure?'|translate}';
str_yes = '{'Yes, delete'|translate}';
str_no = '{'No, I have changed my mind'|translate|@escape:'javascript'}';
url_delete = '{$U_DELETE}';
str_albums_found = '{"<b>%d</b> albums found"|translate}';
str_album_found = '{"<b>1</b> album found"|translate}';
str_result_limit = '{"<b>%d+</b> albums found, try to refine the search"|translate|escape:javascript}';
str_orphan = '{'This photo is an orphan'|@translate}';
str_no_search_in_progress = '{'No search in progress'|@translate}';
related_categories_ids = {$related_categories_ids|@json_encode};
str_already_in_related_cats = '{'This albums is already in related categories list'|translate}';
{literal}
$('#action-delete-picture').on('click', function() {
@@ -84,6 +92,9 @@ $('#action-delete-picture').on('click', function() {
}());
{/footer_script}
{combine_script id='picture_modify' load='footer' path='admin/themes/default/js/picture_modify.js'}
{combine_css path="admin/themes/default/fontello/css/animation.css" order=10} {* order 10 is required, see issue 1080 *}
<form action="{$F_ACTION}" method="post" id="pictureModify">
<div id='picture-preview'>
<div class='picture-preview-actions'>
@@ -154,11 +165,24 @@ $('#action-delete-picture').on('click', function() {
</p>
<p>
<strong>{'Linked albums'|@translate}</strong>
<strong>{'Linked albums'|@translate} <span class="linked-albums-badge {if $related_categories|@count < 1 } badge-red {/if}"> {$related_categories|@count} </span></strong>
{if $related_categories|@count < 1}
<span class="orphan-photo">{'This photo is an orphan'|@translate}</span>
{else}
<span class="orphan-photo"></span>
{/if}
<br>
<select data-selectize="categories" data-value="{$associated_albums|@json_encode|escape:html}"
placeholder="{'Type in a search term'|translate}"
data-default="{$STORAGE_ALBUM}" name="associate[]" multiple style="width:calc(100% + 2px);"></select>
<select class="invisible-related-categories-select" name="associate[]" multiple>
{foreach from=$related_categories item=$cat_path key=$key}
<option selected value="{$key}"></option>
{/foreach}
</select>
<div class="related-categories-container">
{foreach from=$related_categories item=$cat_path key=$key}
<div class="breadcrumb-item"><span class="link-path">{$cat_path}</span><span id={$key} class="icon-cancel-circled remove-item"></span></div>
{/foreach}
</div>
<div class="breadcrumb-item linked-albums add-item {if $related_categories|@count < 1 } highlight {/if}"><span class="icon-plus-circled"></span>{'Add'|translate}</div>
</p>
<p>
@@ -200,6 +224,31 @@ $('#action-delete-picture').on('click', function() {
</form>
<div id="addLinkedAlbum" class="linkedAlbumPopIn">
<div class="linkedAlbumPopInContainer">
<a class="icon-cancel ClosePopIn"></a>
<div class="AddIconContainer">
<span class="AddIcon icon-blue icon-plus-circled"></span>
</div>
<div class="AddIconTitle">
<span>{'Associate to album'|@translate}</span>
</div>
<div id="linkedAlbumSearch">
<span class='icon-search search-icon'> </span>
<span class="icon-cancel search-cancel-linked-album"></span>
<input class='search-input' type='text' placeholder='{'Search'|@translate}'>
</div>
<div class="limitReached"></div>
<div class="noSearch"></div>
<div class="searching icon-spin6 animate-spin"> </div>
<div id="searchResult">
</div>
</div>
</div>
<style>
.selectize-input .item,
.selectize-input .item.active {