diff --git a/plugin/admin/editor.php b/plugin/admin/editor.php index a1046fe..4781656 100644 --- a/plugin/admin/editor.php +++ b/plugin/admin/editor.php @@ -69,7 +69,8 @@ function file_selection() { */ function get_folder_content( $service, $folder = null ) { if ( ! isset( $folder ) ) { - $folder = end( \Sgdd\Admin\Options\Options::$root_path->get() ); + $root_path = \Sgdd\Admin\Options\Options::$root_path->get(); + $folder = end( $root_path ); } $result = []; diff --git a/plugin/admin/options/class-options.php b/plugin/admin/options/class-options.php index 79f9222..6b7929d 100644 --- a/plugin/admin/options/class-options.php +++ b/plugin/admin/options/class-options.php @@ -17,7 +17,10 @@ class Options { public static $embed_width; public static $embed_height; - public static $size_unit; + public static $folder_type; + + public static $list_width; + public static $grid_cols; public static function init() { $url = wp_parse_url( get_site_url() ); @@ -29,9 +32,12 @@ public static function init() { self::$root_path = new \Sgdd\Admin\Options\OptionTypes\PathField( 'root_path', '', 'basic', 'path_selection', [] ); - self::$embed_width = new \Sgdd\Admin\Options\OptionTypes\IntegerField( 'embed_width', __( 'Width', 'skaut-google-drive-documents' ), 'advanced', 'embed', '50' ); - self::$embed_height = new \Sgdd\Admin\Options\OptionTypes\IntegerField( 'embed_height', __( 'Height', 'skaut-google-drive-documents' ), 'advanced', 'embed', '50' ); + self::$embed_width = new \Sgdd\Admin\Options\OptionTypes\IntegerField( 'embed_width', __( 'Width', 'skaut-google-drive-documents' ), 'advanced', 'embed', '800' ); + self::$embed_height = new \Sgdd\Admin\Options\OptionTypes\IntegerField( 'embed_height', __( 'Height', 'skaut-google-drive-documents' ), 'advanced', 'embed', '600' ); + + self::$folder_type = new \Sgdd\Admin\Options\OptionTypes\SelectField( 'folder_type', __( 'Folder type', 'skaut-google-drive-documents' ), 'advanced', 'embed', 'list' ); - self::$size_unit = new \Sgdd\Admin\Options\OptionTypes\SelectField( 'size_unit', __( 'Units', 'skaut-google-drive-documents' ), 'advanced', 'embed', 'percentage' ); + self::$list_width = new \Sgdd\Admin\Options\OptionTypes\IntegerField( 'list_width', __( 'List width', 'skaut-google-drive-documents' ), 'advanced', 'embed', '800' ); + self::$grid_cols = new \Sgdd\Admin\Options\OptionTypes\IntegerField( 'grid_cols', __( 'Grid columns', 'skaut-google-drive-documents' ), 'advanced', 'embed', '3' ); } } diff --git a/plugin/admin/options/option-types/class-selectfield.php b/plugin/admin/options/option-types/class-selectfield.php index 25544d4..8af9784 100644 --- a/plugin/admin/options/option-types/class-selectfield.php +++ b/plugin/admin/options/option-types/class-selectfield.php @@ -30,11 +30,11 @@ public function sanitize( $value ) { public function display() { echo '
'; } diff --git a/plugin/admin/settings-pages/advanced/embed.php b/plugin/admin/settings-pages/advanced/embed.php index da5df4d..d110b7b 100644 --- a/plugin/admin/settings-pages/advanced/embed.php +++ b/plugin/admin/settings-pages/advanced/embed.php @@ -13,7 +13,9 @@ function add() { add_settings_section( 'sgdd_embed', esc_html__( 'Embed', 'skaut-google-drive-documents' ), '\\Sgdd\\Admin\\SettingsPages\\Advanced\\Embed\\display', 'sgdd_advanced' ); \Sgdd\Admin\Options\Options::$embed_width->add_field(); \Sgdd\Admin\Options\Options::$embed_height->add_field(); - \Sgdd\Admin\Options\Options::$size_unit->add_field(); + \Sgdd\Admin\Options\Options::$folder_type->add_field(); + \Sgdd\Admin\Options\Options::$list_width->add_field(); + \Sgdd\Admin\Options\Options::$grid_cols->add_field(); } function display() { diff --git a/plugin/public/block.php b/plugin/public/block.php index 47fd25a..810dbda 100644 --- a/plugin/public/block.php +++ b/plugin/public/block.php @@ -35,7 +35,9 @@ function add_block() { 'embedHeight' => [ esc_html__( 'Height', 'skaut-google-drive-documents' ), \Sgdd\Admin\Options\Options::$embed_height->get() ], 'list' => esc_html__( 'List', 'skaut-google-drive-documents' ), 'grid' => esc_html__( 'Grid', 'skaut-google-drive-documents' ), - 'folderType' => [ esc_html__( 'List folder as', 'skaut-google-drive-documents' ) ], + 'folderType' => [ esc_html__( 'List folder as', 'skaut-google-drive-documents' ), \Sgdd\Admin\Options\Options::$folder_type->get() ], + 'listWidth' => [ esc_html__( 'List width', 'skaut-google-drive-documents' ), \Sgdd\Admin\Options\Options::$list_width->get() ], + 'gridCols' => [ esc_html__( 'Grid columns', 'skaut-google-drive-documents' ), \Sgdd\Admin\Options\Options::$grid_cols->get() ], ] ); @@ -51,102 +53,106 @@ function add_block() { /* -- WIP -- */ function display( $attr ) { - $size = ''; + //var_dump($attr); //debug - if ( isset( $attr['embedWidth'] ) ) { - $size .= 'width:' . $attr['embedWidth'] . 'px;'; - } - - if ( isset( $attr['embedHeight'] ) ) { - $size .= 'height:' . $attr['embedHeight'] . 'px;'; - } - if ( isset( $attr['folderType'] ) ) { - $list = show_folder( $attr['folderId'] ); - - if ( 'list' === $attr['folderType'] ) { - //LIST - almost done + //display folder + $folderId; + $content; + $width; + $cols; + $result; + + //set folderId variable + if ( isset( $attr['folderId'] ) ) { + $folderId = $attr['folderId']; + } else { + $folderId = \Sgdd\Admin\Options\Options::$root_path->get(); + } - $result = '' - . ''; + //gdrive request to fetch content of folder + $content = fetch_folder_content( $folderId ); - foreach( $list as $file ) { - //var_dump($file); - $result .= ''; - $result .= ''; - $result .= ''; - $result .= ''; + if ( 'list' === $attr['folderType'] ) { + //display list + if ( isset( $attr['listWidth'] ) ) { + $result = build_result( $content, 'list', array( 'width' => $attr['listWidth'] ) ); + } else { + $result = build_result( $content, 'list', array() ); } + + } else { - //GRID - add setting - num of columns - // - add thumbnails - - $result = '
' . $file['name'] . '
' - . ''; - - $i = 0; - foreach( $list as $file ) { - //var_dump($file); - $i % 3 == 0 ? $result .= '' : $result .= ''; - if (!$file['hasThumbnail']){ - $result .= ''; - } else { - $result .= ''; - } - $i % 3 == 2 ? $result .= '' : $result .= ''; - $i++; + //display grid + if ( isset( $attr['gridCols'] ) ) { + $cols = $attr['gridCols']; + } else { + $cols = \Sgdd\Admin\Options\Options::$grid_cols->get(); + } + + if ( isset( $attr['listWidth'] ) ) { + $result = build_result( $content, 'grid', array( 'width' => $attr['listWidth'], 'cols' => $cols ) ); + } else { + $result = build_result( $content, 'grid', array( 'cols' => $cols ) ); } + } - $result .= '' - . '

' . $file['name'] . '
' . $file['name'] . '
'; + $result .= ' + '; + + return $result; } else { - $test = print_file( $attr['fileId'] ); - $link = $test['id']; - $result = ''; - } + //display file + $size = ''; - return $result; -} + if ( isset( $attr['fileId'] ) ) { + $id = $attr['fileId']; + } else { + //throw error + return '
Error
Please select file to display or enable "display folder" function
'; + } + + $temp = set_file_permissions( $id ); + //var_dump($temp); //debug + + if ( isset( $attr['embedWidth'] ) ) { + $size .= 'width:' . $attr['embedWidth'] . 'px; '; + } + + if ( isset( $attr['embedHeight'] ) ) { + $size .= 'height:' . $attr['embedHeight'] . 'px; '; + } -function print_file( $file_id ) { - //TODO: make efficient and more simple + $result = ''; + + return $result; + } +} - //Only to set permissions to display file +function set_file_permissions( $fileId ) { try { $service = \Sgdd\Admin\GoogleAPILib\get_drive_client(); - $domain_permission = new \Sgdd\Vendor\Google_Service_Drive_Permission( [ 'role' => 'reader', 'type' => 'anyone', ] ); - - $request = $service->permissions->create( $file_id, $domain_permission, [ 'supportsTeamDrives' => true ] ); + $request = $service->permissions->create( $fileId, $domain_permission, [ 'supportsTeamDrives' => true ] ); $get_options = [ 'supportsAllDrives' => true, - 'fields' => '*', + 'fields' => 'id', ]; - - $response = $service->files->get( $file_id, $get_options ); - + $response = $service->files->get( $fileId, $get_options ); return $response; } catch ( \Exception $e ) { return $e->getMessage(); } } -function show_folder( $folderId ) { - //TODO - +function fetch_folder_content( $folderId ) { $service = \Sgdd\Admin\GoogleAPILib\get_drive_client(); - - if ( ! isset( $folderId ) ) { - $folderId = end( \Sgdd\Admin\Options\Options::$root_path->get() ); - } - - $result = []; $page_token = null; do { @@ -157,7 +163,7 @@ function show_folder( $folderId ) { 'includeItemsFromAllDrives' => true, 'pageToken' => $page_token, 'pageSize' => 1000, - 'fields' => '*', + 'fields' => 'files', ) ); @@ -170,4 +176,53 @@ function show_folder( $folderId ) { } while ( null !== $page_token ); return $response; +} + +function build_result( $content, $type, $arg ) { + $result; + + if ( $type === 'list' ) { + //build list table + if ( !empty( $arg ) ) { + $result = ''; + } else { + $result = '
'; + } + + foreach ( $content as $element ) { + $result .= ' + + + '; + } + + return $result; + } else { + //build grid table + $i = 0; + $width; + $cols = $arg['cols']; + + if ( array_key_exists( 'width', $arg ) ) { + $result = '
' . $element['name'] . '
'; + } else { + $result = '
'; + } + + foreach ( $content as $element ) { + //var_dump($element); //debug + + $i % $cols == 0 ? $result .= '' : $result .= ''; + + if ( !$element['hasThumbnail'] || preg_match( '/\b(google-apps)/', $element['mimeType'] ) ){ + $result .= ''; + } else { + $result .= ''; + } + $i % $cols == $cols - 1 ? $result .= '' : $result .= ''; + $i++; + } + + return $result; + } } \ No newline at end of file diff --git a/plugin/public/css/block.css b/plugin/public/css/block.css index 88b2e63..053cfb6 100644 --- a/plugin/public/css/block.css +++ b/plugin/public/css/block.css @@ -63,4 +63,29 @@ .sgdd-block-units { display: inline-table; +} + +.element { + border: solid 1px; + border-color: rgba(51, 51, 51, 0.1); + border-radius: 10px; + margin: auto; + vertical-align: center; + padding: 10px; +} + +.image img { + display: block; + /*max-width: 100px; + max-height: 100px;*/ + margin: auto; +} + +.caption { + margin: auto; + text-align: center; +} + +.caption a { + text-decoration: none !important; } \ No newline at end of file diff --git a/plugin/public/js/block.js b/plugin/public/js/block.js index e01860c..6a33159 100644 --- a/plugin/public/js/block.js +++ b/plugin/public/js/block.js @@ -21,11 +21,11 @@ registerBlockType( 'skaut-google-drive-documents/block', { }, fileId: { type: 'string', - default: undefined + default: '' }, folderId: { type: 'string', - default: undefined + default: '' }, embedWidth: { type: 'int', @@ -35,9 +35,17 @@ registerBlockType( 'skaut-google-drive-documents/block', { type: 'int', default: undefined }, + listWidth: { + type: 'int', + default: undefined + }, + gridCols: { + type: 'int', + default: undefined + }, folderType: { type: 'string', - default: '' + default: undefined } }, diff --git a/plugin/public/js/file-selection.js b/plugin/public/js/file-selection.js index 15dcf2c..5746fe3 100644 --- a/plugin/public/js/file-selection.js +++ b/plugin/public/js/file-selection.js @@ -14,6 +14,8 @@ SgddFileSelection.prototype.componentDidMount = function() { SgddFileSelection.prototype.ajax = function() { console.log( 'FileID: ' + this.getAttribute( 'fileId' ) ); console.log( 'FolderID: ' + this.getAttribute( 'folderId' ) ); + console.log( 'idsPath: ' + this.getAttribute( 'idsPath' ) ); + console.log( 'namesPath: ' + this.getAttribute( 'namesPath' ) ); var that = this; $.ajax({ url: sgddBlockJsLocalize.ajaxUrl, @@ -39,6 +41,11 @@ SgddFileSelection.prototype.ajax = function() { }; SgddFileSelection.prototype.render = function() { + console.log( 'render' ); + console.log( 'FileID: ' + this.getAttribute( 'fileId' ) ); + console.log( 'FolderID: ' + this.getAttribute( 'folderId' ) ); + console.log( 'idsPath: ' + this.getAttribute( 'idsPath' ) ); + var that = this; var children = []; var namesPath = [ el( 'a', {onClick: function( e ) { @@ -120,14 +127,31 @@ SgddFileSelection.prototype.setAttribute = function( name, value ) { SgddFileSelection.prototype.upClick = function( that ) { var namesPath; var idsPath; + var folderId; + + if ( that.getAttribute( 'namesPath' ).length == 1 ) { + namesPath = []; + } else { + namesPath = that.getAttribute( 'namesPath' ).slice( 0, that.getAttribute( 'namesPath' ).length - 1 ); + } + + if ( that.getAttribute( 'idsPath' ).length == 1 ) { + idsPath = []; + } else { + idsPath = that.getAttribute( 'idsPath' ).slice( 0, that.getAttribute( 'idsPath' ).length - 1 ); + } - namesPath = that.getAttribute( 'namesPath' ).slice( 0, that.getAttribute( 'namesPath' ).length - 1 ); - idsPath = that.getAttribute( 'idsPath' ).slice( 0, that.getAttribute( 'idsPath' ).length - 1 ); + if ( idsPath.length < 1 ) { + folderId = sgddBlockJsLocalize.rootPath; + } else { + folderId = idsPath[idsPath.length - 1]; + } that.setAttribute( 'namesPath', namesPath ); that.setAttribute( 'idsPath', idsPath ); that.setAttribute( 'folder', 'true' ); - that.setAttribute( 'folderId', idsPath[idsPath.length - 1] ); + that.setAttribute( 'folderId', folderId ); + that.setAttribute( 'fileId', '' ); that.setState({ error: undefined, list: undefined }, that.ajax ); }; @@ -142,21 +166,25 @@ SgddFileSelection.prototype.pathClick = function( that, e ) { that.setAttribute( 'idsPath', idsPath ); that.setAttribute( 'folder', 'true' ); that.setAttribute( 'folderId', idsPath[idsPath.length - 1] ); + that.setAttribute( 'fileId', '' ); that.setState({error: undefined, list: undefined}, that.ajax ); }; SgddFileSelection.prototype.folderClick = function( that, e, id ) { let newFolder = $( e.currentTarget ).html(); var namesPath; - var idsPath = that.getAttribute( 'idsPath' ); + var idsPath; namesPath = that.getAttribute( 'namesPath' ).concat( newFolder ); - idsPath.push( id ); + idsPath = that.getAttribute( 'idsPath' ).concat( id ); + + console.log(idsPath); that.setAttribute( 'namesPath', namesPath ); that.setAttribute( 'idsPath', idsPath ); that.setAttribute( 'folderId', id ); that.setAttribute( 'folder', 'true' ); + that.setAttribute( 'fileId', '' ); that.setState({ error: undefined, list: undefined }, that.ajax ); }; diff --git a/plugin/public/js/inspector.js b/plugin/public/js/inspector.js index f8d2255..cb4e721 100644 --- a/plugin/public/js/inspector.js +++ b/plugin/public/js/inspector.js @@ -7,9 +7,15 @@ var SgddInspector = function( attributes ) { SgddInspector.prototype = Object.create( wp.element.Component.prototype ); SgddInspector.prototype.render = function() { - return el( wp.components.PanelBody, { title: 'Embed size', className: 'sgdd-block-settings' }, [ - el( SgddIntegerSetting, {block: this.block, name: 'embedWidth'}), - el( SgddIntegerSetting, {block: this.block, name: 'embedHeight'}), - el( SgddSelectSetting, {block: this.block, name: 'folderType'}) - ]); + return [ + el( wp.components.PanelBody, { title: 'Embed options', className: 'sgdd-block-settings' }, [ + el( SgddIntegerSetting, {block: this.block, name: 'embedWidth'}), + el( SgddIntegerSetting, {block: this.block, name: 'embedHeight'}) + ]), + el( wp.components.PanelBody, { title: 'List folder options', className: 'sgdd-block-settings' }, [ + el( SgddIntegerSetting, {block: this.block, name: 'listWidth'}), + el( SgddIntegerSetting, {block: this.block, name: 'gridCols'}), + el( SgddSelectSetting, {block: this.block, name: 'folderType'}) + ]) + ]; };
' . $element['name'] . '
' . $element['name'] . '