Skip to content
This repository was archived by the owner on Apr 19, 2019. It is now read-only.

[WIP] SVG Icons #441

Closed
dgrammatiko wants to merge 5 commits into from
Closed

[WIP] SVG Icons #441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ba83de9
Icons
dgrammatiko Jun 5, 2018
e793c6a
don’t use deprecated code
dgrammatiko Jun 5, 2018
8a57c0e
don’t use deprecated code
dgrammatiko Jun 5, 2018
c16f11c
subdirs
dgrammatiko Jun 6, 2018
c6b3bdb
Update HtmlDocument.php
Jun 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
6 changes: 3 additions & 3 deletions administrator/modules/mod_login/tmpl/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<label class="text-white" for="mod-login-username"><?php echo Text::_('JGLOBAL_USERNAME'); ?></label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text"><span class="fa fa-user" aria-hidden="true"></span></span>
<span class="input-group-text"><?php echo Factory::getDocument()->setIcons('user', 'demo-class'); ?></span>
</span>
<input
name="username"
Expand All @@ -51,7 +51,7 @@ class="form-control input-full"
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-lock" aria-hidden="true"></span>
<?php echo Factory::getDocument()->setIcons('lock', 'demo-class'); ?>
<span class="sr-only"><?php echo Text::_('JSHOW'); ?></span>
</span>
</span>
Expand All @@ -71,7 +71,7 @@ class="form-control input-full"
<label class="text-white" for="mod-login-secretkey"><?php echo Text::_('JGLOBAL_SECRETKEY'); ?></label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text"><span class="fa fa-shield" aria-hidden="true"></span></span>
<?php echo Factory::getDocument()->setIcons('shield', 'demo-class'); ?>
</span>
<input
name="secretkey"
Expand Down
16 changes: 14 additions & 2 deletions administrator/templates/atum/login.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@

// Load template CSS file
HTMLHelper::_('stylesheet', 'bootstrap.css', ['version' => 'auto', 'relative' => true]);
HTMLHelper::_('stylesheet', 'font-awesome.css', ['version' => 'auto', 'relative' => true]);
HTMLHelper::_('stylesheet', 'template' . ($this->direction === 'rtl' ? '-rtl' : '') . '.css', ['version' => 'auto', 'relative' => true]);

// Alerts
Expand Down Expand Up @@ -56,6 +55,19 @@
<head>
<jdoc:include type="metas" />
<jdoc:include type="styles" />
<style>
.demo-class {
padding-top: .2rem;
margin-right: 0.5rem;
height: 1.2rem;
width: 1.2rem;
-webkit-text-stroke-color: currentColor;
stroke: currentColor;
-webkit-text-stroke-width: 16px;
stroke-width: 16px;
fill: transparent
}
</style>
</head>

<body class="site <?php echo $option . ' view-' . $view . ' layout-' . $layout . ' task-' . $task . ' itemid-' . $itemid . ' '; ?>">
Expand Down Expand Up @@ -85,7 +97,7 @@
<?php // End Content ?>
</div>
<div class="mt-4 d-none d-md-flex justify-content-between">
<a href="<?php echo Uri::root(); ?>" target="_blank" class="text-white"><span class="fa fa-eye mr-1" aria-hidden="true"></span><?php echo Text::_('TPL_ATUM_VIEW_SITE'); ?></a>
<a href="<?php echo Uri::root(); ?>" target="_blank" class="text-white"><?php echo Factory::getDocument()->setIcons('eye', 'demo-class'); ?><?php echo Text::_('TPL_ATUM_VIEW_SITE'); ?></a>
<span class="text-white">&nbsp;&copy; <?php echo date('Y'); ?> <?php echo $sitename; ?></span>
</div>
</div>
Expand Down
48 changes: 48 additions & 0 deletions libraries/src/Document/Document.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,14 @@ class Document
*/
protected $preloadTypes = ['preload', 'dns-prefetch', 'preconnect', 'prefetch', 'prerender'];

/**
* Array of icons
*
* @var array
* @since 4.0.0
*/
public $icons = array();

/**
* Class constructor.
*
Expand Down Expand Up @@ -308,6 +316,11 @@ public function __construct($options = array())
{
$this->setPreloadManager(new PreloadManager);
}

if (array_key_exists('icons', $options))
{
$this->setIcons($options['icons']);
}
}

/**
Expand Down Expand Up @@ -482,6 +495,41 @@ public function setMetaData($name, $content, $attribute = 'name')
return $this;
}

/**
* Returns the icon names
*
* @return array
*
* @since 4.0.0
*/
public function getIcons()
{
return $this->icons;
}

/**
* Setter for an icon
*
* @param string $icon Name of the meta HTML tag
* @return string
*
* @since 11.1
*/
public function setIcons($icon, $classes = null)
{
if (!empty($icon))
{
// Setup options object
if (!in_array($icon, $this->getIcons())) {
$this->icons[] = $icon;
}

return '<svg class="' . $classes . '"><use href="#joomla-i-' . $icon . '"></use></svg>';
}

return '';
}

/**
* Adds a linked script to the page
*
Expand Down
37 changes: 37 additions & 0 deletions libraries/src/Document/HtmlDocument.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

use Joomla\CMS\Cache\Cache;
use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Log\Log;
use Joomla\CMS\Uri\Uri;
use Joomla\Registry\Registry;
Expand Down Expand Up @@ -151,6 +152,7 @@ public function getHeadData()
$data['scripts'] = $this->_scripts;
$data['script'] = $this->_script;
$data['custom'] = $this->_custom;
$data['icons'] = $this->icons;
$data['scriptText'] = \JText::getScriptStrings();

return $data;
Expand Down Expand Up @@ -179,6 +181,7 @@ public function resetHeadData($types = null)
$this->_scripts = array();
$this->_script = array();
$this->_custom = array();
$this->icons = array();
}

if (is_array($types))
Expand Down Expand Up @@ -255,6 +258,7 @@ public function setHeadData($data)
$this->_scripts = $data['scripts'] ?? $this->_scripts;
$this->_script = $data['script'] ?? $this->_script;
$this->_custom = $data['custom'] ?? $this->_custom;
$this->icons = $data['custom'] ?? $this->icons;

if (isset($data['scriptText']) && !empty($data['scriptText']))
{
Expand Down Expand Up @@ -794,6 +798,39 @@ protected function _renderTemplate()
$with[] = $this->getBuffer($args['type'], $args['name'], $args['attribs']);
}

$this->_template = str_replace('</body>', self::renderIcons() . '</body>', $this->_template);

return str_replace($replace, $with, $this->_template);
}


/**
* Renders the document icons
*
* @return string The svgs markup for the icons
*
* @since 4.0.0
*/
public function renderIcons()
{
$files = [];

// Generate the file and load the stylesheet link
foreach ($this->icons as $key => $icon)
{
$file = HTMLHelper::image('vendor/font-awesome/' . $icon . '.svg', '', null,true, 1);
Copy link
Member

@laoneo laoneo Jun 11, 2018

Choose a reason for hiding this comment

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

We made something similar in DPCalendar for J3. While doing that, an idea popped up, to first search in the template for an svg and then in vendor. Like that a template can override the core icons.

Copy link
Contributor Author

@dgrammatiko dgrammatiko Jun 11, 2018

Choose a reason for hiding this comment

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

exactly what is happening here as well thanks to the magic of HTMLHelper::image


if ($file) {
$matches = [];
preg_match('$(\/media.+)$', $file, $matches);
$files[] = @file_get_contents(JPATH_ROOT . $matches[1]);
Copy link
Member

@laoneo laoneo Jun 15, 2018

Choose a reason for hiding this comment

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

Indeed it does. Nice one.

If you want, you can do this as an oneliner $files[] = file_get_contents(JPATH_ROOT . substr($file, strpos($file, '/media')));

Added the same technique now in DPCalendar.

}
}

if (!empty($files)) {
return '<div style="display:none">' . implode('', $files) . '</div>';
}

return '';
}
}
Loading