Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Template override for improved Joomla article submission form
<?php
/**
* @package Article Form override for Joomla 3
* @copyright Copyright (c) 2014 Sander Potjer - www.perfectwebteam.nl
* @license GNU General Public License version 3 or later
*/
defined('_JEXEC') or die;
JHtml::_('behavior.keepalive');
JHtml::_('behavior.calendar');
JHtml::_('behavior.formvalidation');
JHtml::_('formbehavior.chosen', 'select');
// Create shortcut to parameters.
$params = $this->state->get('params');
// Get Category ID
if($this->item->catid)
{
// Existing article
$catid = $this->item->catid;
}
else
{
// New Article
$catid = $params->get('catid');
}
// Get Article ID
if($this->item->id)
{
// Existing article
$id = $this->item->id;
}
else
{
// New Article
$id = '00';
}
// Generate preview URL to article
$url = JRoute::_(ContentHelperRoute::getCategoryRoute($catid));
?>
<script type="text/javascript">
Joomla.submitbutton = function(task)
{
if (task == 'article.cancel' || document.formvalidator.isValid(document.getElementById('adminForm')))
{
<?php echo $this->form->getField('articletext')->save(); ?>
Joomla.submitform(task);
}
}
</script>
<style>
#jform_title {
display: block;
width: 100%;
min-height: 40px;
font-size: 18px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.toggle-editor {
display: none;
}
.chzn-container {
width: 100% !important;
}
.btn-group {
width: 49%;
}
.btn-group .btn {
width: 100%;
}
</style>
<div class="edit item-page<?php echo $this->pageclass_sfx; ?>">
<?php if ($params->get('show_page_heading', 1)) : ?>
<div class="page-header">
<h1>
<?php echo $this->escape($params->get('page_heading')); ?>
</h1>
</div>
<?php endif; ?>
<form action="<?php echo JRoute::_('index.php?option=com_content&a_id='.(int) $this->item->id); ?>" method="post" name="adminForm" id="adminForm" class="form-validate form-vertical">
<!-- Visible fieldset -->
<fieldset>
<div class="row-fluid">
<!-- Left column -->
<div class="span8">
<div class="tab-content">
<div class="tab-pane active" id="editor">
<div class="control-group">
<div class="controls">
<?php echo $this->form->getInput('title'); ?>
</div>
</div>
<div class="control-group">
<div class="controls">
<p><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_PUBLICATION') ?> <?php echo $url; ?>/<?php echo $id; ?>-<strong id="alias"><?php echo $this->item->alias; ?></strong></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<?php echo $this->form->getInput('articletext'); ?>
</div>
</div>
<div class="alert alert-info">
<?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_READMOREDESC') ?>
</div>
</div>
</div>
</div><!-- End Left column -->
<!-- Right column -->
<div class="span4">
<div class="well">
<h3 class="page-header"><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_PUBLICATIONDETAILS') ?></h3>
<?php echo $this->form->renderField('state'); ?>
<?php echo $this->form->renderField('access'); ?>
<?php echo $this->form->renderField('publish_up'); ?>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn" onclick="Joomla.submitbutton('article.cancel')">
<span class="icon-cancel"></span>&#160;<?php echo JText::_('JCANCEL') ?>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success" onclick="Joomla.submitbutton('article.save')">
<span class="icon-ok"></span>&#160;<?php echo JText::_('JSAVE') ?>
</button>
</div>
</div>
</div>
<div class="well">
<h3 class="page-header"><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_IMAGE') ?></h3>
<div class="control-group">
<div class="controls">
<?php echo $this->form->getInput('image_intro', 'images'); ?>
</div>
</div>
</div>
<div class="well">
<h3 class="page-header"><?php echo JText::_('JTAG') ?></h3>
<div class="control-group">
<div class="controls">
<?php echo $this->form->getInput('tags'); ?>
</div>
</div>
</div>
</div><!-- Right column -->
</div>
</fieldset><!-- End Visible fieldset -->
<!-- Hidden fieldset -->
<fieldset class="hidden">
<?php echo $this->form->getInput('catid'); ?>
<?php echo $this->form->getInput('alias'); ?>
<?php echo JHtml::_('form.token'); ?>
<input type="hidden" name="task" value="" />
<input type="hidden" name="return" value="<?php echo $this->return_page; ?>" />
<?php if ($this->params->get('enable_category', 0) == 1) :?>
<input type="hidden" name="jform[catid]" value="<?php echo $this->params->get('catid', 1); ?>" />
<?php endif; ?>
</fieldset><!-- End Hidden fieldset -->
</form>
</div>
<script type="text/javascript">
// Add title placeholder
jQuery("#jform_title").attr("placeholder", "<?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_TITLEPLACEHOLDER') ?>");
// Transform title to alias while typing
jQuery("#jform_title").keyup(function ()
{
var title = jQuery(this).val();
alias = title.toLowerCase().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');
jQuery("#jform_alias").val(alias);
jQuery("#alias").html(alias);
});
// Allow alias editing on click
jQuery('#alias').click(function ()
{
var replaceWith = jQuery('<input id="temp" name="temp" type="text"></input>');
var connectWith = jQuery('#jform_alias');
var elem = jQuery(this);
elem.hide();
elem.after(replaceWith);
replaceWith.val(elem.text());
replaceWith.focus();
replaceWith.blur(function ()
{
if (jQuery(this).val() != "")
{
connectWith.val(jQuery(this).val()).change();
elem.text(jQuery(this).val());
}
jQuery(this).remove();
elem.show();
});
// Only allow valid alias characters
jQuery("#temp").bind('keypress', function (event)
{
var regex = new RegExp("^[a-z0-9\-]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key))
{
event.preventDefault();
return false;
}
});
});
</script>
JFIELD_ACCESS_LABEL="Visible for"
OVERRIDE_COM_CONTENT_FORM_IMAGE="Image"
OVERRIDE_COM_CONTENT_FORM_PUBLICATION="This article will be published on"
OVERRIDE_COM_CONTENT_FORM_PUBLICATIONDETAILS="Publication details"
OVERRIDE_COM_CONTENT_FORM_READMOREDESC="<strong>Read More:</strong> use the \"Read More\" button to split an article. Place the cursor in the article where the \"Read More\" button needs to be added, and click on the \"Read More\" button above."
OVERRIDE_COM_CONTENT_FORM_TITLEPLACEHOLDER="Enter your blog post title"
@pepperstreet
Copy link

pepperstreet commented Apr 24, 2021

Just noticed the ALIAS field live-typing and edit-on-click feature. Cool idea!
It seems not to work with german special characters like äöü ÄÖÜ ß
Probably there are other languages or special characters that are not taken into acount.
I am not a JavaScript Guy, so I would appreciate any tip or help on it ;)

FYI, here is a related StackOverFlow topic with some solutions and an interesting JS Gist link in the comments:

Thanks for reading.
Best regards.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment