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

Adding the ability to inline CSS and Js code via Asset Manager #1377

Merged
merged 2 commits into from
Apr 4, 2017
Merged

Adding the ability to inline CSS and Js code via Asset Manager #1377

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
985253b
Add {'loading': 'inline'} option for Js and CSS assets
OliverO2 Mar 23, 2017
76fa885
Merge remote-tracking branch 'upstream/develop' into develop
OliverO2 Mar 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
216 changes: 131 additions & 85 deletions system/src/Grav/Common/Assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,28 +255,32 @@ public function add($asset, $priority = null, $pipeline = true)
}

/**
* Add a CSS asset.
* Add an asset to its assembly.
*
* It checks for duplicates.
* You may add more than one asset passing an array as argument.
* The third argument may alternatively contain an array of options which take precedence over positional
* arguments.
*
* @param mixed $asset
* @param int $priority the priority, bigger comes first
* @param bool $pipeline false if this should not be pipelined
* @param null $group
* @param array $assembly the array assembling the assets
* @param mixed $asset
* @param int $priority the priority, bigger comes first
* @param bool $pipeline false if this should not be pipelined
* @param string $loading how the asset is loaded (async/defer/inline, for CSS: only inline)
* @param string $group name of the group
*
* @return $this
*/
public function addCss($asset, $priority = null, $pipeline = true, $group = null)
public function addTo(&$assembly, $asset, $priority = null, $pipeline = true, $loading = null, $group = null)
{
if (is_array($asset)) {
foreach ($asset as $a) {
$this->addCss($a, $priority, $pipeline, $group);
$this->addTo($assembly, $a, $priority, $pipeline, $loading, $group);
}

return $this;
} elseif (isset($this->collections[$asset])) {
$this->addCss($this->collections[$asset], $priority, $pipeline, $group);
$this->addTo($assembly, $this->collections[$asset], $priority, $pipeline, $loading, $group);

return $this;
}
Expand All @@ -297,33 +301,57 @@ public function addCss($asset, $priority = null, $pipeline = true, $group = null
'asset' => $asset,
'remote' => $remote,
'priority' => intval($priority ?: 10),
'order' => count($this->css),
'order' => count($assembly),
'pipeline' => (bool) $pipeline,
'loading' => $loading ?: '',
'group' => $group ?: 'head',
'modified' => $modified
];

// check for dynamic array and merge with defaults
if (func_num_args() > 1) {
$dynamic_arg = func_get_arg(1);
if (func_num_args() > 2) {
$dynamic_arg = func_get_arg(2);
if (is_array($dynamic_arg)) {
$data = array_merge($data, $dynamic_arg);
}
}

$key = md5($asset);
if ($asset) {
$this->css[$key] = $data;
$assembly[$key] = $data;
}

return $this;
}

/**
* Add a CSS asset.
*
* It checks for duplicates.
* You may add more than one asset passing an array as argument.
* The second argument may alternatively contain an array of options which take precedence over positional
* arguments.
*
* @param mixed $asset
* @param int $priority the priority, bigger comes first
* @param bool $pipeline false if this should not be pipelined
* @param string $group
* @param string $loading how the asset is loaded (async/defer/inline, for CSS: only inline)
*
* @return $this
*/
public function addCss($asset, $priority = null, $pipeline = true, $group = null, $loading = null)
{
return $this->addTo($this->css, $asset, $priority, $pipeline, $loading, $group);
}

/**
* Add a JavaScript asset.
*
* It checks for duplicates.
* You may add more than one asset passing an array as argument.
* The second argument may alternatively contain an array of options which take precedence over positional
* arguments.
*
* @param mixed $asset
* @param int $priority the priority, bigger comes first
Expand All @@ -335,55 +363,7 @@ public function addCss($asset, $priority = null, $pipeline = true, $group = null
*/
public function addJs($asset, $priority = null, $pipeline = true, $loading = null, $group = null)
{
if (is_array($asset)) {
foreach ($asset as $a) {
$this->addJs($a, $priority, $pipeline, $loading, $group);
}

return $this;
} elseif (isset($this->collections[$asset])) {
$this->addJs($this->collections[$asset], $priority, $pipeline, $loading, $group);

return $this;
}

$modified = false;
$remote = $this->isRemoteLink($asset);
if (!$remote) {
$modified = $this->getLastModificationTime($asset);
$asset = $this->buildLocalLink($asset);
}

// Check for existence
if ($asset === false) {
return $this;
}

$data = [
'asset' => $asset,
'remote' => $remote ,
'priority' => intval($priority ?: 10),
'order' => count($this->js),
'pipeline' => (bool) $pipeline,
'loading' => $loading ?: '',
'group' => $group ?: 'head',
'modified' => $modified
];

// check for dynamic array and merge with defaults
if (func_num_args() > 1) {
$dynamic_arg = func_get_arg(1);
if (is_array($dynamic_arg)) {
$data = array_merge($data, $dynamic_arg);
}
}

$key = md5($asset);
if ($asset) {
$this->js[$key] = $data;
}

return $this;
return $this->addTo($this->js, $asset, $priority, $pipeline, $loading, $group);
}

/**
Expand Down Expand Up @@ -547,32 +527,54 @@ public function css($group = 'head', $attributes = [])
$this->css = array_reverse($this->css);
$this->inline_css = array_reverse($this->inline_css);

$inlineGroup = array_key_exists('loading', $attributes) && $attributes['loading'] === 'inline';

$attributes = $this->attributes(array_merge(['type' => 'text/css', 'rel' => 'stylesheet'], $attributes));

$output = '';
$inline_css = '';

if ($this->css_pipeline) {
$pipeline_result = $this->pipelineCss($group);
$pipeline_html = '<link href="' . $pipeline_result . '"' . $attributes . ' />' . "\n";
$pipeline_result = $this->pipelineCss($group, !$inlineGroup);
$pipeline_html = ($inlineGroup ? '' : '<link href="' . $pipeline_result . '"' . $attributes . ' />' . "\n");

if ($this->css_pipeline_before_excludes && $pipeline_result) {
$output .= $pipeline_html;
if ($inlineGroup) {
$inline_css .= $pipeline_result;
}
else {
$output .= $pipeline_html;
}
}
foreach ($this->css_no_pipeline as $file) {
if ($group && $file['group'] == $group) {
$media = isset($file['media']) ? sprintf(' media="%s"', $file['media']) : '';
$output .= '<link href="' . $file['asset'] . $this->getTimestamp($file) . '"' . $attributes . $media . ' />' . "\n";
if ($file['loading'] === 'inline') {
$inline_css .= $this->gatherLinks([$file], CSS_ASSET) . "\n";
}
else {
$media = isset($file['media']) ? sprintf(' media="%s"', $file['media']) : '';
$output .= '<link href="' . $file['asset'] . $this->getTimestamp($file) . '"' . $attributes . $media . ' />' . "\n";
}
}
}
if (!$this->css_pipeline_before_excludes && $pipeline_result) {
$output .= $pipeline_html;
if ($inlineGroup) {
$inline_css .= $pipeline_result;
}
else {
$output .= $pipeline_html;
}
}
} else {
foreach ($this->css as $file) {
if ($group && $file['group'] == $group) {
$media = isset($file['media']) ? sprintf(' media="%s"', $file['media']) : '';
$output .= '<link href="' . $file['asset'] . $this->getTimestamp($file) . '"' . $attributes . $media . ' />' . "\n";
if ($inlineGroup || $file['loading'] === 'inline') {
$inline_css .= $this->gatherLinks([$file], CSS_ASSET) . "\n";
}
else {
$media = isset($file['media']) ? sprintf(' media="%s"', $file['media']) : '';
$output .= '<link href="' . $file['asset'] . $this->getTimestamp($file) . '"' . $attributes . $media . ' />' . "\n";
}
}
}
}
Expand Down Expand Up @@ -626,30 +628,52 @@ public function js($group = 'head', $attributes = [])
$this->js = array_reverse($this->js);
$this->inline_js = array_reverse($this->inline_js);

$inlineGroup = array_key_exists('loading', $attributes) && $attributes['loading'] === 'inline';

$attributes = $this->attributes(array_merge(['type' => 'text/javascript'], $attributes));

$output = '';
$inline_js = '';

if ($this->js_pipeline) {
$pipeline_result = $this->pipelineJs($group);
$pipeline_html = '<script src="' . $pipeline_result . '"' . $attributes . ' ></script>' . "\n";
$pipeline_result = $this->pipelineJs($group, !$inlineGroup);
$pipeline_html = ($inlineGroup ? '' : '<script src="' . $pipeline_result . '"' . $attributes . ' ></script>' . "\n");

if ($this->js_pipeline_before_excludes && $pipeline_result) {
$output .= $pipeline_html;
if ($inlineGroup) {
$inline_js .= $pipeline_result;
}
else {
$output .= $pipeline_html;
}
}
foreach ($this->js_no_pipeline as $file) {
if ($group && $file['group'] == $group) {
$output .= '<script src="' . $file['asset'] . $this->getTimestamp($file) . '"' . $attributes . ' ' . $file['loading'] . '></script>' . "\n";
if ($file['loading'] === 'inline') {
$inline_js .= $this->gatherLinks([$file], JS_ASSET) . "\n";
}
else {
$output .= '<script src="' . $file['asset'] . $this->getTimestamp($file) . '"' . $attributes . ' ' . $file['loading'] . '></script>' . "\n";
}
}
}
if (!$this->js_pipeline_before_excludes && $pipeline_result) {
$output .= $pipeline_html;
if ($inlineGroup) {
$inline_js .= $pipeline_result;
}
else {
$output .= $pipeline_html;
}
}
} else {
foreach ($this->js as $file) {
if ($group && $file['group'] == $group) {
$output .= '<script src="' . $file['asset'] . $this->getTimestamp($file) . '"' . $attributes . ' ' . $file['loading'] . '></script>' . "\n";
if ($inlineGroup || $file['loading'] === 'inline') {
$inline_js .= $this->gatherLinks([$file], JS_ASSET) . "\n";
}
else {
$output .= '<script src="' . $file['asset'] . $this->getTimestamp($file) . '"' . $attributes . ' ' . $file['loading'] . '></script>' . "\n";
}
}
}
}
Expand All @@ -672,10 +696,11 @@ public function js($group = 'head', $attributes = [])
* Minify and concatenate CSS
*
* @param string $group
* @param bool $returnURL true if pipeline should return the URL, otherwise the content
*
* @return bool|string
* @return bool|string URL or generated content if available, else false
*/
protected function pipelineCss($group = 'head')
protected function pipelineCss($group = 'head', $returnURL = true)
{
// temporary list of assets to pipeline
$temp_css = [];
Expand All @@ -695,9 +720,14 @@ protected function pipelineCss($group = 'head')
$this->css_no_pipeline = json_decode(file_get_contents($this->assets_dir . $inline_file), true);
}

// If pipeline exist return it
// If pipeline exist return its URL or content
if (file_exists($this->assets_dir . $file)) {
return $relative_path . $this->getTimestamp();
if ($returnURL) {
return $relative_path . $this->getTimestamp();
}
else {
return file_get_contents($this->assets_dir . $file) . "\n";
}
}

// Remove any non-pipeline files
Expand Down Expand Up @@ -744,7 +774,12 @@ protected function pipelineCss($group = 'head')
if (strlen(trim($buffer)) > 0) {
file_put_contents($this->assets_dir . $file, $buffer);

return $relative_path . $this->getTimestamp();
if ($returnURL) {
return $relative_path . $this->getTimestamp();
}
else {
return $buffer . "\n";
}
} else {
return false;
}
Expand All @@ -754,10 +789,11 @@ protected function pipelineCss($group = 'head')
* Minify and concatenate JS files.
*
* @param string $group
* @param bool $returnURL true if pipeline should return the URL, otherwise the content
*
* @return string
* @return bool|string URL or generated content if available, else false
*/
protected function pipelineJs($group = 'head')
protected function pipelineJs($group = 'head', $returnURL = true)
{
// temporary list of assets to pipeline
$temp_js = [];
Expand All @@ -777,9 +813,14 @@ protected function pipelineJs($group = 'head')
$this->js_no_pipeline = json_decode(file_get_contents($this->assets_dir . $inline_file), true);
}

// If pipeline exist return it
// If pipeline exist return its URL or content
if (file_exists($this->assets_dir . $file)) {
return $relative_path . $this->getTimestamp();
if ($returnURL) {
return $relative_path . $this->getTimestamp();
}
else {
return file_get_contents($this->assets_dir . $file) . "\n";
}
}

// Remove any non-pipeline files
Expand Down Expand Up @@ -816,7 +857,12 @@ protected function pipelineJs($group = 'head')
if (strlen(trim($buffer)) > 0) {
file_put_contents($this->assets_dir . $file, $buffer);

return $relative_path . $this->getTimestamp();
if ($returnURL) {
return $relative_path . $this->getTimestamp();
}
else {
return $buffer . "\n";
}
} else {
return false;
}
Expand Down
Loading