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.

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

Add guardrails against transparent background color #919

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
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
62 changes: 61 additions & 1 deletion src/Lms/Canvas/CanvasLms.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

namespace App\Lms\Canvas;

use DOMDocument;
use App\Entity\ContentItem;
use App\Entity\Course;
use App\Entity\FileItem;
Expand Down Expand Up @@ -213,7 +214,15 @@ public function updateCourseContent(Course $course, User $user): array
$url = "courses/{$course->getLmsCourseId()}/pages/{$lmsContent['id']}";
$pageResponse = $canvasApi->apiGet($url);
$pageObj = $pageResponse->getContent();

/*Check if HTML has any transparent elements, and if so, update them to inherit the parent
background color*/
$html = $this->updateTransparentElements($pageObj['body']);
if (!empty($html) && $html !== $pageObj['body']){
$pageObj['body'] = $html;
$pageUrl = $pageObj['html_url'];
$options['wiki_page[body]'] = $html;
$canvasApi->apiPut($url, ['body' => $options]);
}
if (!empty($pageObj['body'])) {
$lmsContent['body'] = $pageObj['body'];
}
Expand Down Expand Up @@ -492,6 +501,57 @@ public function getContentTypes()
* PROTECTED FUNCTIONS
**********************/

/* Updates HTML elements with transparent backgrounds to inherit parent background colors
to better deal with color contrast issues */
protected function updateTransparentElements($html) {
$pageHtml = new DOMDocument;
$pageHtml->loadHTML($html);
$elements = $pageHtml->getElementsByTagName('p');

$html = "";

foreach($elements as $element) {
$style = $element->getAttribute('style');
if (strpos($style, 'background-color: transparent;') !== false) {
$html = $this->inheritStyle($element);
}
}

return $html;
}

protected function inheritStyle($element) {
$currElement = $element;
$parentStyles = [];
while(property_exists($currElement->parentNode, 'tagName')) {
$style = $currElement->getAttribute('style');
preg_match('/background-color:\s*([^;]+);/', $style, $matches);
if (isset($matches[1]) && $matches[1] !== 'transparent') {
array_push($parentStyles, $matches[1]);
}

$currElement = $currElement->parentNode;
}

$style = $element->getAttribute('style');

//If the element has no parent elements, then let its background color be the default background color.
//Else, set its background color to equal its first parent element's color
if (empty($parentStyles)) {
$newStyle = preg_replace('/background-color:\s*[^;]+;/', 'background-color: white;', $style);
}
else{
$color = 'background-color: ' . $parentStyles[0];
$newStyle = preg_replace('/background-color:\s*[^;]+;/', $color, $style);
}

$element->setAttribute('style', $newStyle);

$dom = $element->ownerDocument;

return $dom->saveHTML();
}

protected function getAccountInfo(User $user, $accountId)
{
$url = "accounts/${accountId}";
Expand Down
Loading