Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[4.0] spinner as web component #22491

Closed
wants to merge 2 commits into from
Closed

[4.0] spinner as web component #22491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9581e49
loader
dgrammatiko Oct 4, 2018
0edb8d4
cs
dgrammatiko Oct 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions administrator/components/com_associations/tmpl/association/edit.php
View file
Open in desktop
Expand Up @@ -17,8 +17,9 @@
HTMLHelper::_('behavior.keepalive');
HTMLHelper::_('jquery.framework');

HTMLHelper::_('script', 'com_associations/sidebyside.js', false, true);
HTMLHelper::_('stylesheet', 'com_associations/sidebyside.css', array(), true);
HTMLHelper::_('webcomponent', 'system/webcomponents/joomla-core-loader.min.js', ['relative' => true, 'version' => 'auto']);
HTMLHelper::_('script', 'com_associations/sidebyside.js', ['relative' => true, 'version' => 'auto']);
HTMLHelper::_('stylesheet', 'com_associations/sidebyside.css', ['relative' => true, 'version' => 'auto']);

$options = array(
'layout' => $this->app->input->get('layout', '', 'string'),
Expand Down
118 changes: 34 additions & 84 deletions administrator/components/com_categories/Field/CategoryeditField.php
View file
Open in desktop
Expand Up @@ -42,6 +42,14 @@ class CategoryeditField extends \JFormFieldList
*/
public $type = 'CategoryEdit';

/**
* Name of the layout being used to render the field
*
* @var string
* @since 4.0
*/
protected $layout = 'joomla.form.field.category';

/**
* Method to attach a JForm object to the field.
*
Expand All @@ -62,7 +70,7 @@ public function setup(\SimpleXMLElement $element, $value, $group = null)

if ($return)
{
$this->allowAdd = $this->element['allowAdd'] ?? '';
$this->allowAdd = isset($this->element['allowAdd']) ? (boolean) $this->element['allowAdd'] : false;
}

return $return;
Expand All @@ -82,7 +90,7 @@ public function __get($name)
switch ($name)
{
case 'allowAdd':
return $this->$name;
return (bool) $this->$name;
}

return parent::__get($name);
Expand Down Expand Up @@ -347,88 +355,30 @@ protected function getOptions()
*/
protected function getInput()
{
$html = array();
$class = array();
$attr = '';

// Initialize some field attributes.
$class[] = !empty($this->class) ? $this->class : '';

if ($this->allowAdd)
{
$customGroupText = Text::_('JGLOBAL_CUSTOM_CATEGORY');

$class[] = 'chosen-custom-value';
$attr .= ' data-custom_group_text="' . $customGroupText . '" '
. 'data-no_results_text="' . Text::_('JGLOBAL_ADD_CUSTOM_CATEGORY') . '" '
. 'data-placeholder="' . Text::_('JGLOBAL_TYPE_OR_SELECT_CATEGORY') . '" ';
}

if ($class)
{
$attr .= 'class="' . implode(' ', $class) . '"';
}

$attr .= !empty($this->size) ? ' size="' . $this->size . '"' : '';
$attr .= $this->multiple ? ' multiple' : '';
$attr .= $this->required ? ' required' : '';
$attr .= $this->autofocus ? ' autofocus' : '';

// To avoid user's confusion, readonly="true" should imply disabled="true".
if ((string) $this->readonly == '1'
|| (string) $this->readonly == 'true'
|| (string) $this->disabled == '1'
|| (string) $this->disabled == 'true')
{
$attr .= ' disabled="disabled"';
}

// Initialize JavaScript field attributes.
$attr .= $this->onchange ? ' onchange="' . $this->onchange . '"' : '';

// Get the field options.
$options = (array) $this->getOptions();

// Create a read-only list (no name) with hidden input(s) to store the value(s).
if ((string) $this->readonly == '1' || (string) $this->readonly == 'true')
{
$html[] = HTMLHelper::_('select.genericlist', $options, '', trim($attr), 'value', 'text', $this->value, $this->id);

// E.g. form field type tag sends $this->value as array
if ($this->multiple && is_array($this->value))
{
if (!count($this->value))
{
$this->value[] = '';
}

foreach ($this->value as $value)
{
$html[] = '<input type="hidden" name="' . $this->name . '" value="' . htmlspecialchars($value, ENT_COMPAT, 'UTF-8') . '">';
}
}
else
{
$html[] = '<input type="hidden" name="' . $this->name . '" value="' . htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8') . '">';
}
}
else
{
// Create a regular list.
if (count($options) === 0)
{
// All Categories have been deleted, so we need a new category (This will create on save if selected).
$options[0] = new \stdClass;
$options[0]->value = 'Uncategorised';
$options[0]->text = 'Uncategorised';
$options[0]->level = '1';
$options[0]->published = '1';
$options[0]->lft = '1';
}

$html[] = HTMLHelper::_('select.genericlist', $options, $this->name, trim($attr), 'value', 'text', $this->value, $this->id);
}
// Trim the trailing line in the layout file
return rtrim($this->getRenderer($this->layout)->render($this->getLayoutData()), PHP_EOL);
}

return implode($html);
/**
* Method to get the data to be passed to the layout for rendering.
*
* @return array
*
* @since 4.0
*/
protected function getLayoutData()
{
$data = parent::getLayoutData();

$extraData = [
'allowAdd' => $this->allowAdd,
'options' => $this->getOptions(),
'enabledCF' => (boolean) $this->element['custom-fields-enabled'],
'catId' => $this->element['custom-fields-cat-id'],
'formId' => $this->element['custom-fields-form-id'],
'section' => $this->element['custom-fields-section'],
];

return array_merge($data, $extraData);
}
}
26 changes: 6 additions & 20 deletions administrator/components/com_fields/Helper/FieldsHelper.php
View file
Open in desktop
Expand Up @@ -330,26 +330,12 @@ public static function prepareForm($context, Form $form, $data)
if ($form->getField('catid') && $parts[0] != 'com_fields')
{
/*
* Setting the onchange event to reload the page when the category
* has changed
*/
$form->setFieldAttribute('catid', 'onchange', 'categoryHasChanged(this);');

// Preload spindle-wheel when we need to submit form due to category selector changed
Factory::getDocument()->addScriptDeclaration("
function categoryHasChanged(element) {
var cat = jQuery(element);
if (cat.val() == '" . $assignedCatids . "')return;
Joomla.loadingLayer('show');
jQuery('input[name=task]').val('" . $section . ".reload');
element.form.submit();
}
jQuery( document ).ready(function() {
Joomla.loadingLayer('load');
var formControl = '#" . $form->getFormControl() . "_catid';
if (!jQuery(formControl).val() != '" . $assignedCatids . "'){jQuery(formControl).val('" . $assignedCatids . "');}
});"
);
* Setting some parameters for the category field
*/
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs to get removed or?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup this inline script cannot be overridden unless you create a plugin (which might not even possible to do in j4 due to name spacing). Asset loading should happen only in layouts

$form->setFieldAttribute('catid', 'custom-fields-enabled', 'true');
$form->setFieldAttribute('catid', 'custom-fields-cat-id', $assignedCatids);
$form->setFieldAttribute('catid', 'custom-fields-form-id', $form->getFormControl());
$form->setFieldAttribute('catid', 'custom-fields-section', $section);
}

// Getting the fields
Expand Down
56 changes: 34 additions & 22 deletions build/build-modules-js/compilecejs.js
View file
Open in desktop
Expand Up @@ -10,19 +10,19 @@ const UglyCss = require('uglifycss');
const UglifyJS = require('uglify-es');
const rootPath = require('./rootpath.js')._();

const createJsFiles = (element, es6File) => {
const createJsFiles = (element, es6File, options) => {
const b = browserify();
const c = browserify();

fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}.js`, es6File, { encoding: 'utf8' });
fs.writeFileSync(`${rootPath}/media/${options.settings.webcomponents[element]['js']}/joomla-${element}.js`, es6File, { encoding: 'utf8' });

// And the minified version
fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}.min.js`, UglifyJS.minify(es6File).code, { encoding: 'utf8' });
fs.writeFileSync(`${rootPath}/media/${options.settings.webcomponents[element]['js']}/joomla-${element}.min.js`, UglifyJS.minify(es6File).code, { encoding: 'utf8' });

// Transpile a copy for ES5
fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}-es5.js`, '');
const bundleFs = fs.createWriteStream(`${rootPath}/media/system/webcomponents/js/joomla-${element}-es5.js`);
const bundleFsMin = fs.createWriteStream(`${rootPath}/media/system/webcomponents/js/joomla-${element}-es5.min.js`);
fs.writeFileSync(`${rootPath}/media/${options.settings.webcomponents[element]['js']}/joomla-${element}-es5.js`, '');
const bundleFs = fs.createWriteStream(`${rootPath}/media/${options.settings.webcomponents[element]['js']}/joomla-${element}-es5.js`);
const bundleFsMin = fs.createWriteStream(`${rootPath}/media/${options.settings.webcomponents[element]['js']}/joomla-${element}-es5.min.js`);

b.add(`${rootPath}/build/media/webcomponents/js/${element}/${element}.js`);
c.add(`${rootPath}/build/media/webcomponents/js/${element}/${element}.js`);
Expand All @@ -31,19 +31,31 @@ const createJsFiles = (element, es6File) => {
};

const compile = (options) => {
// Make sure that the dist paths exist
if (!fs.existsSync(`${rootPath}/media/system/webcomponents`)) {
fsExtra.mkdirSync(`${rootPath}/media/system/webcomponents`);
}
if (!fs.existsSync(`${rootPath}/media/system/webcomponents/js`)) {
fsExtra.mkdirSync(`${rootPath}/media/system/webcomponents/js`);
}

if (!fs.existsSync(`${rootPath}/media/system/webcomponents/css`)) {
fs.mkdirSync(`${rootPath}/media/system/webcomponents/css`);
}
// Make sure that the dist paths exist
if (!fs.existsSync(`${rootPath}/media/system/webcomponents`)) {
fsExtra.mkdirSync(`${rootPath}/media/system/webcomponents`);
}
if (!fs.existsSync(`${rootPath}/media/system/webcomponents/js`)) {
fsExtra.mkdirSync(`${rootPath}/media/system/webcomponents/js`);
}

if (!fs.existsSync(`${rootPath}/media/system/webcomponents/css`)) {
fs.mkdirSync(`${rootPath}/media/system/webcomponents/css`);
}

options.settings.elements.forEach((element) => {
console.log(element)
console.log(options.settings.webcomponents[element]['css']);
console.log(options.settings.webcomponents[element]['js']);
// Make sure that the dist paths exist
if (!fs.existsSync(`${rootPath}/media/${options.settings.webcomponents[element]['js']}`)) {
fsExtra.mkdirSync(`${rootPath}/media/${options.settings.webcomponents[element]['js']}`);
}

if (!fs.existsSync(`${rootPath}/media/${options.settings.webcomponents[element]['css']}`)) {
fs.mkdirSync(`${rootPath}/media/${options.settings.webcomponents[element]['css']}`);
}

// Copy the ES6 file
let es6File = fs.readFileSync(`${rootPath}/build/media/webcomponents/js/${element}/${element}.js`, 'utf8');
// Check if there is a css file
Expand Down Expand Up @@ -86,23 +98,23 @@ const compile = (options) => {
if (typeof res === 'object' && res.css) {
es6File = es6File.replace('{{CSS_CONTENTS_PLACEHOLDER}}', UglyCss.processString(res.css.toString()));

createJsFiles(element, es6File);
createJsFiles(element, es6File, options);
}
} else {
if (typeof res === 'object' && res.css) {
fs.writeFileSync(
`${rootPath}/media/system/webcomponents/css/joomla-${element}.css`,
`${rootPath}/media/${options.settings.webcomponents[element]['css']}/joomla-${element}.css`,
res.css.toString(),
{ encoding: 'UTF-8' },
);
fs.writeFileSync(
`${rootPath}/media/system/webcomponents/css/joomla-${element}.min.css`,
`${rootPath}/media/${options.settings.webcomponents[element]['css']}/joomla-${element}.min.css`,
UglyCss.processString(res.css.toString(), { expandVars: false }),
{ encoding: 'UTF-8' },
);
}

createJsFiles(element, es6File);
createJsFiles(element, es6File, options);
}
})

Expand All @@ -120,7 +132,7 @@ const compile = (options) => {
}
});
} else {
createJsFiles(element, es6File);
createJsFiles(element, es6File, options);
}
});
};
Expand Down
59 changes: 40 additions & 19 deletions build/build-modules-js/settings.json
View file
Open in desktop
Expand Up @@ -17,44 +17,65 @@
"editor-codemirror",
"hidden-mail",
"editor-none",
"toolbar-button"
"toolbar-button",
"core-loader"
],
"webcomponents": {
"core-loader": {
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"field-user": {
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"field-media": {
"css": "media/system/webcomponents/css",
"js": "media/system/webcomponents/js"
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"field-permissions": {
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"hidden-mail": {
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"toolbar-button": {
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"field-switcher": {
"css": "media/system/webcomponents/css",
"js": "media/system/webcomponents/js"
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"field-simple-color": {
"css": "media/system/webcomponents/css",
"js": "media/system/webcomponents/js"
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"field-send-test-mail": {
"css": "media/system/webcomponents/css",
"js": "media/system/webcomponents/js"
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"editor-codemirror": {
"css": "media/system/webcomponents/css",
"js": "media/system/webcomponents/js"
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"editor-none": {
"css": "media/system/webcomponents/css",
"js": "media/system/webcomponents/js"
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"field-module-order": {
"css": "media/system/webcomponents/css",
"js": "media/system/webcomponents/js"
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"field-hidden-mail": {
"css": "media/system/webcomponents/css",
"js": "media/system/webcomponents/js"
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
},
"field-subform": {
"css": "media/system/webcomponents/css",
"js": "media/system/webcomponents/js"
"css": "system/webcomponents/css",
"js": "system/webcomponents/js"
}
},
"vendors": {
Expand Down