templates

bem-events · Nov 19, 2015 · 17d9a63 · 17d9a63
1 parent 51ec219
commit 17d9a63
Show file tree

Hide file tree

Showing 7 changed files with 407 additions and 393 deletions.
diff --git a/common.blocks/content/content.bemhtml.js b/common.blocks/content/content.bemhtml.js
@@ -0,0 +1,3 @@
+block('content').elem('header')(
+    tag()('h3')
+)
diff --git a/common.blocks/link/link.bemhtml.js b/common.blocks/link/link.bemhtml.js
@@ -0,0 +1,7 @@
+block('link')(
+    tag()('a'),
+
+    attrs()(function() {
+        return { href: this.ctx.url };
+    })
+)
diff --git a/common.blocks/list/list.bemhtml.js b/common.blocks/list/list.bemhtml.js
@@ -0,0 +1,7 @@
+block('list')(
+    tag()('ul')
+)
+
+block('list').elem('item')(
+    tag()('li')
+)
diff --git a/common.blocks/logo/logo.bemhtml.js b/common.blocks/logo/logo.bemhtml.js
@@ -0,0 +1,3 @@
+block('logo')(
+    tag()('h1')
+)
diff --git a/common.blocks/menu/menu.bemhtml.js b/common.blocks/menu/menu.bemhtml.js
@@ -0,0 +1,40 @@
+block('menu')(
+    tag()('ul'),
+
+    /**
+     * Вынесем в шаблон всю разметку,
+     * которая необходима для представления.
+     *
+     * Семантика блока простая: меню и ссылки в нем
+     *
+     * {
+     *     block: 'menu',
+     *     content: [
+     *         { url: '#', content: 'Привет' },
+     *         { url: '#', content: 'БЭМ' }
+     *     ]
+     * }
+     */
+    content()(function() {
+        var content = this.ctx.content;
+
+        return content.map(function(item) {
+            return {
+                elem: 'item',
+                content: {
+                    block: 'link',
+                    url: item.url,
+                    mix: {
+                        block: 'menu',
+                        elem: 'link'
+                    },
+                    content: item.content
+                }
+            };
+        });
+    })
+)
+
+block('menu').elem('item')(
+    tag()('li')
+)
diff --git a/common.blocks/page/page.bemhtml.js b/common.blocks/page/page.bemhtml.js
@@ -0,0 +1,76 @@
+/**
+ * Блок page всегда имеет одну и ту же html-обвязку,
+ * удобно вынести это в шаблон один раз.
+ *
+ * АПИ блока page:
+ *
+ * {
+ *     block: 'page',
+ *     styles: [...],
+ *     scripts: [...],
+ *     title: '...'
+ * }
+ *
+ * Блок page очевидно используется на любой странице,
+ * поэтому он есть в стандартной библиотеке блоков bem-core.
+ */
+block('page').replace()(function() {
+    var ctx = this.ctx;
+
+    /**
+     * HTML-обвязка страницы
+     */
+    return [
+        '<!DOCTYPE html>',
+        {
+            tag: 'html',
+            content: [
+                {
+                    tag: 'head',
+                    content: [
+                        {
+                            tag: 'meta',
+                            attrs: {
+                                charset: 'utf-8'
+                            }
+                        },
+                        {
+                            tag: 'title',
+                            content: ctx.title
+                        },
+                        ctx.styles.map(function(style) {
+                            return {
+                                tag: 'link',
+                                attrs: {
+                                    rel: 'stylesheet',
+                                    href: style,
+                                    type: 'text/css',
+                                    media: 'all'
+                                }
+                            };
+                        })
+                    ]
+                },
+                {
+                    tag: 'body',
+                    cls: 'page',
+                    content: [
+                        ctx.content,
+                        /**
+                         * Скрипты в конце body
+                         */
+                        this.ctx.scripts.map(function(script) {
+                            return {
+                                tag: 'script',
+                                attrs: {
+                                    type: "text/javascript",
+                                    src: script
+                                }
+                            }
+                        })
+                    ]
+                }
+            ]
+        }
+    ]
+})