mumuki-styles 1.15.0 → 1.15.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b6d21886367a4e8d9a4894a48b17f5ec8e847f37
-  data.tar.gz: 82be8e353ddb05fe5e5b39f3a58fb86ee7c4bc2f
+  metadata.gz: 49b95f8fcec5ef36f11660173d8f730eb66f3a4f
+  data.tar.gz: e39c877bc60abca963835abacf1580b774cb1d70
 SHA512:
-  metadata.gz: 7463298ea8a430b07bf4674d95a8548673b80679c74d156ef5292fd7e099c770563fb81b5b61842b67d82e6daff7d7ac5ad84c8cf1c4112f0d29a3c7d7e8da6d
-  data.tar.gz: b9eb1089e641438b00fd503dbeed7a65328ddb021f3a9b1723253891ceb0c52be533fc08d521e5d691ee07d4871feaca51ef2fc292f92b27db47fc2e9aa3639c
+  metadata.gz: 35a83efa8f1f7d787d0579570519578fa5d6ddb0861cc858f793425670d19ff3d3b1ea6b379b2afda46fcf961c73fb26c737dc232e1a82992e9679bd75a7317b
+  data.tar.gz: d025d168648ad52f245cfc2fcb4d9a1f38002b25bb1851d5a6a4d42c1465d79edfa6824d856c27e11548bb4ecd15d59a3f5842b38995769c9b9b6b36768ba6d7

data/README.md

@@ -87,89 +87,94 @@
 
 * `data-can-browse`: (Boolean) user can enter into a folder (default `false`).
 * `data-on-file-open`: (Function) receives 2 params, file name and file content. If no function given user can't open files.
-* `data-file`: (Object) object `keys` are the names of the resources and object `values` are theirs contents (sub-object for a folder and a string for a file).
+* `data-file`: (Hash) hash `keys` are the names of the resources and hash `values` are theirs contents (sub-hash for a folder and a string for a file).
 
 With jQuery you can use function `$('.mu-file-browser').renderFileBrowser()`;
 
 ```html
 <div
   class='mu-erd'
-  data-entities='[
-    {
-      "name": "Entity_1",
-      "columns": [
-        {
-          "name": "ent1_id",
-          "type": "Integer",
-          "pk": true
-        },
-        {
-          "name": "ent2_id",
-          "type": "Integer",
-          "pk": true,
-          "fk": {
-            "to": { "entity": "Entity_2", "column": "ent2_id" },
-            "type": "one_to_one"
-          }
-        },
-        {
-          "name": "ent1_description",
-          "type": "Varchar"
+  data-entities='{
+    "Entity_1": {
+      "ent1_id": {
+        "type": "Integer",
+        "pk": true
+      },
+      "ent2_id": {
+        "type": "Integer",
+        "pk": true,
+        "fk": {
+          "to": { "entity": "Entity_2", "column": "ent2_id" },
+          "type": "one_to_one"
         }
-      ]
+      },
+      "ent1_description": {
+        "type": "Varchar"
+      }
     },
-    {
-      "name": "Entity_2",
-      "columns": [
-        {
-          "name": "ent2_id",
-          "type": "Integer",
-          "pk": true
-        }
-      ]
+    "Entity_2": {
+      "ent2_id": {
+        "type": "Integer",
+        "pk": true
+      }
     },
-    {
-      "name": "Entity_3",
-      "columns": [
-        {
-          "name": "ent3_id",
-          "type": "Integer",
-          "pk": true
-        },
-        {
-          "name": "ent2_id",
-          "type": "Integer",
-          "pk": true,
-          "fk": {
-            "to": { "entity": "Entity_2", "column": "ent2_id" },
-            "type": "many_to_one"
-          }
-        },
-        {
-          "name": "ent1_description",
-          "type": "Varchar"
+    "Entity_3": {
+      "ent3_id": {
+        "type": "Integer",
+        "pk": true
+      },
+      "ent2_id": {
+        "type": "Integer",
+        "pk": true,
+        "fk": {
+          "to": { "entity": "Entity_2", "column": "ent2_id" },
+          "type": "many_to_one"
         }
-      ]
+      },
+      "ent1_description": {
+        "type": "Varchar"
+      }
     }
-  ]'>
+  }'>
 </div>
 ```
 
 #### mu-erd attributes
 
-* `data-entities`: (`Array<Object>`) Every entity object of the array should have:
-  * `name`: (`String`) Entity name.
-  * `columns`: (`Array<Object>`) Every column object of the array should have:
-    * `name`: (`String`) Column field,
-    * `type`: (`String`) Column type (Char, Number, Integer, Varchar),
-    * `pk`: (`Boolean` - Optional) True if column es PK or part of one,
-    * `fk`: (`Object` - Optional) with properties:
-      * `to`: (`Object`) { entity: (Foreign entity), column: (Foreign column name) }
-      * `type`: (`String`) one\_to\_one | one\_to\_many | many\_to\_one | many\_to\_many
+* `data-entities`: (`Hash<EntityName, EntityColumns>`)
+  * `EntityName`: (`String`).
+  * `EntityColumns`: (`Hash<ColumnName, ColumnMetadata>`)
+    * `ColumnName`: (`String`)
+    * `ColumnMetadata`: (`Hash`)
+      * `type`: (`String`) Column type (Char, Number, Integer, Varchar, etc),
+      * `pk`: (`Boolean` - Optional) True if column es PK or part of one,
+      * `fk`: (`Hash` - Optional) with properties:
+        * `to`: (`Object`) { entity: (Foreign entity), column: (Foreign column name) }
+        * `type`: (`String`) one\_to\_one | one\_to\_many | many\_to\_one | many\_to\_many
 
 With jQuery you can use function `$('.mu-erd').renderERD()`;
 
 
+```html
+  <div
+    class='mu-browser'
+    data-url='https://mi-sitio.mumuki.io'
+    data-title='Mumuki - Aprender a programar'
+    data-favicon='https://mumuki.io/logo-alt.png'
+    data-srcdoc='<p>Hello Mumuki Browser</p>'>
+  </div>
+```
+
+#### mu-browser attributes
+
+* `data-srcdoc`: HTML of the page to show
+* `data-url`: (Optional) URL of the page (default: `https://mumuki.io`)
+* `data-title`: (Optional) Title of the browser's tab (default: `Mumuki`)
+* `data-favicon`: (Optional) Favicon of the brower's tab (default: `https://mumuki.io/logo-alt.png`)
+
+With jQuery you can use function `$('.mu-erd').renderWebBrowser()`;
+
+
 ## Installing
 
 You usually add `mumuki-styles` to an empty project. First you need to add it to your Gemfile:

data/app/assets/javascripts/mumuki-styles.js

@@ -12952,11 +12952,33 @@ mumuki.load(function () {
     return ['<line x1="', x1, '" x2="', x2, '" y1="', y1, '" y2="', y2, '" stroke="black" stroke-width="1"/>'].join('');
   }
 
+  function mapEntityColumns(columnsObject) {
+    var columns = [];
+    for (var key in columnsObject) {
+      var column = columnsObject[key];
+      column.name = key;
+      columns.push(column);
+    }
+    return columns;
+  }
+
+  function mapEntities(entitiesObject) {
+    var entities = [];
+    for (var key in entitiesObject) {
+      var entity = {};
+      entity.name = key;
+      entity.columns = mapEntityColumns(entitiesObject[key]);
+      entities.push(entity);
+    }
+    return entities;
+  }
+
   $.fn.renderERD = function () {
     var self = this;
+    self.empty();
     self.each(function (i) {
       var $diagram = $(self[i]);
-      var entities = $diagram.data('entities');
+      var entities = mapEntities($diagram.data('entities'));
       appendEntities($diagram, entities);
       appendConnectors($diagram, entities);
     });
@@ -12964,7 +12986,7 @@ mumuki.load(function () {
   }
 
   window.addEventListener('resize', function () {
-    $('.mu-erd').empty().renderERD();
+    $('.mu-erd').renderERD();
   });
 
   $('.mu-erd').renderERD();
@@ -12974,9 +12996,9 @@ mumuki.load(function () {
 mumuki.load(function () {
 
   function getBrowserHeader($browser) {
-    var title = $browser.data('title') || 'Mumuki';
-    var favicon = $browser.data('favicon') || 'https://mumuki.io/logo-alt-png';
     var url = $browser.data('url') || 'https://mumuki.io';
+    var title = $browser.data('title') || 'Mumuki';
+    var favicon = $browser.data('favicon') || 'https://mumuki.io/logo-alt.png';
     return $([
       '<header>',
       '  <ul class="mu-browser-tabs">',
@@ -12998,10 +13020,24 @@ mumuki.load(function () {
     ].join(''))
   }
 
+  var _htmlEscapes = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  }
+
+  function escapeHTML(html) {
+    return html.replace(/[&<>"']/g, function (chr) {
+      return _htmlEscapes[chr];
+    })
+  }
+
   function getBrowserMain($browser) {
     return $([
       '<main>',
-      '  <iframe srcdoc="', $browser.data('srcdoc'), '" frameborder="0"></iframe>',
+      '  <iframe srcdoc="', escapeHTML($browser.data('srcdoc')), '" frameborder="0"></iframe>',
       '</main>'
     ].join(''));
   }
@@ -13019,6 +13055,10 @@ mumuki.load(function () {
 
       $browser.append($header);
       $browser.append($main);
+
+      var mainHeight = parseInt($browser.width() / (16/9), 10) - $header.height();
+
+      $main.css({ 'height': mainHeight, 'min-height': mainHeight });
     });
 
     return self;

data/app/assets/stylesheets/components/_browser.scss

@@ -5,7 +5,6 @@ $mu-color-browser-inactive-tabs: darken($mu-color-component-title-background, 5%
   width: 100%;
   position: relative;
   header {
-    margin: 15px;
     margin-bottom: 0;
     @include display-flex(column nowrap, flex-start, flex-start);
     .mu-browser-tabs {
@@ -91,7 +90,6 @@ $mu-color-browser-inactive-tabs: darken($mu-color-component-title-background, 5%
     position: relative;
     border: $mu-component-border;
     border-top: none;
-    margin: 15px;
     margin-top: 0;
     height: 500px;
     min-height: 500px;

data/app/assets/stylesheets/mumuki-styles.css

@@ -9408,7 +9408,6 @@ pre code {
   width: 100%;
   position: relative; }
   .mu-browser header {
-    margin: 15px;
     margin-bottom: 0;
     display: flex;
     flex-flow: column nowrap;
@@ -9486,7 +9485,6 @@ pre code {
     position: relative;
     border: 2px solid #cfd9db;
     border-top: none;
-    margin: 15px;
     margin-top: 0;
     height: 500px;
     min-height: 500px; }

data/lib/mumuki/styles/version.rb

@@ -1,5 +1,5 @@
 module Mumuki
   module Styles
-    VERSION = "1.15.0"
+    VERSION = "1.15.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mumuki-styles
 version: !ruby/object:Gem::Version
-  version: 1.15.0
+  version: 1.15.1
 platform: ruby
 authors:
 - Federico Scarpa
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-12-26 00:00:00.000000000 Z
+date: 2017-12-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler