lesson 9: wrap the Bulma.io message component.

.idea/workspace.xml

@@ -2,11 +2,9 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="0f813586-48e2-4acf-8923-221617ab434f" name="Default" comment="">
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/php.xml" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson8/code.js" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson8/index.html" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson8/styles.css" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/misc.xml" afterPath="$PROJECT_DIR$/.idea/misc.xml" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson9/code.js" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson9/index.html" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson9/styles.css" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
@@ -44,6 +42,9 @@
         <option value="$PROJECT_DIR$/.eslintrc.json" />
         <option value="/HTML Fragment (code.js:41).html" />
         <option value="$PROJECT_DIR$/lesson8/code.js" />
+        <option value="$PROJECT_DIR$/lesson9/index.html" />
+        <option value="$PROJECT_DIR$/lesson9/styles.css" />
+        <option value="$PROJECT_DIR$/lesson9/code.js" />
       </list>
     </option>
   </component>
@@ -100,21 +101,7 @@
               <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
-              <option name="myItemId" value="lesson8" />
-              <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
-            </PATH_ELEMENT>
-          </PATH>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="laracasts" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="laracasts" />
-              <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="lesson7" />
+              <option name="myItemId" value="lesson9" />
               <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
             </PATH_ELEMENT>
           </PATH>
@@ -135,6 +122,7 @@
     <property name="node.js.path.for.package.eslint" value="project" />
     <property name="node.js.detected.package.eslint" value="true" />
     <property name="node.js.selected.package.eslint" value="$PROJECT_DIR$/node_modules/eslint" />
+    <property name="PluginDummyText.Genre" value="latin" />
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
@@ -164,12 +152,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1496664325689</updated>
-      <workItem from="1496664327039" duration="4031000" />
+      <workItem from="1496664327039" duration="5650000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="4031000" />
+    <option name="totallyTimeSpent" value="5650000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1440" height="877" extended-state="6" />
@@ -274,5 +262,41 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/styles.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="180">
+          <caret line="12" column="8" lean-forward="true" selection-start-line="12" selection-start-column="8" selection-end-line="12" selection-end-column="8" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lesson9/code.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="570">
+          <caret line="38" column="0" lean-forward="true" selection-start-line="38" selection-start-column="0" selection-end-line="38" selection-end-column="0" />
+          <folding>
+            <marker date="1496676750000" expanded="true" signature="126:391" ph="..." />
+            <marker date="1496676750000" expanded="true" signature="157:324" ph="..." />
+            <marker date="1496676750000" expanded="true" signature="356:380" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lesson9/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="420">
+          <caret line="22" column="0" lean-forward="false" selection-start-line="22" selection-start-column="0" selection-end-line="22" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lesson9/styles.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="300">
+          <caret line="20" column="15" lean-forward="false" selection-start-line="20" selection-start-column="15" selection-end-line="20" selection-end-column="15" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>

lesson9/code.js

@@ -0,0 +1,38 @@
+Vue.component('message', {
+  props: [
+    'body',
+    'title',
+  ],
+
+  template: `
+<article class="message" v-show="isVisible">
+  <div class="message-header">
+    {{ title }}
+    <button type="button" @click="isVisible = false">hide inline</button>
+    <button type="button" @click="hideMessage">hide method</button>
+  </div>
+  
+  <div class="message-body">
+    {{ body }}
+  </div>
+</article>
+`,
+
+  data() {
+    return {
+      isVisible: true,
+    };
+  },
+
+  methods: {
+    hideMessage() {
+      this.isVisible = false;
+    }
+  },
+});
+
+const app = new Vue({
+  el: '#root',
+  data: {
+  },
+});

lesson9/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css" />
+    <link rel="stylesheet" href="../styles.css" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav>
+      <h1><span class="index">9</span>Exercise 1: Bulma message</h1>
+      <ul>
+        <li><a href="../lesson8">Prev</a></li>
+        <li><a href="../lesson10">Next</a></li>
+      </ul>
+    </nav>
+
+    <div id="root" class="container">
+      <message title="Hello world" body="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></message>
+
+      <message title="Hello universe" body="Bla, bla, bla"></message>
+    </div>
+
+
+    <script src="../lib/vue-2.1.3.js"></script>
+    <script src="code.js"></script>
+  </body>
+</html>

lesson9/styles.css

@@ -0,0 +1,23 @@
+body {
+  padding-top: 40px;
+}
+
+nav li {
+  display: inline;
+}
+
+nav h1 span {
+  margin-right: 0.3em;
+}
+
+button {
+  display: block;
+}
+
+[v-cloak] {
+  display: none;
+}
+
+.message button {
+  float: right;
+}