}
}]);
+ 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 {
// 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
$(this).closest('.overlay').fadeOut(240);
});
+ $('.overlay').click(function(event) {
+ if (!$(event.target).hasClass('overlay')) return;
+ $(this).fadeOut(240);
+ });
+
});
// Page specific items
},
file_browser_callback: function (field_name, url, type, win) {
- // 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");
- }
+ 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);
+ });
+ }
+
+ 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 = '<a href="' + image.url + '" target="_blank">';
+ html += '<img src="' + image.thumbs.display + '" alt="' + image.name + '">';
+ html += '</a>';
+ win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
+ });
+ }
- // Replace the actively selected content with the linked image
- var html = '<a href="' + image.url + '" target="_blank">';
- html += '<img src="' + image.thumbs.display + '" alt="' + image.name + '">';
- html += '</a>';
- win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
- });
},
paste_preprocess: function (plugin, args) {
var content = args.content;
}
}
+.button[disabled] {
+ background-color: #BBB;
+ cursor: default;
+ &:hover {
+ background-color: #BBB;
+ cursor: default;
+ box-shadow: none;
+ }
+}
+
}
}
-.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;
}
<div class="book entity-list-item" data-entity-type="book" data-entity-id="{{$book->id}}">
- <h3 class="text-book"><a class="text-book" href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></h3>
+ <h3 class="text-book"><a class="text-book entity-list-item-link" href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i><span class="entity-list-item-name">{{$book->name}}</span></a></h3>
@if(isset($book->searchSnippet))
<p class="text-muted">{!! $book->searchSnippet !!}</p>
@else
</a>
<span class="text-muted"> » </span>
@endif
- <a href="{{ $chapter->getUrl() }}" class="text-chapter">
- <i class="zmdi zmdi-collection-bookmark"></i>{{ $chapter->name }}
+ <a href="{{ $chapter->getUrl() }}" class="text-chapter entity-list-item-link">
+ <i class="zmdi zmdi-collection-bookmark"></i><span class="entity-list-item-name">{{ $chapter->name }}</span>
</a>
</h3>
@if(isset($chapter->searchSnippet))
@include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
<div id="entity-selector-wrap">
- <div class="overlay">
+ <div class="overlay" entity-link-selector>
<div class="popup-body small flex-child">
<div class="popup-header primary-background">
<div class="popup-title">Entity Select</div>
- <button class="popup-close neg button">x</button>
+ <button type="button" class="corner-button neg button">x</button>
</div>
@include('partials/entity-selector', ['name' => 'entity-selector'])
+ <div class="popup-footer">
+ <button type="button" disabled="true" class="button entity-link-selector-confirm pos corner-button">Select</button>
+ </div>
</div>
</div>
</div>
+ <script>
+ (function() {
+
+ })();
+ </script>
+
@stop
\ No newline at end of file
<div class="page {{$page->draft ? 'draft' : ''}} entity-list-item" data-entity-type="page" data-entity-id="{{$page->id}}">
<h3>
- <a href="{{ $page->getUrl() }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ $page->name }}</a>
+ <a href="{{ $page->getUrl() }}" class="text-page entity-list-item-link"><i class="zmdi zmdi-file-text"></i><span class="entity-list-item-name">{{ $page->name }}</span></a>
</h3>
@if(isset($page->searchSnippet))
projects / bookstack / commitdiff