Merge pull request #36 from xwp/try/masonary-2

Add masonry view to backbone

.eslintignore

@@ -4,4 +4,6 @@
 **/vendor/**
 **/assets/js/*.js
 build/*
+js/dist/*
+data/*
 built/*

assets/src/media-selector/views/collections/images_collection.js → assets/src/media-selector/collections/images_collection.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import ImagesQueryModel from '../../models/images_query_model';
+import ImagesQueryModel from '../models/images_query_model';
 
 const ImagesCollection = wp.media.model.Attachments.extend( {
 	/**

assets/src/media-selector/index.js

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { withUnsplashTab } from './views/helpers';
+import './style.css';
 
 // Override media frames in the respective editors to add the Unsplash tab.
 

assets/src/media-selector/models/images_query_model.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import ImagesCollection from '../views/collections/images_collection';
+import ImagesCollection from '../collections/images_collection';
 
 const ImagesQueryModel = wp.media.model.Query.extend(
 	{

assets/src/media-selector/store/unsplash_state.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import ImagesCollection from '../views/collections/images_collection';
+import ImagesCollection from '../collections/images_collection';
 
 const State = wp.media.controller.State;
 
@@ -14,6 +14,7 @@ const UnsplashState = State.extend( {
 		menu: 'unsplash',
 		router: false,
 		priority: -60,
+		refreshThreshold: 20,
 		filterable: 'uploaded',
 		multiple: 'add',
 		editable: false,

assets/src/media-selector/style.css

@@ -0,0 +1,141 @@
+.unsplash-browser.attachments-browser .media-toolbar-primary {
+	float: none;
+	max-width: 100%;
+	margin: 20px 6px 5px;
+}
+
+.unsplash-browser.attachments-browser .media-toolbar {
+	height: 100px;
+}
+
+.unsplash-browser.attachments-browser .unsplash-search-input-label {
+	display: block;
+	margin: 5px 0 0;
+}
+
+.unsplash-browser.attachments-browser .unplash-search {
+	width: 100%;
+	padding: 5px 10px;
+	margin: 0;
+}
+
+.wp-core-ui .unsplash-browser .attachment-preview {
+	box-shadow: none;
+	background: none;
+}
+
+.wp-core-ui .unsplash-browser .attachment-preview::before {
+	display: none;
+	padding-top: 0;
+}
+
+.media-frame .unsplash-browser .no-media,
+.media-frame .unsplash-browser .attachments {
+	position: absolute !important;
+	height: auto !important;
+	top: 100px;
+	right: 310px;
+	left: 10px;
+	padding: 0;
+}
+
+.media-frame .unsplash-browser .no-media {
+	right: 300px;
+	text-align: center;
+	left: 0;
+	top: 35px;
+}
+
+.wp-core-ui  .unsplash-attachment .thumbnail {
+	margin: 12px;
+}
+
+.wp-core-ui  .unsplash-attachment:focus .thumbnail,
+.wp-core-ui .selected.attachment:focus .thumbnail,
+.wp-core-ui  .unsplash-attachment.details:focus .thumbnail {
+	box-shadow:
+		0 0 0 1px #fff,
+		0 0 2px 3px #5b9dd9;
+
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+}
+
+.wp-core-ui .media-selection .selected.attachment .thumbnail {
+	box-shadow: none;
+}
+
+.wp-core-ui .unsplash-attachment.details .thumbnail {
+	box-shadow:
+		0 0 0 1px #fff,
+		0 0 0 3px #0073aa;
+}
+
+.media-frame .unsplash-browser .no-media img {
+	width: 400px;
+}
+
+.wp-core-ui .unsplash-browser .unsplash-attachment img {
+	min-width: 100%;
+	max-width: 100%;
+	vertical-align: top;
+}
+
+.wp-core-ui .unsplash-attachment .check {
+	display: none;
+	height: 24px;
+	width: 24px;
+	padding: 0;
+	border: 0;
+	position: absolute;
+	z-index: 10;
+	top: 2px;
+	right: 2px;
+	outline: none;
+	background: #eee;
+	cursor: pointer;
+	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.15);
+}
+
+.wp-core-ui .unsplash-attachment .check .media-modal-icon {
+	display: block;
+	background-position: -1px 0;
+	height: 15px;
+	width: 15px;
+	margin: 5px;
+}
+
+.wp-core-ui .unsplash-attachment .check:hover .media-modal-icon {
+	background-position: -40px 0;
+}
+
+
+.wp-core-ui .unsplash-attachment.selected .check {
+	display: block;
+}
+
+.wp-core-ui .unsplash-attachment.details .check,
+.wp-core-ui .unsplash-attachment.selected .check:focus,
+.wp-core-ui .media-frame.mode-grid .attachment.selected .check {
+	background-color: #0073aa;
+	box-shadow:
+		0 0 0 1px #fff,
+		0 0 0 2px #0073aa;
+}
+
+.wp-core-ui .unsplash-attachment.selected .check:focus {
+
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+}
+
+.wp-core-ui .unsplash-attachment.details .check .media-modal-icon,
+.wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
+	background-position: -21px 0;
+}
+
+.wp-core-ui .unsplash-attachment.details .check:hover .media-modal-icon,
+.wp-core-ui .unsplash-attachment.selected .check:focus .media-modal-icon,
+.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
+	background-position: -60px 0;
+}

assets/src/media-selector/views/helpers.js

@@ -3,6 +3,7 @@
  */
 import ImagesBrowser from './images_browser';
 import UnsplashState from '../store/unsplash_state';
+import ImageView from './image_view';
 
 export const withUnsplashTab = View => {
 	return View.extend( {
@@ -64,7 +65,9 @@ export const withUnsplashTab = View => {
 
 			contentRegion.view = new ImagesBrowser( {
 				controller: this,
+				AttachmentView: ImageView,
 				collection: state.get( 'library' ),
+				mode: state.get( 'mode' ),
 				selection: ogState.get( 'selection' ),
 				model: state,
 				sortable: state.get( 'sortable' ),

assets/src/media-selector/views/image_view.js

@@ -0,0 +1,9 @@
+const ImageView = wp.media.view.Attachment.extend( {
+	className: 'unsplash-attachment',
+	tagName: 'div',
+	buttons: {
+		check: true,
+	},
+} );
+
+export default ImageView;

assets/src/media-selector/views/image_views.js

@@ -0,0 +1,38 @@
+import Macy from 'macy';
+
+const ImageViews = wp.media.view.Attachments.extend( {
+	className: 'attachments',
+	tagName: 'div',
+	macy: null,
+
+	render() {
+		wp.media.view.Attachments.prototype.render.apply( this, arguments );
+		this.refreshMacy();
+	},
+	ready() {
+		this.setupMacy();
+		this.scroll();
+	},
+	setupMacy() {
+		this.macy = Macy( {
+			container: '#' + this.el.id,
+			trueOrder: true,
+			waitForImages: true,
+			useContainerForBreakpoints: true,
+			margin: 0,
+			columns: 3,
+			breakAt: {
+				992: 3,
+				768: 2,
+				600: 1,
+			},
+		} );
+	},
+	refreshMacy() {
+		if ( this.macy ) {
+			this.macy.recalculate();
+		}
+	},
+} );
+
+export default ImageViews;

assets/src/media-selector/views/images_browser.js

@@ -1,6 +1,17 @@
+import ImageViews from './image_views';
+
 const ImagesBrowser = wp.media.view.AttachmentsBrowser.extend( {
 	className: 'unsplash-browser attachments-browser',
 
+	initialize() {
+		wp.media.view.AttachmentsBrowser.prototype.initialize.apply(
+			this,
+			arguments
+		);
+
+		this.collection.on( 'add remove reset', this.updateLayout, this );
+	},
+
 	createToolbar() {
 		const { toolbar } = window.unsplash;
 
@@ -10,24 +21,16 @@ const ImagesBrowser = wp.media.view.AttachmentsBrowser.extend( {
 
 		this.views.add( this.toolbar );
 
-		// TODO: replace with better spinner.
-		this.toolbar.set(
-			'spinner',
-			new wp.media.view.Spinner( {
-				priority: -20,
-			} )
-		);
-
 		// Label for the 'search' filter. This is a visually hidden element and needs to be rendered before.
 		this.toolbar.set(
 			'searchLabel',
 			new wp.media.view.Label( {
 				value: toolbar.filters.search.label,
-				className: 'media-search-input-label',
+				className: 'unsplash-search-input-label',
 				attributes: {
 					for: 'media-search-input',
 				},
-				priority: 60,
+				priority: 70,
 			} ).render()
 		);
 
@@ -38,8 +41,83 @@ const ImagesBrowser = wp.media.view.AttachmentsBrowser.extend( {
 				controller: this.controller,
 				model: this.collection.props,
 				priority: 60,
+				className: 'unplash-search',
+				id: 'unplash-search-input',
 			} ).render()
 		);
+
+		// TODO: replace with better spinner.
+		this.toolbar.set(
+			'spinner',
+			new wp.media.view.Spinner( {
+				priority: 80,
+			} )
+		);
+	},
+	createAttachments() {
+		const { noResults } = window.unsplash;
+
+		this.attachments = new ImageViews( {
+			controller: this.controller,
+			collection: this.collection,
+			selection: this.options.selection,
+			model: this.model,
+			sortable: this.options.sortable,
+			scrollElement: this.options.scrollElement,
+			idealColumnWidth: this.options.idealColumnWidth,
+
+			// The single `Attachment` view to be used in the `Attachments` view.
+			AttachmentView: this.options.AttachmentView,
+		} );
+
+		// Add keydown listener to the instance of the Attachments view
+		this.controller.on(
+			'attachment:keydown:arrow',
+			_.bind( this.attachments.arrowEvent, this.attachments )
+		);
+		this.controller.on(
+			'attachment:details:shift-tab',
+			_.bind( this.attachments.restoreFocus, this.attachments )
+		);
+
+		this.views.add( this.attachments );
+
+		this.attachmentsNoResults = new wp.media.View( {
+			controller: this.controller,
+			tagName: 'div',
+		} );
+
+		this.attachmentsNoResults.$el.addClass( 'hidden no-media' );
+		this.attachmentsNoResults.$el.html(
+			`<img src="${ noResults.image }" alt="${ noResults.noMedia }"/>`
+		);
+		this.attachmentsNoResults.$el.append( `<p>${ noResults.noMedia }</p>` );
+
+		this.views.add( this.attachmentsNoResults );
+	},
+	updateContent() {
+		const view = this;
+		const noItemsView = view.attachmentsNoResults;
+
+		if ( ! this.collection.length ) {
+			this.toolbar.get( 'spinner' ).show();
+			this.dfd = this.collection.more().done( function() {
+				if ( ! view.collection.length ) {
+					noItemsView.$el.removeClass( 'hidden' );
+				} else {
+					noItemsView.$el.addClass( 'hidden' );
+				}
+				view.toolbar.get( 'spinner' ).hide();
+			} );
+		} else {
+			noItemsView.$el.addClass( 'hidden' );
+			view.toolbar.get( 'spinner' ).hide();
+		}
+	},
+
+	updateLayout() {
+		this.attachments.setupMacy();
+		this.attachments.refreshMacy();
 	},
 } );