Skip to content

FOUR-18323 | Implement CSS Application Logic #7383

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

Merged
sanjacornelius merged 4 commits into from
Sep 20, 2024
Merged

FOUR-18323 | Implement CSS Application Logic #7383

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e2ab33b
Add route for applyTemplate
mcraeteisha Sep 18, 2024
303054f
Apply CSS to Screen
mcraeteisha Sep 18, 2024
f551d65
Merge branch 'epic/FOUR-18012' into task/FOUR-18323
mcraeteisha Sep 18, 2024
1c91476
Update regex in ScreenTemplateHelper
mcraeteisha Sep 18, 2024
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
Prev Previous commit
Next Next commit
Apply CSS to Screen
  • Loading branch information
@mcraeteisha
mcraeteisha committed Sep 18, 2024
commit 303054f5e5ebaf6a41225ed252e2b453d87998e0
68 changes: 68 additions & 0 deletions ProcessMaker/Helpers/ScreenTemplateHelper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,4 +250,72 @@ private static function flattenNestedItems($items)

return $flattenedItems;
}

// Parse the CSS string into an associative array
public static function parseCss($cssString)
{
$rules = [];
// Regex to match complex CSS selectors, allowing for any selector pattern
preg_match_all('/\[selector="([\w-]+)"\]\s*([^{]+)\s*{([^}]+)}/', $cssString, $matches, PREG_SET_ORDER);

foreach ($matches as $match) {
$baseSelector = $match[1];
$additionalSelector = trim($match[2]);
$fullSelector = "[selector=\"$baseSelector\"] " . $additionalSelector;
$propertiesString = trim($match[3]);

// Split properties into key-value pairs
$propertiesArray = explode(';', $propertiesString);
$properties = [];

foreach ($propertiesArray as $property) {
$propertyParts = explode(':', $property);
if (count($propertyParts) == 2) {
$key = trim($propertyParts[0]);
$value = trim($propertyParts[1]);
if (!empty($key) && !empty($value)) {
$properties[$key] = $value;
}
}
}

$rules[$fullSelector] = $properties;
}

return $rules;
}

// Merge the two CSS arrays
public static function mergeCss($currentCss, $templateCss)
{
foreach ($templateCss as $selector => $properties) {
if (isset($currentCss[$selector])) {
// Merge properties from Template CSS into the Current Screen CSS for the same selector
$currentCss[$selector] = array_merge($currentCss[$selector], $properties);
} else {
// Add new selector and properties from Template CSS
$currentCss[$selector] = $properties;
}
}

return $currentCss;
}

public static function generateCss($cssArray)
{
// Convert the CSS array back into a string and output the final CSS
$cssString = '';

foreach ($cssArray as $selector => $properties) {
$cssString .= "$selector {\n";

foreach ($properties as $key => $value) {
$cssString .= " $key: $value;\n";
}

$cssString .= "}\n\n";
}

return $cssString;
}
}
33 changes: 33 additions & 0 deletions ProcessMaker/Templates/ScreenTemplate.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -677,6 +677,39 @@ public function syncProjectAssets($data, int $newScreenId): void
}
}

// Applies the template to an existing screen in screen builder
public function applyTemplate($request)
{
// Get the selected template
$templateId = (int) $request->id;
$template = ScreenTemplates::findOrFail($templateId);

// Get the selected template options
$templateOptions = $request->get('templateOptions');
// Get the current screen to apply the template
$screenId = $request->get('screenId');
$screen = Screen::where('id', $screenId)->first();
// Define available options and their corresponding components
$availableOptions = ScreenComponents::getComponents();

if (is_array($templateOptions)) {
// Iterate through available options to handle each one
foreach ($availableOptions as $option => $components) {
// Apply the CSS to the current screen
if ($option == 'CSS' && in_array($option, $templateOptions)) {
$currentScreenCssArray = ScreenTemplateHelper::parseCss($screen->custom_css);
$templateCssArray = ScreenTemplateHelper::parseCss($template->screen_custom_css);
$mergedCss = ScreenTemplateHelper::mergeCss($currentScreenCssArray, $templateCssArray);

$finalCss = ScreenTemplateHelper::generateCss($mergedCss);
$screen->custom_css = $finalCss;
}

$screen->save();
}
}
}

private function syncTemplateMedia($template, $media)
{
// Get the UUIDs of updated media
Expand Down