diff --git a/modules/lightning_features/lightning_media/config/install/embed.button.media_library.yml b/modules/lightning_features/lightning_media/config/install/embed.button.media_library.yml new file mode 100644 index 000000000..b253ef53e --- /dev/null +++ b/modules/lightning_features/lightning_media/config/install/embed.button.media_library.yml @@ -0,0 +1,9 @@ +langcode: en +status: true +dependencies: + module: + - lightning_media +label: 'Media Library' +id: media_library +type_id: media_library +type_settings: {} diff --git a/modules/lightning_features/lightning_media/config/install/views.view.media_library.yml b/modules/lightning_features/lightning_media/config/install/views.view.media_library.yml new file mode 100644 index 000000000..fb75801d1 --- /dev/null +++ b/modules/lightning_features/lightning_media/config/install/views.view.media_library.yml @@ -0,0 +1,346 @@ +langcode: en +status: true +dependencies: + module: + - image + - media_entity + - rest + - user +id: media_library +label: 'Media Library' +module: views +description: '' +tag: '' +base_table: media_field_data +base_field: mid +core: 8.x +display: + default: + display_plugin: default + id: default + display_title: Master + position: 0 + display_options: + access: + type: perm + options: + perm: 'access content' + provider: user + perm: 'access content' + cache: + type: tag + options: { } + query: + type: views_query + options: + disable_sql_rewrite: false + distinct: false + replica: false + query_comment: '' + query_tags: { } + exposed_form: + type: basic + options: + submit_button: Apply + reset_button: false + reset_button_label: Reset + exposed_sorts_label: 'Sort by' + expose_sort_order: true + sort_asc_label: Asc + sort_desc_label: Desc + pager: + type: full + options: + items_per_page: 10 + offset: 0 + id: 0 + total_pages: null + expose: + items_per_page: false + items_per_page_label: 'Items per page' + items_per_page_options: '5, 10, 25, 50' + items_per_page_options_all: false + items_per_page_options_all_label: '- All -' + offset: false + offset_label: Offset + tags: + previous: '‹ Previous' + next: 'Next ›' + first: '« First' + last: 'Last »' + quantity: 9 + style: + type: default + options: + grouping: { } + row_class: '' + default_row_class: true + uses_fields: false + row: + type: fields + options: + inline: { } + separator: '' + hide_empty: false + default_field_elements: true + fields: + thumbnail__target_id: + id: thumbnail__target_id + table: media_field_data + field: thumbnail__target_id + relationship: none + group_type: group + admin_label: '' + label: '' + exclude: false + alter: + alter_text: false + text: '' + make_link: false + path: '' + absolute: false + external: false + replace_spaces: false + path_case: none + trim_whitespace: false + alt: '' + rel: '' + link_class: '' + prefix: '' + suffix: '' + target: '' + nl2br: false + max_length: 0 + word_boundary: true + ellipsis: true + more_link: false + more_link_text: '' + more_link_path: '' + strip_tags: false + trim: false + preserve_tags: '' + html: false + element_type: '' + element_class: '' + element_label_type: '' + element_label_class: '' + element_label_colon: false + element_wrapper_type: '' + element_wrapper_class: '' + element_default_classes: true + empty: '' + hide_empty: false + empty_zero: false + hide_alter_empty: true + click_sort_column: target_id + type: image + settings: + image_style: media_library + image_link: '' + group_column: '' + group_columns: { } + group_rows: true + delta_limit: 0 + delta_offset: 0 + delta_reversed: false + delta_first_last: false + multi_type: separator + separator: ', ' + field_api_classes: false + entity_type: media + entity_field: thumbnail + plugin_id: field + mid: + id: mid + table: media + field: mid + relationship: none + group_type: group + admin_label: '' + label: '' + exclude: false + alter: + alter_text: false + text: '' + make_link: false + path: '' + absolute: false + external: false + replace_spaces: false + path_case: none + trim_whitespace: false + alt: '' + rel: '' + link_class: '' + prefix: '' + suffix: '' + target: '' + nl2br: false + max_length: 0 + word_boundary: true + ellipsis: true + more_link: false + more_link_text: '' + more_link_path: '' + strip_tags: false + trim: false + preserve_tags: '' + html: false + element_type: '' + element_class: '' + element_label_type: '' + element_label_class: '' + element_label_colon: false + element_wrapper_type: '' + element_wrapper_class: '' + element_default_classes: true + empty: '' + hide_empty: false + empty_zero: false + hide_alter_empty: true + click_sort_column: value + type: number_integer + settings: + thousand_separator: '' + prefix_suffix: true + group_column: value + group_columns: { } + group_rows: true + delta_limit: 0 + delta_offset: 0 + delta_reversed: false + delta_first_last: false + multi_type: separator + separator: ', ' + field_api_classes: false + entity_type: media + entity_field: mid + plugin_id: field + uuid: + id: uuid + table: media + field: uuid + relationship: none + group_type: group + admin_label: '' + label: '' + exclude: false + alter: + alter_text: false + text: '' + make_link: false + path: '' + absolute: false + external: false + replace_spaces: false + path_case: none + trim_whitespace: false + alt: '' + rel: '' + link_class: '' + prefix: '' + suffix: '' + target: '' + nl2br: false + max_length: 0 + word_boundary: true + ellipsis: true + more_link: false + more_link_text: '' + more_link_path: '' + strip_tags: false + trim: false + preserve_tags: '' + html: false + element_type: '' + element_class: '' + element_label_type: '' + element_label_class: '' + element_label_colon: false + element_wrapper_type: '' + element_wrapper_class: '' + element_default_classes: true + empty: '' + hide_empty: false + empty_zero: false + hide_alter_empty: true + click_sort_column: value + type: string + settings: + link_to_entity: false + group_column: value + group_columns: { } + group_rows: true + delta_limit: 0 + delta_offset: 0 + delta_reversed: false + delta_first_last: false + multi_type: separator + separator: ', ' + field_api_classes: false + entity_type: media + entity_field: uuid + plugin_id: field + filters: + status: + value: true + table: media_field_data + field: status + provider: media + id: status + expose: + operator: '' + group: 1 + sorts: + created: + id: created + table: media_field_data + field: created + order: DESC + entity_type: media + entity_field: created + plugin_id: date + relationship: none + group_type: group + admin_label: '' + exposed: false + expose: + label: '' + granularity: second + header: { } + footer: { } + empty: { } + relationships: { } + arguments: { } + display_extenders: { } + cache_metadata: + max-age: -1 + contexts: + - 'languages:language_content' + - 'languages:language_interface' + - url.query_args + - user.permissions + tags: { } + json: + display_plugin: rest_export + id: json + display_title: 'REST export' + position: 1 + display_options: + display_extenders: { } + path: media-library + row: + type: data_field + options: + field_options: + name: + alias: '' + raw_output: false + cache_metadata: + max-age: -1 + contexts: + - 'languages:language_content' + - 'languages:language_interface' + - request_format + - user.permissions + tags: { } diff --git a/modules/lightning_features/lightning_media/images/star.png b/modules/lightning_features/lightning_media/images/star.png new file mode 100644 index 000000000..52fcdef78 Binary files /dev/null and b/modules/lightning_features/lightning_media/images/star.png differ diff --git a/modules/lightning_features/lightning_media/js/media_library.js b/modules/lightning_features/lightning_media/js/media_library.js new file mode 100644 index 000000000..aa2c422b9 --- /dev/null +++ b/modules/lightning_features/lightning_media/js/media_library.js @@ -0,0 +1,87 @@ +(function ($, _, Backbone, Drupal, CKEDITOR) { + + "use strict"; + + var MediaLibrary = Backbone.View.extend({ + + initialize: function (options) { + var self = this; + + var t = this.el; + if (t.rows.length === 0) { + t.insertRow().insertCell(-1).colSpan = 4; + } + + function onAdd (model) { + var r = t.rows[t.rows.length - 1]; + + if (r.cells.length === 4) { + t.insertRow().insertCell(-1).colSpan = 4; + r = r.nextSibling; + } + + var c = r.cells[r.cells.length - 1]; + r.insertCell(-1).colSpan = (c.colSpan - 1); + c.colSpan = 1; + c.style.width = '25%'; + c.innerHTML = model.get('thumbnail__target_id'); + $(c).on('click', function () { + var el = options.editor.document.createElement('drupal-entity'); + + el.setAttribute('data-align', 'none'); + el.setAttribute('data-embed-button', 'media_library'); + el.setAttribute('data-entity-embed-display', 'entity_reference:entity_reference_entity_view'); + el.setAttribute('data-entity-embed-settings', '{"view_mode":"default"}'); + el.setAttribute('data-entity-id', model.get('mid')); + el.setAttribute('data-entity-label', 'N/A'); + el.setAttribute('data-entity-type', 'media'); + el.setAttribute('data-entity-uuid', model.get('uuid')); + + options.editor.insertHtml(el.getOuterHtml()); + self.$el.dialog('close'); + }); + } + + options.collection.on('add', onAdd).fetch(); + }, + + }); + + CKEDITOR.plugins.add('media_library', { + requires: 'drupalentity', + + beforeInit: function (editor) { + _.each(editor.config.mediaLibrary.buttons, function (button) { + editor.ui.addButton(button.id, { + label: button.label, + data: button, + click: function (editor) { + editor.execCommand('media_library', this.data); + }, + icon: button.image + }); + }); + + editor.addCommand('media_library', { + exec: function(editor, data) { + var source = new Backbone.Collection(); + source.url = Drupal.url('media-library'); + var lib = new MediaLibrary({ collection: source, el: document.createElement('table'), editor: editor }); + + lib.$el.dialog({ + draggable: false, + height: '50%', + modal: true, + open: function () { + $(this).width('100%').css('margin', 0); + }, + resizable: false, + title: data.label, + width: '60%' + }); + } + }); + } + }); + +})(jQuery, _, Backbone, Drupal, CKEDITOR); diff --git a/modules/lightning_features/lightning_media/lightning_media.info.yml b/modules/lightning_features/lightning_media/lightning_media.info.yml index 03e93b247..dd1434cd0 100644 --- a/modules/lightning_features/lightning_media/lightning_media.info.yml +++ b/modules/lightning_features/lightning_media/lightning_media.info.yml @@ -1,10 +1,17 @@ name: Lightning Media type: module -description: 'Provides install and configuration for great media authoring experiences.' +description: Slick media handling for Lightning. So cool you'll make the A/C jealous. core: 8.x -package: lightning +package: Lightning dependencies: - - embed - entity_embed - - entity_browser - - file_browser + - media_entity + - media_entity_image + # These next four are temporary dependencies until individual media_entity packages + # provide sane defaults separate from media_pinkeye. + - media_entity_instagram + - media_pinkeye + - media_entity_slideshow + - media_entity_twitter + - rest + - serialization diff --git a/modules/lightning_features/lightning_media/src/Plugin/CKEditorPlugin/MediaLibrary.php b/modules/lightning_features/lightning_media/src/Plugin/CKEditorPlugin/MediaLibrary.php new file mode 100644 index 000000000..f90cdb5ce --- /dev/null +++ b/modules/lightning_features/lightning_media/src/Plugin/CKEditorPlugin/MediaLibrary.php @@ -0,0 +1,104 @@ +moduleHandler = $module_handler; + } + + /** + * {@inheritdoc} + */ + public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) { + return new static( + $configuration, + $plugin_id, + $plugin_definition, + $container->get('entity.query')->get('embed_button'), + $container->get('module_handler') + ); + } + + /** + * {@inheritdoc} + */ + public function getDependencies(Editor $editor) { + return ['drupalentity']; + } + + /** + * {@inheritdoc} + */ + public function getFile() { + return $this->moduleHandler->getModule('lightning_media')->getPath() . '/js/media_library.js'; + } + + /** + * {@inheritdoc} + */ + public function getConfig(Editor $editor) { + return [ + 'mediaLibrary' => [ + // This allows several buttons to hook into the media library, which + // opens the possibility of specific ones for embedding video, audio, + // tweets, booplesnoots, etc. + 'buttons' => $this->getButtons(), + ], + ]; + } + + /** + * {@inheritdoc} + */ + protected function getButton(EmbedButtonInterface $embed_button) { + return [ + 'id' => $embed_button->id(), + 'name' => Html::escape($embed_button->label()), + 'label' => Html::escape($embed_button->label()), + 'image' => $embed_button->getIconUrl(), + ]; + } + +} diff --git a/modules/lightning_features/lightning_media/src/Plugin/EmbedType/MediaLibrary.php b/modules/lightning_features/lightning_media/src/Plugin/EmbedType/MediaLibrary.php new file mode 100644 index 000000000..406f44af9 --- /dev/null +++ b/modules/lightning_features/lightning_media/src/Plugin/EmbedType/MediaLibrary.php @@ -0,0 +1,72 @@ +moduleHandler = $module_handler; + $this->stringTranslation = $translator; + } + + /** + * {@inheritdoc} + */ + public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) { + return new static( + $configuration, + $plugin_id, + $plugin_definition, + $container->get('module_handler'), + $container->get('string_translation') + ); + } + + /** + * {@inheritdoc} + */ + public function getDefaultIconUrl() { + $path = $this->moduleHandler->getModule('lightning_media')->getPath(); + return file_create_url($path . '/images/star.png'); + } + +}