Skip to content

Commit

Permalink
#3 : add settings to override theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@ak4t0sh
ak4t0sh committed Apr 25, 2017
1 parent f1bebc6 commit 1efe4af
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 8 deletions.
2 changes: 2 additions & 0 deletions CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,7 @@

* Add support for https pen
* Add setting to select which embed version to use and set version 2 as default value
* Add setting to select which tabs must be displayed by default
* Add a theme selector setting with CodePen default themes
* Add settings to override theme
* Add a preview panel
46 changes: 45 additions & 1 deletion filter.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,54 @@ protected function convert_urls_into_codepens(&$text) {
}
$embedversion = get_config('filter_codepen', 'embedversion');
$embedtheme = get_config('filter_codepen', 'embedtheme');
$defaulttabs = get_config('filter_codepen', 'defaulttab');

// Theme override settings.
$embedborder = get_config('filter_codepen', 'embedborder');
if ($embedborder != "none") {
$embedborder = 'data-border="' . $embedborder . '" ';
} else {
$embedborder = '';
}
$embedbordercolor = get_config('filter_codepen', 'embedbordercolor');
if (!empty($embedborder) && !empty($embedbordercolor)) {
$embedbordercolor = 'data-border-color="' . $embedbordercolor . '" ';
} else {
$embedbordercolor = '';
}
$embedtabbarcolor = get_config('filter_codepen', 'embedtabbarcolor');
if (!empty($embedtabbarcolor)) {
$embedtabbarcolor = 'data-tab-bar-color="' . $embedtabbarcolor . '" ';
}
$embedtablinkcolor = get_config('filter_codepen', 'embedtablinkcolor');
if (!empty($embedtablinkcolor)) {
$embedtablinkcolor = 'data-tab-link-color="' . $embedtablinkcolor . '" ';
}
$embedactivetabcolor = get_config('filter_codepen', 'embedactivetabcolor');
if (!empty($embedactivetabcolor)) {
$embedactivetabcolor = 'data-active-tab-color="' . $embedactivetabcolor . '" ';
}
$embedactivelinkcolor = get_config('filter_codepen', 'embedactivelinkcolor');
if (!empty($embedactivelinkcolor)) {
$embedactivelinkcolor = 'data-active-link-color="' . $embedactivelinkcolor . '" ';
}
$embedlinklogocolor = get_config('filter_codepen', 'embedlinklogocolor');
if (!empty($embedlinklogocolor)) {
$embedlinklogocolor = 'data-link-logo-color="' . $embedlinklogocolor . '" ';
}

$text = preg_replace($regex, '<p data-embed-version="' . $embedversion .
'" data-default-tab="' . $defaulttabs .
'" data-height="' . $height .
'" data-theme-id="' . $embedtheme . '" data-slug-hash="$6" data-user="$4" data-default-tab="result" class="codepen">
'" data-theme-id="' . $embedtheme . '" '
. $embedborder
. $embedbordercolor
. $embedtabbarcolor
. $embedtablinkcolor
. $embedactivetabcolor
. $embedactivelinkcolor
. $embedlinklogocolor . '
data-slug-hash="$6" data-user="$4" data-default-tab="result" class="codepen">
See the pen <a href="$0">$0</a> by (<a href="https://$3$4">@$4</a>) on <a href="https://$3">CodePen</a></p>
<script async src="//codepen.io/assets/embed/ei.js"></script>', $text);

Expand Down
40 changes: 33 additions & 7 deletions lang/en/filter_codepen.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,41 @@

$string['filtername'] = 'CodePen';
$string['preview_desc'] = 'Save your settings to see the result.';
$string['settingformats'] = 'Apply to formats';
$string['settingformats_desc'] = 'The filter will be applied only if the original text was inserted in one of the selected formats.';
$string['settingheading'] = 'Information';
$string['settingheading_info'] = '<p>This is a text filter to embed a CodePen from <a href="http://codepen.io">codepen.io</a> into a text area in Moodle. Simply enable the plugin and paste the direct URL to a Pen in your content (or heading if enabled). A standard URL looks like this: <pre>http://codepen.io/[username]/pen/[Pen ID]</pre> For example: <pre>http://codepen.io/thedannywahl/pen/Gbdaj</pre></p><h4>Notes</h4><ul><li>CodePen does not have an API so we cannot manipulate the appearance of embeds on a per-Pen basis, so settings here are global.</li><li>If a user does not have javascript enabled a text fallback is provided with a link to the Pen.</li><li>Links to Pens are escaped if you do not want to embed. E.g.:<br/><code>&lt;a href="http://codepen.io/thedannywahl/pen/Gbdaj"&gt;http://codepen.io/thedannywahl/pen/Gbdaj&lt;/a&gt;</code></li><li>Make sure that if you have the "urltolink" filter enabled that the CodePen filter is listed first because links are escaped.</li><li>Do not use www. or cdpn.io short-link, these are not valid pen URLs. Visiting them in a browser always redirects to the full Pen URL path (as exampled above).</li><li>This filter only works with the /pen/ URL. It will not embed from other views like /full/ /live/ etc...</li></ul>';
$string['settingheight'] = 'Pen height';
$string['settingheight_desc'] = 'Set the height of all embedded Pens.';
$string['settingdefaulttab'] = 'Default tabs';
$string['settingdefaulttab_css'] = 'CSS';
$string['settingdefaulttab_desc'] = 'Default tabs to display.<br>
Maximum 2 at time, and only one if you set "Embed version" to "1".<br>
"Result" tab is displayed if nothing is selected.';
$string['settingdefaulttab_js'] = 'JavaScript';
$string['settingdefaulttab_html'] = 'HTML';
$string['settingdefaulttab_result'] = 'Result';
$string['settingembedactivelinkcolor'] = 'Active link color';
$string['settingembedactivelinkcolor_desc'] = 'Active tab text color.';
$string['settingembedactivetabcolor'] = 'Active tab color';
$string['settingembedactivetabcolor_desc'] = 'Active tab background color.';
$string['settingembedborder'] = 'Border';
$string['settingembedborder_desc'] = 'Border style.';
$string['settingembedborder_thick'] = 'Thick';
$string['settingembedborder_thin'] = 'Thin';
$string['settingembedbordercolor'] = 'Border color';
$string['settingembedbordercolor_desc'] = 'Embed Pen border color. Ignored if "Border" is set to "none".';
$string['settingembedlinklogocolor'] = 'Link logo color';
$string['settingembedlinklogocolor_desc'] = 'CodePen edit logo color.';
$string['settingembedtablinkcolor'] = 'Tab link color';
$string['settingembedtablinkcolor_desc'] = 'Tab bar text color.';
$string['settingembedtabbarcolor'] = 'Tab bar color';
$string['settingembedtabbarcolor_desc'] = 'Tab bar background color.';
$string['settingembedtheme'] = 'Embed Theme';
$string['settingembedtheme_desc'] = 'Embed Pen theme.';
$string['settingembedtheme_dark'] = 'Dark';
$string['settingembedtheme_light'] = 'Light';
$string['settingembedversion'] = 'Embed version';
$string['settingembedversion_desc'] = 'Embed Pen version';
$string['settingembedversion_desc'] = 'Embed Pen version.';
$string['settingformats'] = 'Apply to formats';
$string['settingformats_desc'] = 'The filter will be applied only if the original text was inserted in one of the selected formats.';
$string['settingheading'] = 'Information';
$string['settingheading_info'] = '<p>This is a text filter to embed a CodePen from <a href="http://codepen.io">codepen.io</a> into a text area in Moodle. Simply enable the plugin and paste the direct URL to a Pen in your content (or heading if enabled). A standard URL looks like this: <pre>http://codepen.io/[username]/pen/[Pen ID]</pre> For example: <pre>http://codepen.io/thedannywahl/pen/Gbdaj</pre></p><h4>Notes</h4><ul><li>CodePen does not have an API so we cannot manipulate the appearance of embeds on a per-Pen basis, so settings here are global.</li><li>If a user does not have javascript enabled a text fallback is provided with a link to the Pen.</li><li>Links to Pens are escaped if you do not want to embed. E.g.:<br/><code>&lt;a href="http://codepen.io/thedannywahl/pen/Gbdaj"&gt;http://codepen.io/thedannywahl/pen/Gbdaj&lt;/a&gt;</code></li><li>Make sure that if you have the "urltolink" filter enabled that the CodePen filter is listed first because links are escaped.</li><li>Do not use www. or cdpn.io short-link, these are not valid pen URLs. Visiting them in a browser always redirects to the full Pen URL path (as exampled above).</li><li>This filter only works with the /pen/ URL. It will not embed from other views like /full/ /live/ etc...</li></ul>';
$string['settingheight'] = 'Pen height';
$string['settingheight_desc'] = 'Set the height of all embedded Pens.';
$string['theme_override'] = 'Theme override';
$string['theme_override_desc'] = 'Following settings can be used to override theme.';
60 changes: 60 additions & 0 deletions settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@
get_string('settingheading', 'filter_codepen'),
get_string('settingheading_info', 'filter_codepen')));

// Settings.
$settings->add(new admin_setting_heading('filter_codepen/settings',
get_string('settings'),
''));
$settings->add(new admin_setting_configmulticheckbox('filter_codepen/formats',
get_string('settingformats', 'filter_codepen'),
get_string('settingformats_desc', 'filter_codepen'),
Expand All @@ -58,6 +62,62 @@
'light' => get_string('settingembedtheme_light', 'filter_codepen')
]
));
$settings->add(new admin_setting_configmulticheckbox('filter_codepen/defaulttab',
get_string('settingdefaulttab', 'filter_codepen'),
get_string('settingdefaulttab_desc', 'filter_codepen'),
['result' => 1],
[
'css' => get_string('settingdefaulttab_css', 'filter_codepen'),
'html' => get_string('settingdefaulttab_html', 'filter_codepen'),
'js' => get_string('settingdefaulttab_js', 'filter_codepen'),
'result' => get_string('settingdefaulttab_result', 'filter_codepen')
]));

// Theme override settings.
$settings->add(new admin_setting_heading('filter_codepen/theme_override',
get_string('theme_override', 'filter_codepen'),
get_string('theme_override_desc', 'filter_codepen')));

$settings->add(new admin_setting_configselect('filter_codepen/embedborder',
get_string('settingembedborder', 'filter_codepen'),
get_string('settingembedborder_desc', 'filter_codepen'),
'none',
[
'none' => get_string('none'),
'thin' => get_string('settingembedborder_thin', 'filter_codepen'),
'thick' => get_string('settingembedborder_thick', 'filter_codepen')
]
));
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedbordercolor',
get_string('settingembedbordercolor', 'filter_codepen'),
get_string('settingembedbordercolor_desc', 'filter_codepen'),
''
));
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedtabbarcolor',
get_string('settingembedtabbarcolor', 'filter_codepen'),
get_string('settingembedtabbarcolor_desc', 'filter_codepen'),
''
));
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedtablinkcolor',
get_string('settingembedtablinkcolor', 'filter_codepen'),
get_string('settingembedtablinkcolor_desc', 'filter_codepen'),
''
));
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedactivetabcolor',
get_string('settingembedactivetabcolor', 'filter_codepen'),
get_string('settingembedactivetabcolor_desc', 'filter_codepen'),
''
));
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedactivelinkcolor',
get_string('settingembedactivelinkcolor', 'filter_codepen'),
get_string('settingembedactivelinkcolor_desc', 'filter_codepen'),
''
));
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedlinklogocolor',
get_string('settingembedlinklogocolor', 'filter_codepen'),
get_string('settingembedlinklogocolor_desc', 'filter_codepen'),
''
));

$pen = 'http://codepen.io/thedannywahl/pen/Gbdaj';
$filter = new filter_codepen(context_system::instance(), ['formats' => [FORMAT_HTML]]);
Expand Down

0 comments on commit 1efe4af

Please sign in to comment.