├── package.json
├── previewfiles.php
├── LICENSE
├── README.md
└── assets
    └── js
        └── script.js


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |    "name": "previewfiles",
 3 |    "description": "Kirby field to enable file thumbnail preview in the panel sidebar",
 4 |    "author": "Brocessing <https://github.com/brocessing>",
 5 |    "repository": {
 6 |       "type": "git",
 7 |       "url": "https://github.com/brocessing/kirby-previewfiles"
 8 |    },
 9 |    "version": "0.1.1",
10 |    "type": "kirby-field",
11 |    "license": "MIT"
12 | }
13 | 


--------------------------------------------------------------------------------
/previewfiles.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class PreviewfilesField extends BaseField {
 4 |   static public $uuid = 0;
 5 |   static public $domNamespace = '__kirby__field__previewfiles';
 6 |   static public $assets = ['js' => ['script.js']];
 7 | 
 8 |   public function input() {
 9 |     $id = self::$domNamespace . '__' . ++self::$uuid;
10 |     $var = 'window' . '.' . self::$domNamespace;
11 |     $opts = json_encode((object) []);
12 |     $javascript = "
13 |       (function () {
14 |         if (${var}) ${var}.init(${opts})
15 |         var self = document.getElementById('${id}')
16 |         self.parentNode.removeChild(self)
17 |       })()
18 |     ";
19 |     return brick('script', $javascript, ['id' => $id]);
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Brocessing
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">Kirby Preview Files</h1>
 2 | <h3 align="center">Enable file thumbnail preview in the panel sidebar</h3>
 3 | 
 4 | <div align="center">
 5 |     <img alt="version" src="https://img.shields.io/badge/version-0.1.0-green.svg?style=flat-square"/>
 6 |     <img alt="kirby_version" src="https://img.shields.io/badge/kirby-2.0+-red.svg?style=flat-square"/>
 7 |     <img alt="license" src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square"/>
 8 |     <br>
 9 |     <br>
10 |     <br>
11 |     <br>
12 |     <img alt="preview" src="https://github.com/brocessing/kirby-previewfiles/blob/assets/preview.gif?raw=true">
13 | </div>
14 | 
15 | <br>
16 | <br>
17 | 
18 | ## Installation
19 | 
20 | Use one of the alternatives below.
21 | 
22 | ### 1. Using [`kirby-webpack`](https://github.com/brocessing/kirby-webpack)
23 | 
24 | Simply use the built-in **Kirby Package Manager** by running:
25 | 
26 | ```sh
27 | $ npm run kirby:add
28 | $ [?] Git URL: https://github.com/brocessing/kirby-previewfiles
29 | $ [?] Module name: previewfiles
30 | $ [?] Category: fields
31 | ```
32 | 
33 | ### 2. Kirby CLI
34 | 
35 | If you are using the [Kirby CLI](https://github.com/getkirby/cli) you can install this plugin by running the following commands in your shell:
36 | 
37 | ```sh
38 | $ cd path/to/kirby
39 | $ kirby plugin:install brocessing/kirby-previewfiles
40 | ```
41 | 
42 | ### 3. Clone or download
43 | 
44 | 1. [Clone](https://github.com/brocessing/kirby-previewfiles.git) or [download](https://github.com/brocessing/kirby-previewfiles/archive/master.zip) this repository.
45 | 2. Unzip the archive if needed and rename the folder to `previewfiles`.
46 | 
47 | **Make sure that the plugin folder structure looks like this:**
48 | 
49 | ```text
50 | site/fields/previewfiles/
51 | ```
52 | 
53 | ### 4. Git Submodule
54 | 
55 | If you know your way around Git, you can download this plugin as a submodule:
56 | 
57 | ```sh
58 | $ cd path/to/kirby
59 | $ git submodule add https://github.com/brocessing/kirby-previewfiles site/fields/previewfiles
60 | ```
61 | 
62 | ## Setup
63 | 
64 | ### Blueprint
65 | 
66 | To enable file preview for a given page, add the following code to its blueprint: 
67 | 
68 | ```yaml
69 | fields:
70 |   previewfiles:
71 |     type: previewfiles
72 | ```
73 | 
74 | ## Requirements
75 | 
76 | - [**Kirby**](https://getkirby.com/) 2.0+
77 | 
78 | ## Disclaimer
79 | 
80 | This field is provided "as is" with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment. If you find any issues, please [create a new issue](https://github.com/brocessing/kirby-previewfiles/issues/new).
81 | 
82 | ## License
83 | 
84 | [MIT](https://opensource.org/licenses/MIT)
85 | 
86 | It is discouraged to use this field in any project that promotes racism, sexism, homophobia, animal abuse, violence or any other form of hate speech.
87 | 


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |   var ns = '__kirby__field__previewfiles'
 3 |   var api = { init: init }
 4 |   window[ns] = api
 5 | 
 6 |   var $main, $mainbar
 7 |   var interval = null
 8 | 
 9 |   function preview () {
10 |     if (!api.ready) return
11 |     var items = document.querySelectorAll('ul.sidebar-list li .draggable-file .icon.fa')
12 |     // console.log(items)
13 |     if (items.length <= 0) return
14 |     for (var i = 0; i < items.length; i++) {
15 |       var $item = items[i]
16 |       var isImage = $item.classList.contains('fa-file-image-o')
17 |       var $parent = $item.parentNode
18 | 
19 |       var $icon = $parent.querySelector('i')
20 |       var $thumb = document.createElement('div')
21 |       var $text = document.createElement('div')
22 |       var $options = $parent.nextElementSibling
23 |       var $ellipsis = $options.querySelector('i')
24 | 
25 |       var textValue = $parent.childNodes[0].nodeValue
26 |       var thumbUrl = $parent.dataset.url
27 | 
28 |       $parent.innerHTML = ''
29 |       $parent.style.padding = '0'
30 |       $parent.style.margin = '0'
31 |       $parent.style.marginBottom = '5px'
32 | 
33 |       $text.innerHTML = textValue
34 |       $text.style.height = '40px'
35 |       $text.style.padding = '0 0 0 50px'
36 |       $text.style.lineHeight = '40px'
37 |       $text.style.boxSizing = 'border-box'
38 | 
39 |       if (isImage) {
40 |         $thumb.style.background = 'url(' + thumbUrl + ') no-repeat center'
41 |         $thumb.style.backgroundSize = 'cover'
42 |       } else {
43 |         $thumb.style.background = '#efefef'
44 |         $thumb.style.background = '#efefef'
45 |       }
46 |       $thumb.style.width = '40px'
47 |       $thumb.style.height = '40px'
48 |       $thumb.style.position = 'absolute'
49 |       $thumb.style.top = '0'
50 |       $thumb.style.left = '0'
51 | 
52 |       $options.style.top = '0px'
53 |       $options.style.left = '0px'
54 |       $options.style.width = '40px'
55 |       $options.style.height = '40px'
56 |       $options.style.background = 'rgba(0, 0, 0, 0.7)'
57 |       $options.style.lineHeight = '40px'
58 |       $options.style.textAlign = 'center'
59 |       $ellipsis.style.color = 'white'
60 |       $ellipsis.style.lineHeight = '15px'
61 |       $ellipsis.style.position = 'static'
62 | 
63 |       $icon.style.top = '0px'
64 |       $icon.style.left = '14px'
65 |       $icon.style.lineHeight = '40px'
66 |       // $icon.style.textAlign = 'center'
67 | 
68 |       $parent.appendChild($thumb)
69 |       if (!isImage) $parent.appendChild($icon)
70 |       $parent.appendChild($text)
71 |     }
72 |   }
73 | 
74 |   function init (opts) {
75 |     if (!opts) opts = {}
76 |     if (api.ready) destroy()
77 |     api.ready = true
78 |     preview()
79 |     // set fields as ready & set listeners
80 |     window.addEventListener('popstate', destroy)
81 |     $main = document.querySelector('.main')
82 |     $mainbar = document.querySelector('.mainbar')
83 |     interval = window.setInterval(checkPresence, 500)
84 |     // console.log('initialized')
85 |   }
86 | 
87 |   function destroy () {
88 |     if (interval !== null) window.clearInterval(interval)
89 |     $main = $mainbar = interval = null
90 |     window.removeEventListener('popstate', destroy)
91 |     api.ready = false
92 |     // console.log('destroyed')
93 |   }
94 | 
95 |   function checkPresence () {
96 |     if (api.ready && !$main.contains($mainbar)) return destroy()
97 |   }
98 | })();
99 | 


--------------------------------------------------------------------------------