WordPress.org
Get WordPress

Plugin Directory

Changeset 2174760


Ignore:
Timestamp:
10/17/2019 09:19:27 AM (6 years ago)
Author:
iseulde
Message:

v0.0.5

Location:
slide/trunk
Files:
1 added
5 edited

Legend:

Unmodified
Added
Removed

  • slide/trunk/index.js

    r2174452 r2174760  
    22  i18n,
    33  blocks,
    4   editor,
    54  element,
    65  richText,
    … …  
    98  data,
    109  components,
    11   blockEditor
     10  blockEditor,
     11  url
    1212}) => {
    1313  const { __ } = i18n;
    1414  const { registerBlockType, createBlock } = blocks;
    15   const { RichTextToolbarButton } = editor;
    1615  const { createElement: e, Fragment } = element;
    1716  const { registerFormatType, toggleFormat } = richText;
    … …  
    1918  const { PluginDocumentSettingPanel } = editPost;
    2019  const { useSelect, useDispatch, subscribe, select, dispatch } = data;
    21   const { TextareaControl, ColorPicker, PanelBody, RangeControl, TextControl, SelectControl, ToggleControl, Button, FocalPointPicker } = components;
    22   const { MediaUpload, __experimentalGradientPickerControl, InnerBlocks, InspectorControls } = blockEditor;
     20  const { TextareaControl, ColorPicker, PanelBody, RangeControl, TextControl, SelectControl, ToggleControl, Button, FocalPointPicker, ExternalLink } = components;
     21  const { MediaUpload, __experimentalGradientPickerControl, InnerBlocks, InspectorControls, RichTextToolbarButton } = blockEditor;
     22  const { addQueryArgs } = url;
    2323  const colorKey = 'presentation-color';
    2424  const bgColorKey = 'presentation-background-color';
     25  const backgroundGradientKey = 'presentation-background-gradient';
     26  const backgroundUrlKey = 'presentation-background-url';
     27  const backgroundIdKey = 'presentation-background-id';
     28  const backgroundPositionKey = 'presentation-background-position';
     29  const backgroundOpacityKey = 'presentation-background-opacity';
    2530  const cssKey = 'presentation-css';
    2631  const fontSizeKey = 'presentation-font-size';
    … …  
    5257        select('core/editor').getEditedPostAttribute('meta')
    5358      );
     59      const link = useSelect((select) =>
     60        select('core/editor').getCurrentPost('meta').link
     61      );
    5462      const { editPost } = useDispatch('core/editor');
    5563      const updateMeta = (value, key) => editPost({
    5664        meta: { ...meta, [key]: value }
    5765      });
     66      const rules = {
     67        color: meta[colorKey] || '#000',
     68        'background-color': meta[bgColorKey] || '#fff',
     69        'background-image': meta[backgroundGradientKey] || 'none',
     70        'font-size': (meta[fontSizeKey] || '42') + 'px',
     71        'font-family': meta[fontFamilyKey] || 'Helvetica, sans-serif'
     72      };
     73
     74      const backgroundRules = {
     75        'background-image': meta[backgroundUrlKey] ? `url("${meta[backgroundUrlKey]}")` : 'none',
     76        'background-size': 'cover',
     77        'background-position': meta[backgroundPositionKey] ? meta[backgroundPositionKey] : '50% 50%',
     78        opacity: meta[backgroundOpacityKey] ? meta[backgroundOpacityKey] / 100 : 1
     79      };
    5880
    5981      return [
    60         e('style', null,
    61 `
    62 ${cssPrefix} section {
    63     color: ${meta[colorKey]};
    64     background: ${meta[bgColorKey]};
    65     font-size: ${meta[fontSizeKey] || '42'}px;
    66     font-family: ${meta[fontFamilyKey] || 'Helvetica, sans-serif'};
    67 }
    68 `
    69         ),
     82        ...Object.keys(rules).map((key) => {
     83          return e(
     84            'style',
     85            null,
     86            `${cssPrefix} section {${key}:${rules[key]}}`
     87          );
     88        }),
     89        ...Object.keys(backgroundRules).map((key) => {
     90          return e(
     91            'style',
     92            null,
     93            `${cssPrefix} section .wp-block-slide-slide__background {${key}:${backgroundRules[key]}}`
     94          );
     95        }),
    7096        e('style', null, meta[cssKey]),
    7197        e(
    … …  
    78104          e(RangeControl, {
    79105            label: __('Font Size', 'slide'),
    80             value: parseInt(meta[fontSizeKey], 10),
     106            value: meta[fontSizeKey] ? parseInt(meta[fontSizeKey], 10) : undefined,
    81107            min: 10,
    82108            max: 100,
     109            initialPosition: 42,
    83110            onChange: (value) => updateMeta(value + '', fontSizeKey)
    84111          }),
    … …  
    103130            icon: 'art'
    104131          },
    105           e(__experimentalGradientPickerControl, {
    106             onChange: (value) => updateMeta(value, bgColorKey),
    107             value: meta[bgColorKey]
    108           }),
    109132          e(ColorPicker, {
    110133            disableAlpha: true,
    111134            label: __('Background Color', 'slide'),
    112135            color: meta[bgColorKey],
    113             onChangeComplete: (value) => updateMeta(value.hex, bgColorKey)
     136            onChangeComplete: (value) => {
     137              editPost({
     138                meta: {
     139                  ...meta,
     140                  [bgColorKey]: value.hex,
     141                  [backgroundGradientKey]: ''
     142                }
     143              });
     144            }
     145          }),
     146          __('Experimental:'),
     147          e(__experimentalGradientPickerControl, {
     148            onChange: (value) => updateMeta(value, backgroundGradientKey),
     149            value: meta[backgroundGradientKey]
     150          }),
     151          !!meta[backgroundUrlKey] && e(RangeControl, {
     152            label: __('Opacity', 'slide'),
     153            help: __('May be overridden by the block!'),
     154            value: meta[backgroundOpacityKey] ? 100 - parseInt(meta[backgroundOpacityKey], 10) : undefined,
     155            min: 0,
     156            max: 100,
     157            initialPosition: 0,
     158            onChange: (value) => {
     159              editPost({
     160                meta: {
     161                  ...meta,
     162                  [backgroundOpacityKey]: 100 - value + ''
     163                }
     164              });
     165            }
     166          })
     167        ),
     168        e(
     169          PluginDocumentSettingPanel,
     170          {
     171            name: 'slide-background-image',
     172            title: __('Background Image', 'slide'),
     173            icon: 'format-image'
     174          },
     175          e(MediaUpload, {
     176            onSelect: (media) => {
     177              if (!media || !media.url) {
     178                editPost({
     179                  meta: {
     180                    ...meta,
     181                    [backgroundUrlKey]: undefined,
     182                    [backgroundIdKey]: undefined,
     183                    [backgroundPositionKey]: undefined,
     184                    [backgroundOpacityKey]: undefined
     185                  }
     186                });
     187                return;
     188              }
     189
     190              editPost({
     191                meta: {
     192                  ...meta,
     193                  [backgroundUrlKey]: media.url,
     194                  [backgroundIdKey]: media.id + ''
     195                }
     196              });
     197            },
     198            allowedTypes: ALLOWED_MEDIA_TYPES,
     199            value: meta[backgroundIdKey] ? parseInt(meta[backgroundIdKey], 10) : undefined,
     200            render: ({ open }) => e(Button, {
     201              isDefault: true,
     202              onClick: open
     203            }, meta[backgroundUrlKey] ? __('Change') : __('Add Background Image'))
     204          }),
     205          ' ',
     206          !!meta[backgroundUrlKey] && e(Button, {
     207            isDefault: true,
     208            onClick: () => {
     209              editPost({
     210                meta: {
     211                  ...meta,
     212                  [backgroundUrlKey]: undefined,
     213                  [backgroundIdKey]: undefined,
     214                  [backgroundPositionKey]: undefined,
     215                  [backgroundOpacityKey]: undefined
     216                }
     217              });
     218            }
     219          }, __('Remove')),
     220          e('br'), e('br'),
     221          !!meta[backgroundUrlKey] && e(FocalPointPicker, {
     222            label: __('Focal Point Picker'),
     223            url: meta[backgroundUrlKey],
     224            value: (() => {
     225              if (!meta[backgroundPositionKey]) {
     226                return;
     227              }
     228
     229              let [x, y] = meta[backgroundPositionKey].split(' ');
     230
     231              x = parseFloat(x) / 100;
     232              y = parseFloat(y) / 100;
     233
     234              return { x, y };
     235            })(),
     236            onChange: (focalPoint) => {
     237              editPost({
     238                meta: {
     239                  ...meta,
     240                  [backgroundPositionKey]: `${focalPoint.x * 100}% ${focalPoint.y * 100}%`
     241                }
     242              });
     243            }
     244          }),
     245          !!meta[backgroundUrlKey] && e(RangeControl, {
     246            label: __('Opacity', 'slide'),
     247            help: __('May be overridden by the block!'),
     248            value: meta[backgroundOpacityKey] ? parseInt(meta[backgroundOpacityKey], 10) : undefined,
     249            min: 0,
     250            max: 100,
     251            initialPosition: 100,
     252            onChange: (value) => {
     253              editPost({
     254                meta: {
     255                  ...meta,
     256                  [backgroundOpacityKey]: value + ''
     257                }
     258              });
     259            }
    114260          })
    115261        ),
    … …  
    176322            onChange: (value) => updateMeta(value + '', progressKey)
    177323          })
     324        ),
     325        e(
     326          PluginDocumentSettingPanel,
     327          {
     328            name: 'slide-pdf',
     329            title: __('PDF (Experimental)', 'slide'),
     330            icon: 'page'
     331          },
     332          e(
     333            'p',
     334            {},
     335            e(
     336              ExternalLink,
     337              {
     338                href: addQueryArgs(link, { 'print-pdf': true }),
     339                target: '_blank'
     340              },
     341              __('Print (Save as PDF).', 'slides')
     342            ),
     343            e('br'),
     344            __('Enable backgrounds and remove margins.', 'slides')
     345          )
    178346        )
    179347      ];
    … …  
    211379      }
    212380    },
    213     edit: ({ attributes, setAttributes, className }) =>
    214       e(
     381    edit: ({ attributes, setAttributes, className }) => {
     382      const meta = useSelect((select) =>
     383        select('core/editor').getEditedPostAttribute('meta')
     384      );
     385
     386      return e(
    215387        Fragment,
    216388        null,
    … …  
    244416              onChangeComplete: ({ hex: color }) =>
    245417                setAttributes({ color })
    246             })
     418            }),
     419            !!attributes.color && e(Button, {
     420              isDefault: true,
     421              onClick: () => {
     422                setAttributes({
     423                  color: undefined
     424                });
     425              }
     426            }, __('Remove'))
    247427          ),
    248428          e(
    … …  
    260440                setAttributes({ backgroundColor })
    261441            }),
    262             !!attributes.backgroundUrl && e(RangeControl, {
     442            (attributes.backgroundUrl || meta[backgroundUrlKey]) &&
     443            e(RangeControl, {
    263444              label: __('Opacity', 'slide'),
    264               value: 100 - parseInt(attributes.backgroundOpacity, 10),
     445              value: attributes.backgroundOpacity ? 100 - parseInt(attributes.backgroundOpacity, 10) : undefined,
    265446              min: 0,
    266447              max: 100,
    267               onChange: (value) => setAttributes({
    268                 backgroundOpacity: 100 - value + ''
    269               })
    270             })
     448              initialPosition: 0,
     449              onChange: (value) => {
     450                if (value === undefined) {
     451                  setAttributes({
     452                    backgroundOpacity: undefined
     453                  });
     454                } else {
     455                  setAttributes({
     456                    backgroundOpacity: 100 - value + ''
     457                  });
     458                }
     459              }
     460            }),
     461            !!attributes.backgroundColor && e(Button, {
     462              isDefault: true,
     463              onClick: () => {
     464                setAttributes({
     465                  backgroundColor: undefined
     466                });
     467              }
     468            }, __('Remove'))
    271469          ),
    272470          e(
    … …  
    283481                    backgroundUrl: undefined,
    284482                    backgroundId: undefined,
    285                     backgroundPosition: undefined,
    286                     backgroundOpacity: undefined
     483                    focalPoint: undefined
    287484                  });
    288485                  return;
    … …  
    308505                  backgroundUrl: undefined,
    309506                  backgroundId: undefined,
    310                   backgroundPosition: undefined,
    311                   backgroundOpacity: undefined
     507                  focalPoint: undefined
    312508                });
    313509              }
    … …  
    322518            !!attributes.backgroundUrl && e(RangeControl, {
    323519              label: __('Opacity', 'slide'),
    324               value: parseInt(attributes.backgroundOpacity, 10),
     520              value: attributes.backgroundOpacity ? parseInt(attributes.backgroundOpacity, 10) : undefined,
    325521              min: 0,
    326522              max: 100,
     523              initialPosition: 100,
    327524              onChange: (value) => setAttributes({
    328525                backgroundOpacity: value + ''
    … …  
    337534            style: {
    338535              color: attributes.color || undefined,
    339               backgroundColor: attributes.backgroundColor || undefined
     536              backgroundColor: attributes.backgroundColor || undefined,
     537              // If a background color is set, disable the global gradient.
     538              backgroundImage: attributes.backgroundColor ? 'none' : undefined
    340539            }
    341540          },
    … …  
    346545              style: {
    347546                backgroundImage: attributes.backgroundUrl ? `url("${attributes.backgroundUrl}")` : undefined,
    348                 backgroundSize: 'cover',
    349                 backgroundPosition: attributes.focalPoint ? `${attributes.focalPoint.x * 100}% ${attributes.focalPoint.y * 100}%` : '50% 50%',
     547                backgroundPosition: attributes.focalPoint ? `${attributes.focalPoint.x * 100}% ${attributes.focalPoint.y * 100}%` : undefined,
    350548                opacity: attributes.backgroundOpacity ? attributes.backgroundOpacity / 100 : undefined
    351549              }
    … …  
    354552          e(InnerBlocks)
    355553        )
    356       ),
     554      );
     555    },
    357556    save: ({ attributes }) => e(
    358557      'section',

  • slide/trunk/index.php

    r2174452 r2174760  
    55 * Plugin URI:  https://wordpress.org/plugins/slide/
    66 * Description: Allows you to create presentations with the block editor.
    7  * Version:     0.0.4
     7 * Version:     0.0.5
    88 * Author:      Ella van Durpe
    99 * Author URI:  https://ellavandurpe.com
    … …  
    4949            'wp-element',
    5050            'wp-i18n',
    51             'wp-editor',
    5251            'wp-blocks',
    5352            'wp-rich-text',
    … …  
    5756            'wp-components',
    5857            'wp-block-editor',
     58            'wp-url',
    5959        ),
    6060        filemtime( dirname( __FILE__ ) . '/index.js' ),
    … …  
    118118    );
    119119
     120    if ( isset( $_GET[ 'print-pdf' ] ) ) {
     121        wp_add_inline_script(
     122            'slide-reveal',
     123            'window.print()'
     124        );
     125
     126        wp_enqueue_style(
     127            'slide-reveal-pdf',
     128            plugins_url( 'reveal/pdf.min.css', __FILE__ ),
     129            array(),
     130            '3.8.0'
     131        );
     132    }
     133
    120134    wp_enqueue_style(
    121135        'slide-common',

  • slide/trunk/readme.md

    r2174452 r2174760  
    66    Requires PHP:      5.6
    77    Tested up to:      5.3
    8     Stable tag:        0.0.4
     8    Stable tag:        0.0.5
    99    License:           GPL-2.0-or-later
    1010    License URI:       http://www.gnu.org/licenses/gpl-2.0.html

  • slide/trunk/register.php

    r2173048 r2174760  
    4646    'color',
    4747    'background-color',
     48    'background-gradient',
     49    'background-url',
     50    'background-id',
     51    'background-position',
     52    'background-opacity',
    4853    'font-size',
    4954    'font-family',

  • slide/trunk/template.php

    r2174452 r2174760  
    88            content: '\f211';
    99            top: 3px;
     10        }
     11
     12        @media print {
     13            .print-pdf #wpadminbar {
     14                display: none;
     15            }
    1016        }
    1117
    … …  
    2935        }
    3036
     37        /* Remove margin for admin bar. */
    3138        html {
    3239            margin-top: 0 !important;
    … …  
    3441
    3542        .reveal {
    36             background: <?php echo get_post_meta( get_the_ID(), 'presentation-background-color', true ) ?: '#fff'; ?>;
    3743            color: <?php echo get_post_meta( get_the_ID(), 'presentation-color', true ) ?: '#000'; ?>;
    3844            font-size: <?php echo get_post_meta( get_the_ID(), 'presentation-font-size', true ) ?: '42'; ?>px;
    3945            font-family: <?php echo get_post_meta( get_the_ID(), 'presentation-font-family', true ) ?: 'Helvetica, sans-serif'; ?>;
     46        }
     47
     48        /* Extra specificity to override reveal background. */
     49        .reveal .slide-background {
     50            background-color: <?php echo get_post_meta( get_the_ID(), 'presentation-background-color', true ) ?: '#fff'; ?>;
     51            background-image: <?php echo get_post_meta( get_the_ID(), 'presentation-background-gradient', true ) ?: 'none'; ?>;
     52        }
     53
     54        /* If a background color is set, disable the global gradient. */
     55        .reveal .slide-background[style*="background-color"] {
     56            background-image: none;
     57        }
     58
     59        .reveal .slide-background .slide-background-content {
     60            background-image: url("<?php echo get_post_meta( get_the_ID(), 'presentation-background-url', true ) ?: 'none'; ?>");
     61            background-position: <?php echo get_post_meta( get_the_ID(), 'presentation-background-position', true ) ?: '50% 50%'; ?>;
     62            opacity: <?php echo (int) get_post_meta( get_the_ID(), 'presentation-background-opacity', true ) / 100 ?: '1'; ?>;
    4063        }
    4164
Note: See TracChangeset for help on using the changeset viewer.