Skip to content

Commit

Permalink
webcomponents to the resque 🚒
Browse files Browse the repository at this point in the history
  • Loading branch information
dgrammatiko committed Aug 28, 2017
1 parent 350268a commit 8509189
Show file tree
Hide file tree
Showing 7 changed files with 327 additions and 179 deletions.
44 changes: 25 additions & 19 deletions layouts/joomla/form/field/media.php
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,12 @@
{
$src = JText::_('JLIB_FORM_MEDIA_PREVIEW_EMPTY');
}

if ($showAsTooltip) {
$showPreview = 'tooltip';
} else {
$showPreview = 'static';
}
}

// The url for the modal
Expand All @@ -85,22 +91,21 @@
. $asset . '&author=' . $authorId)
. '&fieldid={field-media-id}&path=' . $folder);
?>
<div class="field-media-wrapper"
data-basepath="<?php echo JUri::root(); ?>"
data-root-folder="<?php echo ComponentHelper::getParams('com_media')->get('file_path', 'images'); ?>"
data-url="<?php echo $url; ?>"
data-modal=".modal"
data-modal-width="100%"
data-modal-height="400px"
data-input=".field-media-input"
data-button-select=".button-select"
data-button-clear=".button-clear"
data-button-save-selected=".button-save-selected"
data-preview="<?php echo $showPreview ? 'true' : 'false'; ?>"
data-preview-as-tooltip="<?php echo $showAsTooltip ? 'true' : 'false'; ?>"
data-preview-container=".field-media-preview"
data-preview-width="<?php echo $previewWidth; ?>"
data-preview-height="<?php echo $previewHeight; ?>"
<joomla-field-media class="field-media-wrapper"
basepath="<?php echo JUri::root(); ?>"
rootfolder="<?php echo ComponentHelper::getParams('com_media')->get('file_path', 'images'); ?>"
url="<?php echo $url; ?>"
modalcont=".modal"
modalwidth="100%"
modalheight="400px"
input=".field-media-input"
buttonselect=".button-select"
buttonclear=".button-clear"
buttonsaveselected=".button-save-selected"
preview="<?php echo $showPreview; ?>"
previewcontainer=".field-media-preview"
previewwidth="<?php echo $previewWidth; ?>"
previewheight="<?php echo $previewHeight; ?>"
>
<?php
// Render the modal
Expand All @@ -118,12 +123,13 @@
)
);

JHtml::_('script', 'system/fields/mediafield.min.js', array('version' => 'auto', 'relative' => true));
JHtml::_('webcomponent', ['joomla-field-media' => 'system/joomla-field-media.min.js'], ['relative' => true, 'version' => 'auto', 'detectBrowser' => false, 'detectDebug' => false]);
JText::script('JLIB_FORM_MEDIA_PREVIEW_EMPTY', true);
?>
<div class="input-group">
<?php if ($showPreview && $showAsTooltip) : ?>
<div rel="popover" class="input-group-addon pop-helper field-media-preview"
title="<?php echo JText::_('JLIB_FORM_MEDIA_PREVIEW_SELECTED_IMAGE'); ?>" data-content="<?php echo JText::_('JLIB_FORM_MEDIA_PREVIEW_EMPTY'); ?>"
title="<?php echo JText::_('JLIB_FORM_MEDIA_PREVIEW_SELECTED_IMAGE'); ?>"
data-original-title="<?php echo JText::_('JLIB_FORM_MEDIA_PREVIEW_SELECTED_IMAGE'); ?>" data-trigger="hover">
<span class="icon-eye" aria-hidden="true"></span>
</div>
Expand All @@ -136,4 +142,4 @@
</div>
<?php endif; ?>
</div>
</div>
</joomla-field-media>
159 changes: 0 additions & 159 deletions media/system/js/fields/mediafield.js

This file was deleted.

1 change: 0 additions & 1 deletion media/system/js/fields/mediafield.min.js

This file was deleted.

116 changes: 116 additions & 0 deletions media/system/webcomponents/joomla-field-media-es5.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _createClass = function () {
function a(a, b) {
for (var c, d = 0; d < b.length; d++) {
c = b[d], c.enumerable = c.enumerable || !1, c.configurable = !0, 'value' in c && (c.writable = !0), Object.defineProperty(a, c.key, c);
}
}return function (b, c, d) {
return c && a(b.prototype, c), d && a(b, d), b;
};
}();function _classCallCheck(a, b) {
if (!(a instanceof b)) throw new TypeError('Cannot call a class as a function');
}function _possibleConstructorReturn(a, b) {
if (!a) throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b && ('object' == (typeof b === 'undefined' ? 'undefined' : _typeof(b)) || 'function' == typeof b) ? b : a;
}function _inherits(a, b) {
if ('function' != typeof b && null !== b) throw new TypeError('Super expression must either be null or a function, not ' + (typeof b === 'undefined' ? 'undefined' : _typeof(b)));a.prototype = Object.create(b && b.prototype, { constructor: { value: a, enumerable: !1, writable: !0, configurable: !0 } }), b && (Object.setPrototypeOf ? Object.setPrototypeOf(a, b) : a.__proto__ = b);
}var JoomlaFieldMedia = function (a) {
function b() {
return _classCallCheck(this, b), _possibleConstructorReturn(this, (b.__proto__ || Object.getPrototypeOf(b)).call(this));
}return _inherits(b, a), _createClass(b, [{ key: 'attributeChangedCallback', value: function attributeChangedCallback(a, b, c) {
switch (a) {case 'basepath':case 'rootfolder':case 'url':case 'modalcont':case 'input':case 'buttonselect':case 'buttonclear':case 'buttonsaveselected':case 'previewContainer':
break;case 'modalwidth':case 'modalheight':case 'previewwidth':case 'previewheight':
break;case 'preview':
-1 < ['true', 'false', 'tooltip', 'static'].indexOf(c) && b !== c && (this.preview = c);break;default:}
} }, { key: 'basepath', get: function get() {
return this.getAttribute('basepath');
}, set: function set(a) {
this.setAttribute('basepath', a);
} }, { key: 'rootfolder', get: function get() {
return this.getAttribute('rootfolder');
}, set: function set(a) {
this.setAttribute('rootfolder', a);
} }, { key: 'url', get: function get() {
return this.getAttribute('url');
}, set: function set(a) {
this.setAttribute('url', a);
} }, { key: 'modalcont', get: function get() {
return this.getAttribute('modalcont');
}, set: function set(a) {
this.setAttribute('modalcont', a);
} }, { key: 'input', get: function get() {
return this.getAttribute('input');
}, set: function set(a) {
this.setAttribute('input', a);
} }, { key: 'buttonselect', get: function get() {
return this.getAttribute('buttonselect');
}, set: function set(a) {
this.setAttribute('buttonselect', a);
} }, { key: 'buttonclear', get: function get() {
return this.getAttribute('buttonclear');
}, set: function set(a) {
this.setAttribute('buttonclear', a);
} }, { key: 'buttonsaveselected', get: function get() {
return this.getAttribute('buttonsaveselected');
}, set: function set(a) {
this.setAttribute('buttonsaveselected', a);
} }, { key: 'modalwidth', get: function get() {
return this.getAttribute(parseInt('modalwidth', 10));
}, set: function set(a) {
this.setAttribute('modalwidth', a);
} }, { key: 'modalheight', get: function get() {
return this.getAttribute(parseInt('modalheight', 10));
}, set: function set(a) {
this.setAttribute('modalheight', a);
} }, { key: 'previewwidth', get: function get() {
return this.getAttribute('previewwidth');
}, set: function set(a) {
this.setAttribute('previewwidth', a);
} }, { key: 'previewheight', get: function get() {
return this.getAttribute('previewheight');
}, set: function set(a) {
this.setAttribute('previewheight', a);
} }, { key: 'preview', get: function get() {
return this.getAttribute('preview');
}, set: function set(a) {
this.setAttribute('preview', a);
} }, { key: 'previewcontainer', get: function get() {
return this.getAttribute('previewcontainer');
} }], [{ key: 'observedAttributes', get: function get() {
return ['basepath', 'rootfolder', 'url', 'modalcont', 'modalwidth', 'modalheight', 'input', 'buttonselect', 'buttonclear', 'buttonsaveselected', 'preview', 'previewwidth', 'previewheight'];
} }]), _createClass(b, [{ key: 'connectedCallback', value: function connectedCallback() {
var a = this;console.log(this.buttonselect);var b = this.querySelector(this.buttonselect),
c = this.querySelector(this.buttonclear);b.addEventListener('click', function () {
a.show(a);
}), c && c.addEventListener('click', function () {
a.clearValue();
}), this.updatePreview();
} }, { key: 'disconnectedCallback', value: function disconnectedCallback() {
var a = this.querySelector(this.buttonselect);a.removeEventListener('click', self);
} }, { key: 'show', value: function show(a) {
console.log(this.buttonsaveselected), console.log(a), window.jQuery(this.querySelector('[role="dialog"]')).modal('show'), window.jQuery(this.querySelector(this.buttonsaveselected)).on('click', function (b) {
return b.preventDefault(), b.stopPropagation(), a.selectedPath ? a.setValue(a.rootfolder + a.selectedPath) : a.setValue(''), a.modalClose(a), !1;
}), window.document.addEventListener('onMediaFileSelected', function (b) {
var c = b.item.path;a.selectedPath = c.match(/.jpg|.jpeg|.gif|.png/) ? b.item.path : '';
});
} }, { key: 'modalClose', value: function modalClose(a) {
window.jQuery(a.querySelector('[role="dialog"]')).modal('hide');
} }, { key: 'setValue', value: function setValue(a) {
var b = window.jQuery(this.querySelector(this.input));b.val(a).trigger('change'), this.updatePreview();
} }, { key: 'clearValue', value: function clearValue() {
this.setValue('');
} }, { key: 'updatePreview', value: function updatePreview() {
if (-1 !== ['true', 'tooltip', 'static'].indexOf(this.preview) && 'false' !== this.preview && this.preview) {
var b = window.jQuery(this.querySelector(this.previewcontainer)),
c = window.jQuery(this.querySelector(this.input)),
d = c.val();if (console.log(this.previewcontainer), console.log(b), console.log(c), console.log(d), console.log(this.preview), b.popover('dispose'), c.tooltip('dispose'), !d) b.popover({ content: Joomla.JText._('JLIB_FORM_MEDIA_PREVIEW_EMPTY'), html: !0 });else {
var a = new Image(this.previewwidth, this.previewheight);a.src = this.basepath + d, console.log(a), console.log(a.src), b.popover({ content: a, html: !0 }), c.tooltip({ placement: 'top', title: d });
}
}
} }]), b;
}(HTMLElement);customElements.define('joomla-field-media', JoomlaFieldMedia);

},{}]},{},[1]);

0 comments on commit 8509189

Please sign in to comment.