bem-on-rails 0.0.5 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 528efc9c4ee0620d95e5923c59b8ab349d27cf3f
-  data.tar.gz: 094484ca8182ccb9d9e519a65a6868a093e804cb
+  metadata.gz: 34fc7f94fc556482ce63533af0fad010a4317cbc
+  data.tar.gz: 4b63348acd65d33a4644afdf7abf16d884781e6e
 SHA512:
-  metadata.gz: aefa6d3c4ce10fa5823245a77db22ca88d48d5a5bf2b91b105ad7c8bb575b569cd235c563e54f1266a71f9be63e0b4f7168d2a32560bb3050ea956efff92b2d9
-  data.tar.gz: 365656e97e01dd2654133f1fc68efde5a21e8fdf4328309a63605b3ed27277ed7595903b14f9e5fe050905288fe559390e68e329bd17ecf5121ba820a5df783c
+  metadata.gz: ba198e429ab748f4abd633fced46c991ba867862ebd66b38c615942298cc912eb996e3852f5e27b389e4a0449f5db7e42daa952ee50bb7085d96bf1bb5fbb3df
+  data.tar.gz: 47c0b1de4f323e6b9e3eb35d6b3da4fbf065b2f3b2c54ed254c814aaece8f81c881739ff9b45360fd220141ba7020671ba3b7b4de905c6abf8cea3e7e6a55c89

data/CHANGELOG.md

@@ -1,13 +1,21 @@
-## v0.0.1
+## v1.0.0
 
-* first release with small functionality
+* remove unneeded thor tasks
+* use canonical BEM naming
+* use compatibility filesystem structure with another BEM libraries
+* use compatibility with BEMSJON renderer methods
+* errors fixes and optimize
 
-## v0.0.2
+## v0.0.5
 
-* rendering blocks in block
-* fix trubles with mods without value
-* add custom attributes for tags
-* add custom classes for tags
+* work with levels
+* errors fixes
+
+## v0.0.4
+
+* more refactoring
+* add mix functionality
+* walking to clean code
 
 ## v0.0.3
 
@@ -15,13 +23,13 @@
 * extract views folder includes to railtie
 * update install generator
 
-## v0.0.4
+## v0.0.2
 
-* more refactoring
-* add mix functionality
-* walking to clean code
+* rendering blocks in block
+* fix trubles with mods without value
+* add custom attributes for tags
+* add custom classes for tags
 
-## v0.0.5
+## v0.0.1
 
-* work with levels
-* errors fixes
+* first release with small functionality

data/README.md

@@ -1,9 +1,8 @@
-[![Bem on Rails](http://habrastorage.org/storage3/551/97d/0c5/55197d0c503e312952195b2ae0e4c337.png)](https://github.com/verybigman/bem-on-rails)
+# BEM on Rails
 
-# BEM on Rails [![Code Climate](https://codeclimate.com/github/verybigman/bem-on-rails.png)](https://codeclimate.com/github/verybigman/bem-on-rails)
+This README also available in [russian](https://github.com/verybigman/bem-on-rails/blob/master/README.ru.md).
 
-Work with BEM methodology in Rails applications. BEM on Rails is ruby copy from bem-tools. 
-You can read about bem-tools [here](http://bem.info/tools/bem/) and BEM methodology [here](http://bem.info/method/).
+Work with BEM methodology in Rails applications. BEM on Rails is ruby fork of bem-tools. You can read about bem-tools [here](http://bem.info/tools/bem/) and BEM methodology [here](http://bem.info/method/). Also i talk about this gem in russian on YaC 2013, you can watch this [here](http://tech.yandex.ru/events/bemup/yac-bemup/talks/1349/).
 
 ## Installation
 
@@ -18,140 +17,91 @@ And then execute:
 Or install it yourself as:
 
     $ gem install bem-on-rails
-    
+
 Then you should run install generator:
 
     $ rails g bemonrails:install
 
-This generator creates Thor task with templates. You should run to watch your new instruments:
-    
-    $ thor -T 
-
-If you want use default level, you must be create folders tree for it:
-
-    $ thor bem:levels -a --default
-    
-You should restart server after install. 
-You can customize everythink in initializers/bem.rb!
+You should restart server after install.
 
 ## Usage
 
-You can create blocks, elements, modificators and groups for blocks. It's awesome! Also you can remove them and watch lists of blocks, block elements, blocks mods and etc. Try thor help for more info.
-
-Default blocks folder structure:
+You can create blocks, elements and them modificators on levels. Default folder structure:
 
 - **bem**
     - **level_name**
         - **block_name**
-            - **elements**
-                - **__element_name**
-                    - __element_name.html.haml
-                    - __element_name.css.sass
-                    - __element_name.coffee
-                    - __element_name.md
-            - **mods**
-                - **_mod_name**
-                    - **_mod_value**
-                    - _mod_name.css.sass
-                    - _mod_name.coffee
-                    - _mod_name.md
+            - **__element_name**
+                - block-name__element_name.html.haml
+                - block-name__element_name.css.sass
+                - block-name__element_name.coffee
+                - block-name__element_name.md
+            - **_mod_name**
+                - block-name_mod_name.css.sass
+                - block-name_mod_name.coffee
+                - block-name_mod_name.md
             - block_name.html.haml
             - block_name.css.sass
             - block_name.coffee
             - block_name.md
 
-You can specify all prefixes for blocks, elements and mods in bem.rb initializer.
-
-**All blocks now creates on levels.**
-
-### Levels
-
-Create new level:
-
-    $ thor bem:levels -a -n level_name
-    
-Get from git:
-
-    $ thor bem:levels -a -g git@github.com:verybigman/bem-controls.git
-    
-Copy from directory:
-
-    $ thor bem:levels -a -d ~/path/to/level_name
+You can read more about folders structure [here](http://bem.info/method/filesystem/). Also specify all prefixes for blocks, elements and mods in bem.rb initializer.
 
 ### Creating
 
 Easy block creating look like:
 
-    $ thor bem:create -b test
-    
+    $ thor bem:create -l level-name -b test
+
 Block with mod:
 
-    $ thor bem:create -b test -m large
+    $ thor bem:create -l level-name -b test -m large
 
 Block with pretty mod with value:
-    
-    $ thor bem:create -b test -m color -v red
+
+    $ thor bem:create -l level-name -b test -m color -v red
 
 Create element:
 
-    $ thor bem:create -b test -e icon
-    
+    $ thor bem:create -l level-name -b test -e icon
+
 Element with mod:
 
-    $ thor bem:create -b test -e icon -m large
-    
+    $ thor bem:create -l level-name -b test -e icon -m large
+
 Element with pretty mod:
 
-    $ thor bem:create -b test -e icon -m size -v small
+    $ thor bem:create -l level-name -b test -e icon -m size -v small
 
 Block in special technolody:
-    $ thor bem:create -b test -T sass
+    $ thor bem:create -l level-name -b test -T sass
 
 Element in special tehcnology creates like block. List of know technologies you can see in bem.rb initializer. You can customize it. After block, element or mod creating generator adds to level assets (level_name/.bem/assets) main file (level) require string. Ex:
 ```sass
-//= require ../../../../test/elements/__field/__field.css.sass
+//= require ../../../../test/__field/test__field.css.sass
 ```
-You should remember! You are not in any case should not be writing styles and scripts in assets levels and application files.
-Use them like configuration files, for require only. This involves using Sprockets.
+You should remember! You are not in any case should not be writing styles and scripts in assets levels and application files. Use them like configuration files, for require only. This involves using Sprockets.
 
 ### Rendering
 
 In your view you should write this:
 ```ruby
-= b "test", mods: [{color: "red"}], content: [{ elem: "icon", elemMods: [{size: "small"}] }]
-```
+= block "test", mods: [{color: "red"}], content: [{ elem: "icon", elemMods: [{size: "small"}] }]
 
-If block in group:
-```ruby
-= b "test", group: "name", mods: [{color: "red"}], content: []
-```
-
-Block with mods without value:
-```ruby
-= b "test", mods: [:super, {color: "red"}], content: []
-```
+= block "test", mods: [:super, {color: "red"}], content: []
 
-Block with custom attributes for tag:
-```ruby
-= b "test", attrs: {src: "/img.png"}, content: []
-```
+= block "test", attrs: {src: "/img.png"}, content: []
 
-Block with custom class for tag:
-```ruby
-= b "test", cls: "custom", content: []
-```
+= block "test", cls: "custom", content: []
 
-Block with custom tag for block( 'div' is default ):
-```ruby
 = b "test", tag: "article", content: []
 ```
 
-Syntax is look like [bemhtml](http://ru.bem.info/articles/bemhtml-reference/).
+Syntax is look like original [BEMJSON](http://ru.bem.info/technology/bemjson/v2/bemjson/).
 
 ### Templates
 
-Now templates exists for haml, sass, coffee and md technologies, but you will create your templates in
-lib/tasks/templates. For example, you can watch haml template:
+Now templates exists for haml, sass, coffee and md technologies, but you will create your templates in lib/tasks/templates. For example, you can watch haml template:
 ```haml
 - haml_tag this[:tag], this[:attrs]
     = content
@@ -161,29 +111,18 @@ Or Slim template:
 * this[:tag], this[:attrs]
     = content
 ```
-This and content is BEM helpers for rendering. For access to default essence propeties use 'this' method.
-For access to custom essence properties use 'ctx' method.
+`this` and `content` is BEM helpers for rendering. `this` is access to default essence propeties, `content` is access to context properties.
 
 ### You want more BEM?
 
-You can use CSSO instead of YUI compressor for precompile assets. 
-Read [here](http://habrahabr.ru/post/181880/) about it.
-
-If you want it, please watch [here](https://github.com/Vasfed/csso-rails).
-
-*__Stay BEMed!__*
-
-## Tomorrow
-
-0. Incapsulate helpers methods and isolate them from project helpers.
-1. i-bem.js for html.
-2. deps.js
-3. Mods with restructure. Now you can't use mods with templates(haml, slim and etc.), but they generates.
-
-## Contributing
-
-1. Fork it
-2. Create your feature branch (`git checkout -b my-new-feature`)
-3. Commit your changes (`git commit -am 'Add some feature'`)
-4. Push to the branch (`git push origin my-new-feature`)
-5. Create new Pull Request
+More information you can find on [official site of BEM](http://bem.info)
+
+### Authors
+ 
+- Anton Winogradov ([verybigman](https://github.com/verybigman)) @awinogradov
+ 
+### Ideas
+ 
+Please, talk about your ideas by GitHub [issues](https://github.com/verybigman/bem-on-rails/issues).
+ 
+### [MIT](http://en.wikipedia.org/wiki/MIT_License) License

data/README.ru.md

@@ -0,0 +1,115 @@
+# BEM on Rails
+
+Позволяет использовать БЭМ методологию в Rails приложениях. BEM on Rails это Ruby форк частичного функционала bem-tools. Узнать, что такое bem-tools можно здесь [здесь](http://bem.info/tools/bem/), а о самой БЭМ методологии [здесь](http://bem.info/method/). Кроме того, я выступал с докладом об этом геме на YaC 2013, который можно найти [здесь](http://tech.yandex.ru/events/bemup/yac-bemup/talks/1349/).
+
+## Установка
+
+Добавьте эту строку в Gemfile:
+
+    gem 'bem-on-rails'
+
+Затем запустите бандлер:
+
+    $ bundle
+    
+Далее запускаем генератор:
+
+    $ rails g bemonrails:install
+    
+Если сервер запущен, его надо бы перезапустить. 
+
+## Использование
+
+Вы можете создавать блоки, элементы и их модификаторы на разных уровнях. Так выглядит стандартная структура директорий:
+
+- **bem**
+    - **level_name**
+        - **block_name**
+            - **__element_name**
+                - block-name__element_name.html.haml
+                - block-name__element_name.css.sass
+                - block-name__element_name.coffee
+                - block-name__element_name.md
+            - **_mod_name**
+                - block-name_mod_name.css.sass
+                - block-name_mod_name.coffee
+                - block-name_mod_name.md
+            - block_name.html.haml
+            - block_name.css.sass
+            - block_name.coffee
+            - block_name.md
+
+Больше информации об организации файловой системы можно найти [здесь](http://bem.info/method/filesystem/).
+
+### Создание новых блоков
+
+Простой пример:
+
+    $ thor bem:create -l level-name -b test
+    
+Блок с булевым модификатором:
+
+    $ thor bem:create -l level-name -b test -m large
+
+Блок с модификатором и его значением:
+    
+    $ thor bem:create -l level-name -b test -m color -v red
+
+Создание элемента:
+
+    $ thor bem:create -l level-name -b test -e icon
+
+Создание сущности в необходимой технологии:
+
+    $ thor bem:create -l level-name -b test -T sass
+
+Список используюмых технологий находится в bem.rb initializer. Во время создания сущностей создаются записи в файлах ассетов (level_name/.bem/assets). Например:
+```sass
+//= require ../../../../test/__field/test__field.css.sass
+```
+Пожалуйста, не пишите ничего самостоятельно в этих файлах.
+
+### Вьюхи
+
+Haml:
+```ruby
+= block "test", mods: [{color: "red"}], content: [{ elem: "icon", elemMods: [{size: "small"}] }]
+
+= block "test", mods: [:super, {color: "red"}], content: []
+
+= block "test", attrs: {src: "/img.png"}, content: []
+
+= block "test", cls: "custom", content: []
+
+= block "test", tag: "article", content: []
+```
+
+Синтаксис схож с ориганльным из [BEMJSON](http://ru.bem.info/technology/bemjson/v2/bemjson/).
+
+### Шаблоны
+
+По умолчанию шаблоны можно писать на haml, sass, coffee и md, но вы можете создать свои технологии, какие вам только будут необходимы по примеру со стандартными из lib/tasks/templates. Например так выглядит шаблон для haml:
+```haml
+- haml_tag this[:tag], this[:attrs]
+    = content
+```
+А вот так для Slim:
+```slim
+* this[:tag], this[:attrs]
+    = content
+```
+`this` и `content` это БЭМ помощники для рендеринга. `this` используется для доступа к стандартным полям сущности, а 'ctx' для доступа к полям контекста.
+
+### Хотите больше информации о БЭМ?
+
+Много полезных статей на [официальном БЭМ сайте](http://bem.info)
+
+### Авторы
+
+- Антон Виноградов ([verybigman](https://github.com/verybigman)) @awinogradov
+
+### Идеи, замечания и пожелания
+
+Все это можно оформить в виде [issues](https://github.com/verybigman/bem-on-rails/issues) на GitHub.
+
+### [MIT](http://en.wikipedia.org/wiki/MIT_License) Лицензия

data/lib/bem-on-rails/bem_render_helper.rb

@@ -0,0 +1,107 @@
+module Bemonrails
+    module BemRenderHelper
+        include Bemonrails::BemNames
+
+        def block(b_name, builder={})
+            unless b_name.blank?
+                builder[:block] = b_name
+                path = File.join path_resolve(:block, builder, false)
+                target = File.join path, build_b(b_name)
+                create_ctx builder
+                update_ctx :block, b_name
+                resolve_ctx
+                template_exists?(target) ? render(file: target) : empty
+            end
+        end
+
+        def elem(e_name, builder={})
+            unless e_name.blank?
+                builder[:block] = this[:block]
+                builder[:element] = e_name
+                path = File.join path_resolve(:element, builder, false)
+                target = File.join path, build_e(this[:block], e_name)
+                create_ctx builder
+                update_ctx :element, e_name
+                resolve_ctx
+                template_exists?(target) ? render(file: target) : empty
+            end
+        end
+
+        def create_ctx(builder={})
+            @this = {}
+
+            BEM[:attrs].each do |mod|
+                if builder[mod]
+                    @this[mod] = builder[mod]
+                    builder = builder.except(mod)
+                end
+            end
+
+            @this[:ctx] = builder
+            @this[:bem] ||= true
+            @this[:attrs] ||= {}
+            @this[:tag] ||= :div
+        end
+
+        def update_ctx(essence, name)
+            case essence
+            when :block
+                @this[:block] = @block_buffer = name
+            when :element
+                @this[:block] = @block_buffer
+                @this[:elem] = name
+            end
+        end
+
+        def resolve_ctx
+            classes_array = []
+
+            if this[:bem]
+                dom_class(this, classes_array)
+                resolve_mixes(this[:mix], classes_array)
+            else
+                classes_array.push(this[:elem] ? this[:elem] : this[:block])
+            end
+
+            this[:attrs].merge!({class: [classes_array, this[:cls]].join(" ").strip!})
+        end
+
+        def resolve_mods(mods, classes_array, bl, el=false)
+            mods = mods || {}
+            mods.each do |m, v|
+                classes_array.push(build_m(build_b(bl), el ? build_e(bl, el) : nil, m.to_s, v))
+            end
+        end
+
+        def resolve_mixes(mixs, classes_array)
+            mixs = mixs || {}
+            mixs.each do |mix|
+                generate_class(mix, classes_array)
+            end
+        end
+
+        def dom_class(essence, classes_array)
+            if essence[:block] && essence[:elem]
+                classes_array.push(build_e(essence[:block], essence[:elem]))
+                resolve_mods(essence[:elemMods], classes_array, essence[:block], essence[:elem])
+            elsif essence[:block]
+                classes_array.push(build_b(essence[:block]))
+                resolve_mods(essence[:mods], classes_array, essence[:block])
+            end
+        end
+
+        def empty
+            "<div class=#{ @this[:attrs][:class] }></div>".html_safe
+        end
+
+        def this
+            @this
+        end
+
+        def content
+            render "bemonrails/essences/content"
+        end
+
+    end
+
+end