├── preview.png ├── raw-content.png ├── preview.php ├── package.json ├── lib └── preview.php ├── fields └── preview │ ├── assets │ └── js │ │ └── script.js │ └── preview.php └── readme.md /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/texnixe/kirby-preview/HEAD/preview.png -------------------------------------------------------------------------------- /raw-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/texnixe/kirby-preview/HEAD/raw-content.png -------------------------------------------------------------------------------- /preview.php: -------------------------------------------------------------------------------- 1 | set('field', 'preview', __DIR__ . DS . 'fields' . DS . 'preview'); 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "preview", 3 | "description": "Let's you select a page from a select field and shows a preview of it in an iframe below.", 4 | "author": "Sonja Broda ", 5 | "license": "MIT", 6 | "version": "0.1.0", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/texnixe/kirby-preview" 10 | }, 11 | "type": "kirby-plugin" 12 | } 13 | -------------------------------------------------------------------------------- /lib/preview.php: -------------------------------------------------------------------------------- 1 | data($page, $data); 8 | 9 | if(!file_exists($file)) { 10 | throw new Exception('The template could not be found'); 11 | } 12 | 13 | $tplData = tpl::$data; 14 | tpl::$data = array_merge($tplData, $data); 15 | $result = tpl::load($file, null); 16 | tpl::$data = $tplData; 17 | 18 | return $result; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /fields/preview/assets/js/script.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $.fn.preview = function() { 3 | return this.each(function() { 4 | var fieldname = 'preview'; 5 | var field = $(this); 6 | var select = $('.selectbox-preview'); 7 | 8 | // react on option change 9 | select.on('change', function() { 10 | var container = $('.preview').remove(); 11 | var val = $(this).val(); 12 | if(val == '') { 13 | return; 14 | } else { 15 | $.fn.ajaxPreview(fieldname, val); 16 | } 17 | }); 18 | 19 | }); 20 | 21 | }; 22 | 23 | // Ajax function 24 | $.fn.ajaxPreview = function(fieldname, val) { 25 | var blueprintFieldname = $('.selectbox-preview').attr('name'); 26 | var baseURL = window.location.href.replace(/(\/edit.*)/g, '/field') + '/' + blueprintFieldname + '/' + fieldname; 27 | var data = {page: val}; 28 | $.ajax({ 29 | url: baseURL + '/previewer', 30 | type: 'POST', 31 | data: data, 32 | dataType: "json", 33 | success: function(response) { 34 | 35 | var container = $('.field-name-' + blueprintFieldname); 36 | container.append('
'); 37 | $('.preview iframe')[0].contentDocument.write(response.html); 38 | 39 | } 40 | }); 41 | }; 42 | 43 | })(jQuery); 44 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## Kirby Preview field 2 | 3 | **I'm creating this for my personal use in a project and it is still under development. Feel free to use at your own risk.** 4 | 5 | Let's you choose a page from a select field and shows a preview of it in an iframe below the field to allow users to copy and paste stuff into a field of a new page (for example, if they want to compose a newsletter from existing content). It is possible to define a template extension for dedicated preview templates, e.g. if you want to show the raw contents of the page instead of a heavily formatted page. 6 | 7 | 8 | ![](preview.png) 9 | ![](raw-content.png) 10 | ## Installation 11 | 12 | ### Download 13 | 14 | [Download the files](https://github.com/texnixe/kirby-preview/archive/master.zip) and place them inside `site/plugins/preview`. 15 | 16 | ### Kirby CLI 17 | Installing via Kirby's [command line interface](https://github.com/getkirby/cli): 18 | 19 | $ kirby plugin:install texnixe/kirby-preview 20 | 21 | To update Preview, run: 22 | 23 | $ kirby plugin:update texnixe/kirby-preview 24 | 25 | ### Git Submodule 26 | You can add the Preview plugin as a Git submodule. 27 | 28 | $ cd your/project/root 29 | $ git submodule add https://github.com/texnixe/kirby-preview.git site/plugins/preview 30 | $ git submodule update --init --recursive 31 | $ git commit -am "Add Preview plugin" 32 | 33 | Run these commands to update the plugin: 34 | 35 | $ cd your/project/root 36 | $ git submodule foreach git checkout master 37 | $ git submodule foreach git pull 38 | $ git commit -am "Update submodules" 39 | $ git submodule update --init --recursive 40 | 41 | ## Usage 42 | 43 | In your blueprint: 44 | 45 | ``` 46 | previewPage: 47 | label: Select a page 48 | type: preview 49 | options: query 50 | query: 51 | page: blog 52 | fetch: children 53 | value: '{{uri}}' 54 | ``` 55 | 56 | Make sure to set the value to `uri` and to only fetch pages, not files. 57 | 58 | ## Options 59 | 60 | ### preview.template.extension 61 | 62 | You can define a template extension for dedicated preview templates, for example, if you want to remove the navigation or other unneeded stuff from the template. If a file with the given extension does not exist, the plugin falls back to the template without the extension. 63 | ``` 64 | c::set('preview.template.extension', 'raw'); 65 | ``` 66 | 67 | 68 | 69 | ## Credits: 70 | 71 | [@jenstornell](https://github.com/jenstornell): preview class of the [Kirby Reveal plugin](https://github.com/jenstornell/kirby-reveal) 72 | 73 | ## License 74 | 75 | Kirby review is open-sourced software licensed under the MIT license. 76 | 77 | Copyright © 2017 Sonja Broda info@texniq.de https://www.texniq.de 78 | -------------------------------------------------------------------------------- /fields/preview/preview.php: -------------------------------------------------------------------------------- 1 | array( 7 | 'script.js' 8 | ) 9 | ); 10 | 11 | public function __construct() { 12 | $this->type = 'preview'; 13 | //$this->label = l::get('fields.map.label', 'Add Location'); 14 | $this->options = array(); 15 | //$this->placeholder = $this->options['placeholder']; 16 | 17 | } 18 | public function input() { 19 | 20 | $select = new Brick('select'); 21 | $select->addClass('selectbox selectbox-preview'); 22 | $select->attr(array( 23 | 'name' => $this->name(), 24 | 'id' => $this->id(), 25 | 'required' => $this->required(), 26 | 'autocomplete' => $this->autocomplete(), 27 | 'autofocus' => $this->autofocus(), 28 | 'readonly' => $this->readonly(), 29 | 'disabled' => $this->disabled(), 30 | //'placeholder' => $this->i18n($this->placeholder()), 31 | )); 32 | 33 | $default = $this->default(); 34 | 35 | if(!$this->required()) { 36 | $select->append($this->option('', '', $this->value() == '')); 37 | } 38 | 39 | if($this->readonly()) { 40 | $select->attr('tabindex', '-1'); 41 | } 42 | 43 | foreach($this->options() as $value => $text) { 44 | $select->append($this->option($value, $text, $this->value() == $value)); 45 | } 46 | 47 | $inner = new Brick('div'); 48 | $inner->addClass('selectbox-wrapper'); 49 | $inner->append($select); 50 | 51 | $wrapper = new Brick('div'); 52 | $wrapper->addClass('input input-with-selectbox'); 53 | $wrapper->append($inner); 54 | $wrapper->attr('data-field', 'preview'); 55 | 56 | if($this->readonly()) { 57 | $wrapper->addClass('input-is-readonly'); 58 | } else { 59 | $wrapper->attr('data-focus', 'true'); 60 | } 61 | 62 | return $wrapper; 63 | 64 | } 65 | 66 | 67 | public function options() { 68 | return FieldOptions::build($this); 69 | } 70 | 71 | public function option($value, $text, $selected = false) { 72 | return new Brick('option', $this->i18n($text), array( 73 | 'value' => $value, 74 | 'selected' => $selected 75 | )); 76 | } 77 | 78 | public function result() { 79 | return null; 80 | } 81 | 82 | 83 | 84 | public function routes() { 85 | return array( 86 | array( 87 | 'pattern' => 'previewer', 88 | 'method' => 'POST', 89 | 'action' => function() { 90 | 91 | // get post data 92 | $data = kirby()->request()->data(); 93 | $html = ''; 94 | 95 | // find the page 96 | $page = panel()->site()->page($data['page']); 97 | 98 | // get the format extension for dedicated template 99 | $format = c::get('preview.template.extension')? '.' . c::get('preview.template.extension'): ''; 100 | 101 | $file = kirby()->roots()->templates() . DS . $page->template() . $format . '.php'; 102 | 103 | if(file_exists($file)) { 104 | $templateFile = $file; 105 | } else { 106 | $templateFile = $page->templatefile(); 107 | } 108 | // create a new preview instance 109 | $preview = new Preview(kirby()); 110 | 111 | // render content 112 | $html .= $preview->render($templateFile, array(), $page); 113 | 114 | return json_encode(array( 115 | 'html' => $html, 116 | )); 117 | } 118 | ) 119 | ); 120 | } 121 | 122 | } 123 | --------------------------------------------------------------------------------