chore: improve plugin

AlexanderPrendota · AlexanderPrendota · commit 0d12f2602fce · 2018-08-09T14:12:27.000+03:00
1) Support kotlin target platform
2) Support header before the snippet (option)
3) Support text description before the snippet (option)
diff --git a/app.js b/app.js
@@ -1,7 +1,56 @@
+const CONFIGURATION_PROPS = {
+    PLATFORM: 'platform',
+    HEAD: 'head',
+    TASK: 'task',
+    CODE: 'code'
+};
+
+const SELECTORS = {
+    HEAD: 'head',
+    TASK: 'task',
+    CODE: 'code'
+};
+
+const KOTLIN_PLAYGROUND_ATTRIBUTES = {
+    PLATFORM: 'data-target-platform',
+    THEME: 'theme'
+};
+
+const DEFAULT_THEME = 'idea';
+
 function initiateApp(configuration) {
-    let node = document.getElementById('code');
-    node.textContent = configuration["code"];
-    KotlinPlayground('code');
+
+    if (configuration[CONFIGURATION_PROPS.HEAD]) buildHeader(configuration[CONFIGURATION_PROPS.HEAD]);
+    if (configuration[CONFIGURATION_PROPS.TASK]) buildTask(configuration[CONFIGURATION_PROPS.TASK]);
+
+    const platform = configuration[CONFIGURATION_PROPS.PLATFORM];
+    const code = configuration[CONFIGURATION_PROPS.CODE];
+    if (platform && code) buildPlayground(code, platform);
+
+    KotlinPlayground(SELECTORS.CODE);
+}
+
+function buildHeader(name) {
+    return buildNode(name, SELECTORS.HEAD)
+}
+
+function buildTask(text) {
+    return buildNode(text, SELECTORS.TASK)
+}
+
+function buildPlayground(code, platform) {
+    const node = document.createElement(SELECTORS.CODE);
+    node.setAttribute(KOTLIN_PLAYGROUND_ATTRIBUTES.THEME, DEFAULT_THEME);
+    node.setAttribute(KOTLIN_PLAYGROUND_ATTRIBUTES.PLATFORM, platform);
+    node.textContent = code;
+    document.body.appendChild(node);
+}
+
+function buildNode(text, selector) {
+    const node = document.createElement('div');
+    node.className = selector;
+    node.textContent = text;
+    document.body.appendChild(node);
 }
 
 courseraApi.callMethod({
diff --git a/index.html b/index.html
@@ -3,9 +3,9 @@
 <head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="https://www.coursera.org/widget/coursera-connect.css">
+    <link rel="stylesheet" href="./style.css">
 </head>
-<body>
-<code id="code" theme="idea"></code>
+<body class="playground">
 <script src="https://www.coursera.org/widget/coursera-widget-connect-v0.js"></script>
 <script src="https://unpkg.com/kotlin-playground@1"></script>
 <script src="./app.js"></script>
diff --git a/manifest.json b/manifest.json
@@ -12,7 +12,10 @@
     {
       "name": "Hello world!",
       "configuration": {
-        "code": "fun main(args: Array<String>) {\n println(\"Hello world\")\n}"
+        "code": "fun main(args: Array<String>) {\n println(\"Hello world\")\n}",
+        "platform": "java",
+        "task": "We declare a package-level function main which returns Unit and takes\nan Array of strings as a parameter. Note that semicolons are optional.",
+        "head": "Hello World!"
       }
     }
   ],
diff --git a/style.css b/style.css
@@ -0,0 +1,27 @@
+code {
+    display: none;
+}
+
+.playground {
+    margin: 10px;
+    font-family: 'OpenSans-Light', Arial, sans-serif;
+}
+
+.head {
+    text-align: center;
+    color: #27282c;
+    font-size: 2.125rem;
+    line-height: 2.625rem;
+    font-weight: normal;
+    margin-bottom: 20px;
+}
+
+.task {
+    letter-spacing: normal;
+    white-space: pre-wrap;
+    margin-left: 20px;
+    color: #757575;
+    font-size: 14px;
+    line-height: 21px;
+    margin-bottom: 15px;
+}

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,10 @@`
`12`	`12`	`{`
`13`	`13`	`"name": "Hello world!",`
`14`	`14`	`"configuration": {`
`15`		`- "code": "fun main(args: Array<String>) {\n println(\"Hello world\")\n}"`
	`15`	`+ "code": "fun main(args: Array<String>) {\n println(\"Hello world\")\n}",`
	`16`	`+ "platform": "java",`
	`17`	`+ "task": "We declare a package-level function main which returns Unit and takes\nan Array of strings as a parameter. Note that semicolons are optional.",`
	`18`	`+ "head": "Hello World!"`
`16`	`19`	`}`
`17`	`20`	`}`
`18`	`21`	`],`