diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js index fc7b88259..94e281512 100644 --- a/resources/assets/js/directives.js +++ b/resources/assets/js/directives.js @@ -600,6 +600,58 @@ module.exports = function (ngApp, events) { } }]); + ngApp.directive('entityLinkSelector', [function($http) { + return { + restict: 'A', + link: function(scope, element, attrs) { + + const selectButton = element.find('.entity-link-selector-confirm'); + let callback = false; + let entitySelection = null; + + // Handle entity selection change, Stores the selected entity locally + function entitySelectionChange(entity) { + entitySelection = entity; + if (entity === null) { + selectButton.attr('disabled', 'true'); + } else { + selectButton.removeAttr('disabled'); + } + } + events.listen('entity-select-change', entitySelectionChange); + + // Handle selection confirm button click + selectButton.click(event => { + hide(); + if (entitySelection !== null) callback(entitySelection); + }); + + // Show selector interface + function show() { + element.fadeIn(240); + } + + // Hide selector interface + function hide() { + element.fadeOut(240); + } + + // Listen to confirmation of entity selections (doubleclick) + events.listen('entity-select-confirm', entity => { + hide(); + callback(entity); + }); + + // Show entity selector, Accessible globally, and store the callback + window.showEntityLinkSelector = function(passedCallback) { + show(); + callback = passedCallback; + }; + + } + }; + }]); + ngApp.directive('entitySelector', ['$http', '$sce', function ($http, $sce) { return { @@ -613,26 +665,60 @@ module.exports = function (ngApp, events) { // Add input for forms const input = element.find('[entity-selector-input]').first(); + // Detect double click events + var lastClick = 0; + function isDoubleClick() { + let now = Date.now(); + let answer = now - lastClick < 300; + lastClick = now; + return answer; + } + // Listen to entity item clicks element.on('click', '.entity-list a', function(event) { event.preventDefault(); event.stopPropagation(); let item = $(this).closest('[data-entity-type]'); - itemSelect(item); + itemSelect(item, isDoubleClick()); }); element.on('click', '[data-entity-type]', function(event) { - itemSelect($(this)); + itemSelect($(this), isDoubleClick()); }); // Select entity action - function itemSelect(item) { + function itemSelect(item, doubleClick) { let entityType = item.attr('data-entity-type'); let entityId = item.attr('data-entity-id'); - let isSelected = !item.hasClass('selected'); + let isSelected = !item.hasClass('selected') || doubleClick; element.find('.selected').removeClass('selected').removeClass('primary-background'); if (isSelected) item.addClass('selected').addClass('primary-background'); let newVal = isSelected ? `${entityType}:${entityId}` : ''; input.val(newVal); + + if (!isSelected) { + events.emit('entity-select-change', null); + } + + if (!doubleClick && !isSelected) return; + + let link = item.find('.entity-list-item-link').attr('href'); + let name = item.find('.entity-list-item-name').text(); + + if (doubleClick) { + events.emit('entity-select-confirm', { + id: Number(entityId), + name: name, + link: link + }); + } + + if (isSelected) { + events.emit('entity-select-change', { + id: Number(entityId), + name: name, + link: link + }); + } } // Get search url with correct types diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js index cc868a0ea..eb2750965 100644 --- a/resources/assets/js/global.js +++ b/resources/assets/js/global.js @@ -135,6 +135,11 @@ $(function () { $(this).closest('.overlay').fadeOut(240); }); + $('.overlay').click(function(event) { + if (!$(event.target).hasClass('overlay')) return; + $(this).fadeOut(240); + }); + }); // Page specific items diff --git a/resources/assets/js/pages/page-form.js b/resources/assets/js/pages/page-form.js index b733494fa..d8f298959 100644 --- a/resources/assets/js/pages/page-form.js +++ b/resources/assets/js/pages/page-form.js @@ -96,26 +96,37 @@ var mceOptions = module.exports = { }, file_browser_callback: function (field_name, url, type, win) { - // Show image manager - window.ImageManager.showExternal(function (image) { + if (type === 'file') { + window.showEntityLinkSelector(function(entity) { + var originalField = win.document.getElementById(field_name); + originalField.value = entity.link; + $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name); + }); + } - // Set popover link input to image url then fire change event - // to ensure the new value sticks - win.document.getElementById(field_name).value = image.url; - if ("createEvent" in document) { - var evt = document.createEvent("HTMLEvents"); - evt.initEvent("change", false, true); - win.document.getElementById(field_name).dispatchEvent(evt); - } else { - win.document.getElementById(field_name).fireEvent("onchange"); - } + if (type === 'image') { + // Show image manager + window.ImageManager.showExternal(function (image) { + + // Set popover link input to image url then fire change event + // to ensure the new value sticks + win.document.getElementById(field_name).value = image.url; + if ("createEvent" in document) { + var evt = document.createEvent("HTMLEvents"); + evt.initEvent("change", false, true); + win.document.getElementById(field_name).dispatchEvent(evt); + } else { + win.document.getElementById(field_name).fireEvent("onchange"); + } + + // Replace the actively selected content with the linked image + var html = ''; + html += '' + image.name + ''; + html += ''; + win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html); + }); + } - // Replace the actively selected content with the linked image - var html = ''; - html += '' + image.name + ''; - html += ''; - win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html); - }); }, paste_preprocess: function (plugin, args) { var content = args.content; diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss index 5bdb0cf28..5de889673 100644 --- a/resources/assets/sass/_buttons.scss +++ b/resources/assets/sass/_buttons.scss @@ -100,3 +100,13 @@ $button-border-radius: 2px; } } +.button[disabled] { + background-color: #BBB; + cursor: default; + &:hover { + background-color: #BBB; + cursor: default; + box-shadow: none; + } +} + diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss index a41277e6f..544001261 100644 --- a/resources/assets/sass/_components.scss +++ b/resources/assets/sass/_components.scss @@ -39,25 +39,28 @@ } } -.popup-header { +.corner-button { + position: absolute; + top: 0; + right: 0; + margin: 0; + height: 40px; + border-radius: 0; + box-shadow: none; +} + +.popup-header, .popup-footer { display: block; position: relative; height: 40px; - .popup-close { - position: absolute; - top: 0; - right: 0; - margin: 0; - height: 40px; - border-radius: 0; - box-shadow: none; - } .popup-title { color: #FFF; padding: 8px $-m; } } - +#entity-selector-wrap .popup-body .form-group { + margin: 0; +} .image-manager-body { min-height: 60vh; } diff --git a/resources/views/books/list-item.blade.php b/resources/views/books/list-item.blade.php index 945eb9015..2eefdfbf5 100644 --- a/resources/views/books/list-item.blade.php +++ b/resources/views/books/list-item.blade.php @@ -1,5 +1,5 @@
-

{{$book->name}}

+

{{$book->name}}

@if(isset($book->searchSnippet))

{!! $book->searchSnippet !!}

@else diff --git a/resources/views/chapters/list-item.blade.php b/resources/views/chapters/list-item.blade.php index 3677851df..35d3a7589 100644 --- a/resources/views/chapters/list-item.blade.php +++ b/resources/views/chapters/list-item.blade.php @@ -6,8 +6,8 @@   »   @endif - - {{ $chapter->name }} + + {{ $chapter->name }} @if(isset($chapter->searchSnippet)) diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php index f470d8d80..ad569a327 100644 --- a/resources/views/pages/edit.blade.php +++ b/resources/views/pages/edit.blade.php @@ -22,15 +22,24 @@ @include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
-
+
Entity Select
- +
@include('partials/entity-selector', ['name' => 'entity-selector']) +
+ +
+ + @stop \ No newline at end of file diff --git a/resources/views/pages/list-item.blade.php b/resources/views/pages/list-item.blade.php index a95870db0..98243f6fa 100644 --- a/resources/views/pages/list-item.blade.php +++ b/resources/views/pages/list-item.blade.php @@ -1,6 +1,6 @@

- {{ $page->name }} + {{ $page->name }}

@if(isset($page->searchSnippet))