Skip to content

Commit 1efe4af

Browse files
ak4t0shak4t0sh
committed
#3 : add settings to override theme
1 parent f1bebc6 commit 1efe4af

File tree

4 files changed

+140
-8
lines changed

4 files changed

+140
-8
lines changed

‎CHANGES.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,7 @@
22

33
* Add support for https pen
44
* Add setting to select which embed version to use and set version 2 as default value
5+
* Add setting to select which tabs must be displayed by default
56
* Add a theme selector setting with CodePen default themes
7+
* Add settings to override theme
68
* Add a preview panel

‎filter.php‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,10 +132,54 @@ protected function convert_urls_into_codepens(&$text) {
132132
}
133133
$embedversion = get_config('filter_codepen', 'embedversion');
134134
$embedtheme = get_config('filter_codepen', 'embedtheme');
135+
$defaulttabs = get_config('filter_codepen', 'defaulttab');
136+
137+
// Theme override settings.
138+
$embedborder = get_config('filter_codepen', 'embedborder');
139+
if ($embedborder != "none") {
140+
$embedborder = 'data-border="' . $embedborder . '" ';
141+
} else {
142+
$embedborder = '';
143+
}
144+
$embedbordercolor = get_config('filter_codepen', 'embedbordercolor');
145+
if (!empty($embedborder) && !empty($embedbordercolor)) {
146+
$embedbordercolor = 'data-border-color="' . $embedbordercolor . '" ';
147+
} else {
148+
$embedbordercolor = '';
149+
}
150+
$embedtabbarcolor = get_config('filter_codepen', 'embedtabbarcolor');
151+
if (!empty($embedtabbarcolor)) {
152+
$embedtabbarcolor = 'data-tab-bar-color="' . $embedtabbarcolor . '" ';
153+
}
154+
$embedtablinkcolor = get_config('filter_codepen', 'embedtablinkcolor');
155+
if (!empty($embedtablinkcolor)) {
156+
$embedtablinkcolor = 'data-tab-link-color="' . $embedtablinkcolor . '" ';
157+
}
158+
$embedactivetabcolor = get_config('filter_codepen', 'embedactivetabcolor');
159+
if (!empty($embedactivetabcolor)) {
160+
$embedactivetabcolor = 'data-active-tab-color="' . $embedactivetabcolor . '" ';
161+
}
162+
$embedactivelinkcolor = get_config('filter_codepen', 'embedactivelinkcolor');
163+
if (!empty($embedactivelinkcolor)) {
164+
$embedactivelinkcolor = 'data-active-link-color="' . $embedactivelinkcolor . '" ';
165+
}
166+
$embedlinklogocolor = get_config('filter_codepen', 'embedlinklogocolor');
167+
if (!empty($embedlinklogocolor)) {
168+
$embedlinklogocolor = 'data-link-logo-color="' . $embedlinklogocolor . '" ';
169+
}
135170

136171
$text = preg_replace($regex, '<p data-embed-version="' . $embedversion .
172+
'" data-default-tab="' . $defaulttabs .
137173
'" data-height="' . $height .
138-
'" data-theme-id="' . $embedtheme . '" data-slug-hash="$6" data-user="$4" data-default-tab="result" class="codepen">
174+
'" data-theme-id="' . $embedtheme . '" '
175+
. $embedborder
176+
. $embedbordercolor
177+
. $embedtabbarcolor
178+
. $embedtablinkcolor
179+
. $embedactivetabcolor
180+
. $embedactivelinkcolor
181+
. $embedlinklogocolor . '
182+
data-slug-hash="$6" data-user="$4" data-default-tab="result" class="codepen">
139183
See the pen <a href="$0">$0</a> by (<a href="https://$3$4">@$4</a>) on <a href="https://$3">CodePen</a></p>
140184
<script async src="//codepen.io/assets/embed/ei.js"></script>', $text);
141185

‎lang/en/filter_codepen.php‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,41 @@
2828

2929
$string['filtername'] = 'CodePen';
3030
$string['preview_desc'] = 'Save your settings to see the result.';
31-
$string['settingformats'] = 'Apply to formats';
32-
$string['settingformats_desc'] = 'The filter will be applied only if the original text was inserted in one of the selected formats.';
33-
$string['settingheading'] = 'Information';
34-
$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>';
35-
$string['settingheight'] = 'Pen height';
36-
$string['settingheight_desc'] = 'Set the height of all embedded Pens.';
31+
$string['settingdefaulttab'] = 'Default tabs';
32+
$string['settingdefaulttab_css'] = 'CSS';
33+
$string['settingdefaulttab_desc'] = 'Default tabs to display.<br>
34+
Maximum 2 at time, and only one if you set "Embed version" to "1".<br>
35+
"Result" tab is displayed if nothing is selected.';
36+
$string['settingdefaulttab_js'] = 'JavaScript';
37+
$string['settingdefaulttab_html'] = 'HTML';
38+
$string['settingdefaulttab_result'] = 'Result';
39+
$string['settingembedactivelinkcolor'] = 'Active link color';
40+
$string['settingembedactivelinkcolor_desc'] = 'Active tab text color.';
41+
$string['settingembedactivetabcolor'] = 'Active tab color';
42+
$string['settingembedactivetabcolor_desc'] = 'Active tab background color.';
43+
$string['settingembedborder'] = 'Border';
44+
$string['settingembedborder_desc'] = 'Border style.';
45+
$string['settingembedborder_thick'] = 'Thick';
46+
$string['settingembedborder_thin'] = 'Thin';
47+
$string['settingembedbordercolor'] = 'Border color';
48+
$string['settingembedbordercolor_desc'] = 'Embed Pen border color. Ignored if "Border" is set to "none".';
49+
$string['settingembedlinklogocolor'] = 'Link logo color';
50+
$string['settingembedlinklogocolor_desc'] = 'CodePen edit logo color.';
51+
$string['settingembedtablinkcolor'] = 'Tab link color';
52+
$string['settingembedtablinkcolor_desc'] = 'Tab bar text color.';
53+
$string['settingembedtabbarcolor'] = 'Tab bar color';
54+
$string['settingembedtabbarcolor_desc'] = 'Tab bar background color.';
3755
$string['settingembedtheme'] = 'Embed Theme';
3856
$string['settingembedtheme_desc'] = 'Embed Pen theme.';
3957
$string['settingembedtheme_dark'] = 'Dark';
4058
$string['settingembedtheme_light'] = 'Light';
4159
$string['settingembedversion'] = 'Embed version';
42-
$string['settingembedversion_desc'] = 'Embed Pen version';
60+
$string['settingembedversion_desc'] = 'Embed Pen version.';
61+
$string['settingformats'] = 'Apply to formats';
62+
$string['settingformats_desc'] = 'The filter will be applied only if the original text was inserted in one of the selected formats.';
63+
$string['settingheading'] = 'Information';
64+
$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>';
65+
$string['settingheight'] = 'Pen height';
66+
$string['settingheight_desc'] = 'Set the height of all embedded Pens.';
67+
$string['theme_override'] = 'Theme override';
68+
$string['theme_override_desc'] = 'Following settings can be used to override theme.';

‎settings.php‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
get_string('settingheading', 'filter_codepen'),
3434
get_string('settingheading_info', 'filter_codepen')));
3535

36+
// Settings.
37+
$settings->add(new admin_setting_heading('filter_codepen/settings',
38+
get_string('settings'),
39+
''));
3640
$settings->add(new admin_setting_configmulticheckbox('filter_codepen/formats',
3741
get_string('settingformats', 'filter_codepen'),
3842
get_string('settingformats_desc', 'filter_codepen'),
@@ -58,6 +62,62 @@
5862
'light' => get_string('settingembedtheme_light', 'filter_codepen')
5963
]
6064
));
65+
$settings->add(new admin_setting_configmulticheckbox('filter_codepen/defaulttab',
66+
get_string('settingdefaulttab', 'filter_codepen'),
67+
get_string('settingdefaulttab_desc', 'filter_codepen'),
68+
['result' => 1],
69+
[
70+
'css' => get_string('settingdefaulttab_css', 'filter_codepen'),
71+
'html' => get_string('settingdefaulttab_html', 'filter_codepen'),
72+
'js' => get_string('settingdefaulttab_js', 'filter_codepen'),
73+
'result' => get_string('settingdefaulttab_result', 'filter_codepen')
74+
]));
75+
76+
// Theme override settings.
77+
$settings->add(new admin_setting_heading('filter_codepen/theme_override',
78+
get_string('theme_override', 'filter_codepen'),
79+
get_string('theme_override_desc', 'filter_codepen')));
80+
81+
$settings->add(new admin_setting_configselect('filter_codepen/embedborder',
82+
get_string('settingembedborder', 'filter_codepen'),
83+
get_string('settingembedborder_desc', 'filter_codepen'),
84+
'none',
85+
[
86+
'none' => get_string('none'),
87+
'thin' => get_string('settingembedborder_thin', 'filter_codepen'),
88+
'thick' => get_string('settingembedborder_thick', 'filter_codepen')
89+
]
90+
));
91+
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedbordercolor',
92+
get_string('settingembedbordercolor', 'filter_codepen'),
93+
get_string('settingembedbordercolor_desc', 'filter_codepen'),
94+
''
95+
));
96+
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedtabbarcolor',
97+
get_string('settingembedtabbarcolor', 'filter_codepen'),
98+
get_string('settingembedtabbarcolor_desc', 'filter_codepen'),
99+
''
100+
));
101+
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedtablinkcolor',
102+
get_string('settingembedtablinkcolor', 'filter_codepen'),
103+
get_string('settingembedtablinkcolor_desc', 'filter_codepen'),
104+
''
105+
));
106+
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedactivetabcolor',
107+
get_string('settingembedactivetabcolor', 'filter_codepen'),
108+
get_string('settingembedactivetabcolor_desc', 'filter_codepen'),
109+
''
110+
));
111+
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedactivelinkcolor',
112+
get_string('settingembedactivelinkcolor', 'filter_codepen'),
113+
get_string('settingembedactivelinkcolor_desc', 'filter_codepen'),
114+
''
115+
));
116+
$settings->add(new admin_setting_configcolourpicker('filter_codepen/embedlinklogocolor',
117+
get_string('settingembedlinklogocolor', 'filter_codepen'),
118+
get_string('settingembedlinklogocolor_desc', 'filter_codepen'),
119+
''
120+
));
61121

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

0 commit comments

Comments
 (0)