├── .gitignore ├── behaviors.coffee ├── html_class.coffee ├── view_links.coffee ├── closeable.coffee ├── bottom_scroller.coffee ├── auto_region.coffee ├── key_events.coffee └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /behaviors.coffee: -------------------------------------------------------------------------------- 1 | App.module "Behaviors", (Behaviors, App, Backbone, Marionette, $, _) -> 2 | Marionette.Behaviors.behaviorsLookup = Behaviors; -------------------------------------------------------------------------------- /html_class.coffee: -------------------------------------------------------------------------------- 1 | App.module "Behaviors", (Behaviors, App, Backbone, Marionette, $, _) -> 2 | class Behaviors.HtmlClass extends Marionette.Behavior 3 | onShow: -> 4 | $('html').addClass @options.class 5 | 6 | onDestroy: -> 7 | $('html').removeClass @options.class -------------------------------------------------------------------------------- /view_links.coffee: -------------------------------------------------------------------------------- 1 | App.module "Behaviors", (Behaviors, App, Backbone, Marionette, $, _) -> 2 | class Behaviors.ViewLinks extends Marionette.Behavior 3 | events: 4 | "click [v-href]": 'routeTrigger' 5 | 6 | routeTrigger: (e) -> 7 | App.Router.navigate $(e.currentTarget).attr('v-href'), trigger: 1 8 | -------------------------------------------------------------------------------- /closeable.coffee: -------------------------------------------------------------------------------- 1 | App.module "Behaviors", (Behaviors, App, Backbone, Marionette, $, _) -> 2 | class Behaviors.Closeable extends Marionette.Behavior 3 | events: -> 4 | "click .close": -> @view.destroy() 5 | 6 | onShow: -> 7 | $(window).on 'keydown', @checkClose 8 | 9 | onDestroy: -> 10 | $(window).off 'keydown', @checkClose 11 | 12 | checkClose: (e) => 13 | @view.destroy() if e.keyCode is 27 14 | 15 | -------------------------------------------------------------------------------- /bottom_scroller.coffee: -------------------------------------------------------------------------------- 1 | App.module "Behaviors", (Behaviors, App, Backbone, Marionette, $, _) -> 2 | class Behaviors.BottomScroller extends Marionette.Behavior 3 | initialize: (opts) -> 4 | return unless opts.events? 5 | 6 | _.each Array.prototype.concat(opts.events), (e) => 7 | @view.listenTo App.vent, e, @scrollBottom 8 | 9 | onShow: -> 10 | @scrollBottom() 11 | 12 | scrollBottom: -> 13 | @$el[0].scrollTop = @$el[0].scrollHeight 14 | -------------------------------------------------------------------------------- /auto_region.coffee: -------------------------------------------------------------------------------- 1 | App.module "Behaviors", (Behaviors, App, Backbone, Marionette, $, _) -> 2 | class Behaviors.AutoRegion extends Marionette.Behavior 3 | onShow: -> 4 | _.each @view.regions, (region, regionName) => 5 | return unless region.viewClass 6 | 7 | viewClass = region['viewClass'] 8 | viewOptions = _.result(region, 'viewOptions') || {} 9 | 10 | this.view 11 | .getRegion(regionName) 12 | .show(new viewClass(viewOptions)) 13 | -------------------------------------------------------------------------------- /key_events.coffee: -------------------------------------------------------------------------------- 1 | App.module "Behaviors", (Behaviors, App, Backbone, Marionette) -> 2 | class Behaviors.KeyEvents extends Marionette.Behavior 3 | defaults: 4 | preventDefault: [] 5 | 6 | onShow: -> 7 | $(window).on 'keydown', @checkKey 8 | 9 | onDestroy: -> 10 | $(window).off 'keydown', @checkKey 11 | 12 | shouldIgnore: -> 13 | a = document.activeElement.tagName 14 | return true if a is "INPUT" or a is "TEXTAREA" 15 | 16 | checkKey: (e) => 17 | return if @shouldIgnore() 18 | 19 | if toInvoke = @options[e.keyCode] 20 | fn = toInvoke.call(@view, e) 21 | 22 | if ~@options.preventDefault.indexOf(e.keyCode) 23 | e.preventDefault() 24 | return false 25 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Marionette Behaviors 2 | -------- 3 | 4 | A collection of useful behaviors I have abstracted from my applications 5 | 6 | ### Table of Contents 7 | 8 | * [Closeable](#closeable) 9 | * [ViewLinks](#viewlinks) 10 | * [BottomScroller](#bottomscroller) 11 | * [KeyEvents](#keyevents) 12 | * [HtmlClass](#htmlclass) 13 | * [AutoRegion](#autoregion) 14 | 15 | ## Closeable 16 | 17 | Closes a view on click of an element with a class of `.close`. It also listens for a user to hit the `esc` key and then closes the view 18 | 19 | ```coffeescript 20 | class FooView extends Marionette.ItemView 21 | behaviors: 22 | Closeable: {} 23 | ``` 24 | 25 | ## ViewLinks 26 | 27 | Allows you to define `v-href="route"` within you tags for invoking `App.Router.navigate` passing your route. 28 | 29 | ```coffeescript 30 | class FooView extends Marionette.ItemView 31 | behaviors: 32 | ViewLinks: {} 33 | ``` 34 | 35 | ** In your view template ** 36 | ```jade 37 | ul 38 | li 39 | a(v-href="detail/{item.id}") 40 | ``` 41 | 42 | ## BottomScroller 43 | 44 | Allows you to scroll to the bottom of a given view `onRender` and on any passed events emitted on `App.vent` 45 | 46 | ```coffeescript 47 | class FooView extends Marionette.ItemView 48 | behaviors: 49 | BottomScroller: { 50 | events: "commentsUpdated" 51 | } 52 | ``` 53 | 54 | ### Options 55 | 56 | #### Events 57 | The `events` option can be `null`, a single string, or an array or strings. 58 | All of the passed events will be set to listen on `App.vent` 59 | 60 | ## KeyEvents 61 | 62 | The `KeyEvents` behavior allows you to define global (single) key events that trigger view specific actions. 63 | 64 | ```coffeescript 65 | class FooView extends Marionette.ItemView 66 | behaviors: 67 | KeyEvents: 68 | 8: -> @deleteImage() 69 | 39: -> App.vent.trigger('edit:advance') 70 | 37: -> App.vent.trigger('edit:previous') 71 | 49: -> @setActiveRating(0) 72 | 50: -> @setActiveRating(1) 73 | 51: -> @setActiveRating(2) 74 | 52: -> @setActiveRating(3) 75 | 53: -> @setActiveRating(4) 76 | preventDefault: [8, 39, 37] 77 | 78 | setActiveRating: -> #... 79 | deleteImage: -> #... 80 | ``` 81 | 82 | ### Options 83 | Each option key value actually represents the keyboard event key. 84 | 85 | #### preventDefault 86 | Any keyCode passed into this array will prevent the default action of the event. 87 | 88 | ## HtmlClass 89 | 90 | The `HtmlClass` behavior allows you to set a class on the `html` element on `onShow` and remove the class `onDestroy` of the view. 91 | 92 | ```coffeescript 93 | class MyView extends Marionette.ItemView 94 | behaviors: 95 | HtmlClass: {class: "help-modal noover"} 96 | ``` 97 | 98 | ## AutoRegion 99 | 100 | Do you find yourself writing this code over and over again? 101 | 102 | ```coffeescript 103 | class MyView extends Marionette.LayoutView 104 | onShow: -> 105 | @fooRegion.show(new BarView) 106 | @zapRegion.show(new ZapView) 107 | ``` 108 | 109 | Well `AutoRegion` is the answer! 110 | With a few declarative lines of code your regions will now auto populate. 111 | 112 | ```coffeescript 113 | class MyView extends Marionette.LayoutView 114 | behaviors: 115 | AutoRegion: {} 116 | 117 | regions: -> 118 | fooRegion: 119 | selector: ".bam" 120 | viewClass: MyViewClass 121 | viewOptions: {} (or method def) 122 | ``` 123 | 124 | --------------------------------------------------------------------------------