Initial commit

site/OFF_plugins/embed/field/assets/css/field.css

@@ -0,0 +1 @@
+.field-embed-preview{position:relative;margin-top:-2px;border:2px solid #ddd;border-top-width:0;background-color:#ddd;overflow-y:auto}.field-embed-preview__bucket{-webkit-transition:opacity .5s;transition:opacity .5s;text-align:center}.field-embed-preview__bucket iframe,.field-embed-preview__bucket object{margin-right:auto;margin-left:auto}.field-embed-preview__bucket .embed--rich{padding:.6em}.field-embed-preview__bucket .embed--link>.embed--link__fallback{display:inline-block;padding:.6em}.field-embed-preview__bucket .embed--link>.embed--link__fallback>a{border-bottom:2px solid #bbb}.field-embed-preview__bucket .embed--error{padding:.6em;font-size:.75em;font-weight:600}.field-embed-preview__bucket .embed--error>span{display:block;font-weight:400}.field-embed-preview__loading{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:opacity .5s;transition:opacity .5s;font-size:.8em;font-weight:600;opacity:0}.field-embed-info{display:none;position:relative;margin-top:-2px;padding:.6em;border:2px solid #ddd;border-top-width:0;background-color:#fff}.field-embed-info a{font-weight:600}.field-embed-info a[href]{color:#8dad28}.field-embed-info a[href]:hover{opacity:.75}.field-embed-info__title{display:block;font-size:.95em;font-weight:600;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.field-embed-info>span:not(.field-embed-info__title){font-size:.8em}.field-embed-info>span:not(:first-child):not(:last-child)::after{content:' / '}.field-content+.field-embed-info{border-top-width:1px;border-top-color:#ddd!important}.field-embed-cheatsheet{position:absolute;top:1px;right:4px}.field-embed-cheatsheet__icon{cursor:help}.field-embed-cheatsheet__bucket{display:none;position:absolute;width:100%;margin-top:8px;padding:.35em .5em;background-color:rgba(255,255,255,.95);z-index:1}.field-embed-cheatsheet:hover+.field-embed-cheatsheet__bucket{display:block}.field-embed-cheatsheet__table{width:100%;font-size:.8em;font-weight:400}.field-embed-cheatsheet__table td{padding:0 .5em}.field-embed-cheatsheet__th{font-weight:700}.field-embed-cheatsheet__th td{border-bottom:1px solid #ddd}

site/OFF_plugins/embed/field/assets/js/field.js

@@ -0,0 +1,229 @@
+(function($) {
+  $.fn.embedfield = function() {
+
+    // ================================================
+    //  Make icon clickable
+    // ================================================
+
+    var clickableIcon = function($this) {
+      var icon = $this.next('.field-icon');
+
+      icon.css({
+        'cursor': 'pointer',
+        'pointer-events': 'auto'
+      });
+
+      icon.on('click', function() {
+        var url = $.trim($this.val());
+        if(url !== '' && $this.is(':valid')) {
+          window.open(url);
+        } else {
+          $this.focus();
+        }
+      });
+    };
+
+
+    // ================================================
+    //  Update embed
+    // ================================================
+
+    var updateEmbed = function($this, preview, info, sheet) {
+      var url = $.trim($this.val());
+
+      if(!$this.data('embedurl') || url !== $this.data('embedurl')) {
+        $this.data('embedurl', url);
+
+        if(url === '') {
+          hidePreview(preview);
+          hideInfo(info);
+          setCheatsheet(sheet, {parameters: ''});
+
+        } else if($this.is(':valid')) {
+          clearPreview(preview);
+
+          $.ajax({
+            url:     $this.data('ajax') + 'preview',
+            type:    'POST',
+            data:    {
+              url:  url,
+              code: preview.wrapper.length === 0 ? 'false' : 'true'
+            },
+            success: function(data) {
+              showPreview(preview, data);
+              setCheatsheet(sheet, data);
+
+              if(data.success !== 'false') {
+                showInfo(info, data);
+              } else {
+                hideInfo(info);
+              }
+            },
+          });
+        }
+
+      }
+    };
+
+
+    // ================================================
+    //  Set preview section
+    // ================================================
+
+    var showPreview = function(preview, data) {
+      preview.load.css('opacity', '0');
+      preview.bucket.html(data.code).css('opacity', '1');
+      preview.bucket.find('.embed__thumb').click(pluginEmbedLoadLazyVideo);
+    };
+
+    var clearPreview = function(preview) {
+      preview.bucket.css('opacity', '0');
+      preview.load.css('opacity', '1');
+    };
+
+    var hidePreview = function(preview) {
+      preview.bucket.css('opacity', '0').html('');
+    };
+
+
+    // ================================================
+    //  Set info section
+    // ================================================
+
+    var showInfo = function(info, data) {
+      if(data.title) {
+        info.title.html(data.title).show();
+      } else {
+        info.title.hide();
+      }
+
+      if(data.authorName) {
+        info.author.show().find('a').attr('href', data.authorUrl ).html(data.authorName);
+      } else {
+        info.author.hide();
+      }
+
+      if(data.providerName) {
+        info.provider.show().find('a').attr('href', data.providerUrl ).html(data.providerName);
+      } else {
+        info.provider.hide();
+      }
+
+      if(data.type) {
+        info.type.show().html(data.type);
+      } else {
+        info.type.hide();
+      }
+
+      if(info.wrapper.prop('style').display === '') {
+        info.wrapper.show();
+      } else {
+        info.wrapper.slideDown();
+      }
+    };
+
+    var hideInfo = function(info) {
+      info.wrapper.hide();
+    };
+
+
+    // ================================================
+    //  Set cheatsheet
+    // ================================================
+
+    var setCheatsheet = function(sheet, data) {
+      sheet.bucket.html(data.parameters);
+      if(data.parameters === '') {
+        sheet.icon.hide();
+      } else {
+        sheet.icon.show();
+      }
+    };
+
+    // ================================================
+    //  Fix borders
+    // ================================================
+
+    var showBorder = function($this, preview, info) {
+      if(!$this.parents('.field').hasClass('field-with-error')) {
+        setBorder(preview, info, '#8dae28');
+      } else {
+        setBorder(preview, info, '#000');
+      }
+    };
+
+    var hideBorder = function(preview, info) {
+      setBorder(preview, info, '');
+    };
+
+    var setBorder = function(preview, info, color) {
+      preview.wrapper.add(info.wrapper).css('border-color', color);
+    };
+
+
+    // ================================================
+    //  Initialization
+    // ================================================
+
+    return this.each(function() {
+
+      var $this = $(this);
+
+      if($this.data('embedfield')) {
+        return;
+      } else {
+        $this.data('embedfield', true);
+      }
+
+      // make icon clickable
+      clickableIcon($this);
+
+      // collect all elements
+      var inputTimer;
+      var preview = $this.parent().nextAll('.field-embed-preview');
+      preview     = {
+        wrapper: preview,
+        bucket:  preview.find('.field-embed-preview__bucket'),
+        load:    preview.find('.field-embed-preview__loading'),
+      };
+      var info    = $this.parent().nextAll('.field-embed-info');
+      info        = {
+        wrapper:  info,
+        title:    info.find('.field-embed-info__title'),
+        author:   info.find('.field-embed-info__author'),
+        provider: info.find('.field-embed-info__provider'),
+        type:     info.find('.field-embed-info__type')
+      };
+      var sheet   = $this.parent().prev().find('.field-embed-cheatsheet');
+      sheet       = {
+        wrapper: sheet,
+        icon:    sheet.find('.field-embed-cheatsheet__icon'),
+        bucket:  sheet.next(),
+      };
+
+      // update embed on input blur
+      $this.on('blur', function() {
+        window.clearTimeout(inputTimer);
+        updateEmbed($this, preview, info, sheet);
+      });
+
+      // update embed on input change (delayed)
+      $this.bind('input embed.change', function() {
+        window.clearTimeout(inputTimer);
+        inputTimer = window.setTimeout(function(){
+          updateEmbed($this, preview, info, sheet);
+        }, 1000);
+      });
+
+      // update embed on load
+      updateEmbed($this, preview, info, sheet);
+
+      // fix border colors on input focus and blur
+      $this.focus(function(){
+        showBorder($this, preview, info);
+      }).blur(function(){
+        hideBorder(preview, info);
+      });
+    });
+  };
+})(jQuery);

site/OFF_plugins/embed/field/assets/scss/field.scss

@@ -0,0 +1,152 @@
+
+$bgcolor: #ddd;
+$link:    #bbb;
+$green:   #8dad28;
+$white:   #fff;
+
+.field-embed {
+
+  // ================================================
+  //  Preview display section
+  // ================================================
+
+  &-preview {
+    position:         relative;
+    margin-top:       -2px;
+    border:           2px solid $bgcolor;
+    border-top-width: 0;
+    background-color: $bgcolor;
+    overflow-y:       auto;
+
+    &__bucket {
+      transition: opacity .5s;
+      text-align: center;
+
+      iframe,
+      object {
+        margin-right: auto;
+        margin-left:  auto;
+      }
+
+      // actual embed
+      .embed {
+        &--rich { padding: .6em; }
+
+        &--link > .embed--link__fallback {
+          display: inline-block;
+          padding: .6em;
+
+          > a { border-bottom: 2px solid $link; }
+        }
+
+        &--error {
+          padding:     .6em;
+          font-size:   .75em;
+          font-weight: 600;
+
+          > span {
+            display:     block;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+
+    &__loading {
+      position:    absolute;
+      top:         50%;
+      left:        50%;
+      transform:   translate(-50%, -50%);
+      transition:  opacity .5s;
+      font-size:   .8em;
+      font-weight: 600;
+      opacity:     0;
+    }
+
+  }
+
+  // ================================================
+  //  Info section
+  // ================================================
+
+  &-info {
+    display:          none;
+    position:         relative;
+    margin-top:       -2px;
+    padding:          .6em;
+    border:           2px solid $bgcolor;
+    border-top-width: 0;
+    background-color: $white;
+
+    a {
+      font-weight: 600;
+
+      &[href] {
+        color: $green;
+
+        &:hover { opacity: .75; }
+      }
+    }
+
+    &__title {
+      display:       block;
+      font-size:     .95em;
+      font-weight:   600;
+      text-overflow: ellipsis;
+      white-space:   nowrap;
+      overflow:      hidden;
+    }
+
+    > span {
+      &:not(.field-embed-info__title) { font-size: .8em; }
+      &:not(:first-child):not(:last-child)::after { content: ' / '; }
+    }
+
+    .field-content + & {
+      border-top-width: 1px;
+      border-top-color: $bgcolor !important;
+    }
+  }
+
+
+  // ================================================
+  //  Cheatsheet overlay
+  // ================================================
+
+  &-cheatsheet {
+    position: absolute;
+    top:      1px;
+    right:    4px;
+
+    &__icon { cursor: help; }
+
+    &__bucket {
+      display:          none;
+      position:         absolute;
+      width:            100%;
+      margin-top:       8px;
+      padding:          .35em .5em;
+      background-color: rgba($white, .95);
+      z-index:          1;
+
+      .field-embed-cheatsheet:hover + & { display: block; }
+    }
+
+    &__table {
+      width:       100%;
+      font-size:   .8em;
+      font-weight: 400;
+
+      td { padding: 0 .5em; }
+    }
+
+    &__th {
+      font-weight: 700;
+
+      td { border-bottom: 1px solid $bgcolor; }
+    }
+
+  }
+
+
+}

site/OFF_plugins/embed/field/embed.php

@@ -0,0 +1,75 @@
+<?php
+
+class EmbedField extends UrlField {
+
+  public $preview    = true;
+  public $info       = true;
+  public $cheatsheet = false;
+  public $height     = 'none';
+
+  public static $assets = [
+    'css' => [
+      '../../../assets/css/embed.css',
+      'field.css'
+    ],
+    'js' => [
+      '../../../assets/js/embed.js',
+      'field.js'
+    ]
+  ];
+
+  public function __construct() {
+    parent::__construct();
+
+    $this->type = 'embed';
+    $this->icon = 'object-group';
+
+    $this->translations();
+  }
+
+  public function input() {
+    $input = parent::input();
+    $input->data('field', 'embedfield');
+    $input->data('ajax', url('api/plugin/embed/'));
+    return $input;
+  }
+
+  public function template() {
+    $template = parent::template();
+
+    if($this->preview) {
+      $template->append($this->tpl('preview', [
+        'height' => $this->height,
+      ]));
+    }
+
+    if($this->info) $template->append($this->tpl('info'));
+
+    return $template;
+  }
+
+  public function label() {
+    $label = parent::label();
+
+    if($this->cheatsheet) $label->append($this->tpl('cheatsheet'));
+
+    return $label;
+  }
+
+  protected function translations() {
+    $root = dirname(__DIR__) . DS . 'translations' . DS;
+
+    // Default (English)
+    require($root . 'en.php');
+
+    // Current panel language
+    if(file_exists($root . panel()->language()->code() . '.php')) {
+      require($root . panel()->language()->code() . '.php');
+    }
+  }
+
+  protected function tpl($file, $args = []) {
+    return tpl::load(__DIR__ . DS . 'templates' . DS . $file . '.php', $args);
+  }
+
+}

site/OFF_plugins/embed/field/templates/cheatsheet.php

@@ -0,0 +1,4 @@
+<div class="field-embed-cheatsheet">
+  <i class="field-embed-cheatsheet__icon fa fa-info-circle"></i>
+</div>
+<div class="field-embed-cheatsheet__bucket"></div>

site/OFF_plugins/embed/field/templates/info.php

@@ -0,0 +1,10 @@
+<div class="field-embed-info">
+  <span class="field-embed-info__title"></span>
+  <span class="field-embed-info__type"></span>
+  <span class="field-embed-info__author">
+    <?= l('plugin.embed.panelfield.by') ?> <a href=""></a>
+  </span>
+  <span class="field-embed-info__provider">
+    <?= l('plugin.embed.panelfield.provider') ?> <a href=""></a>
+  </span>
+</div>

site/OFF_plugins/embed/field/templates/preview.php

@@ -0,0 +1,6 @@
+<div class="field-embed-preview" style="max-height: <?= $height ?>">
+  <div class="field-embed-preview__loading">
+    <?= l('plugin.embed.panelfield.loading') ?>
+  </div>
+  <div class="field-embed-preview__bucket"></div>
+</div>