character 0.1.0 → 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 5aaba1245301fea933c7e85fe1784c98dabbafc0
+  data.tar.gz: c8db8ace583070cc476269ba4590d355b5578503
+SHA512:
+  metadata.gz: e3cd3b297d2a5df01ca497df51d48c279c2506dfad4651732d257b0d00b8da1fe74bb30144fa3a6befeeae18b5692bb9f659fc8594de9221aadc3042770a15b9
+  data.tar.gz: 2423e88b08b927a97d30c68e04a4445a79010939e92e391812bc28eba9dadd0fe8046311f793c2790b1142abc76d826285ef1c4143db4a22fcac4d4cba0177fb

data/.gitignore

@@ -1 +1,4 @@
-.DS_Store
+.DS_Store
+
+/log/*.log
+Gemfile.lock

data/.rspec

@@ -0,0 +1 @@
+--color

data/README.md

@@ -1,20 +1,191 @@
-# Character
+# Character Rails Admin
 
-This is blogging app based on Ghost designed to be used with Active Admin.
+Have you heard of [Django](https://www.djangoproject.com/), [Wordpress](https://wordpress.org/), [Active Admin](http://activeadmin.info/), [Locomotive](http://locomotivecms.com/)? Yeah?! — Those are all awesome... and **Character** is BETTER!
 
-## Installation
+![Character Image](http://character.s3.amazonaws.com/character1.jpg)
 
+## Setup new [Rails 4.1](http://rubyonrails.org) project
+
+    rails new ProjectName -T -O
+
+Add gems to the ```Gemfile```:
+
+    # Mongoid ORM + Character
+    gem 'carrierwave-mongoid', github: 'carrierwaveuploader/carrierwave-mongoid', require: 'carrierwave/mongoid'
+    gem 'character'
+
+Run bundle and run generators:
+
+    bundle ; rails g mongoid:config ; rails g character:bootstrap
 
 ## TODO
 
-1. After post date is changed fix it's position in the list if required
-2. Implement quick blog post search
-3. Implement image uploading functionality
-4. Implement google analytics dashboard
-5. Implement youtube videos support for markdown
-6. Add a quick syntax helper for editor
-7. Fix word counter to do not count single symbols like '-'
-8. Add metadata input fields in post settings: tags, description, og fields
-9. Optional tags, categories support
-10. Featured image uploading via post settings
-11. 
+. Save unpublished post
+. Fix paste code issue for redactor.js + chrome
+
+
+## Routes
+
+After character generator finishes it's dirty business, in ```/config/routes.rb``` you see:
+
+    mount_character_instance 'admin'
+
+This mounts character instance **admin** to ```/admin``` path and make character app accessible there. There are also two optional helpers ```mount_posts_at``` and ```mount_pages_at```, they mount default controllers to routes as well. Remove them if no need in **posts** or **pages** app.
+
+Instance name **admin** could be changed, and you can use something different. This option is here for the case when a few character instances are required.
+
+- mount_character_instance
+- mount_posts_at
+- mount_pages_at
+
+
+## Running Automated Tests
+
+`$ bundle exec rake test`
+
+
+## Modules
+
+- chr.genericModule()
+- chr.postsModule()
+- chr.pagesModule()
+- chr.settingsModule()
+- chr.settingsWebsite()
+- chr.settingsPostCategories()
+- chr.settingsAdmins()
+- chr.settingsRedirects()
+
+
+## Forms
+
+To have custom form implementation for model, create ```form.html``` in ```/app/views/admin/model_names/``` — replace *model_names* with pluralized models name and if needed character instance name *admin* (default).
+
+### Generic form template
+
+Generic form template looks like this:
+
+    <%= simple_form_for @object, url: @form_action_url, method: :post do |f| %>
+      <%= f.input :name %>
+    <% end %>
+
+Checkout [Simple Form](https://github.com/plataformatec/simple_form) reference for all options (there are tons of them) which are available here.
+
+**No need to include SUBMIT button in form!**
+
+### Hideable
+
+If you want to make model hideable include ```include Hideable``` in model and add hidden field to your form:
+
+    <%= f.input :hidden, as: :hidden %>
+
+This will add an eye button trigger in the admin header, which allows to switch state for model.
+
+### Inline forms
+
+Form inline elements could be added with this code (images example):
+
+    <div class='chr-form-nested chr-form-nested-images sortable-list'>
+      <%= f.fields_for :images do |ff| %>
+        <%= ff.link_to_remove "Remove" %>
+        <%= image_tag ff.object.image.small.url %>
+        <%= ff.input :title, placeholder: 'Image title' %>
+        <%= ff.input :image %>
+        <%= ff.input :_position, as: :hidden %>
+      <% end %>
+      <%= f.link_to_add "Add an Image", :images %>
+    </div>
+
+- This template is based on [Nested Forms](https://github.com/ryanb/nested_form) gem by Ryan Bates, checkout docs for implementation details.
+- Including ```sortable-list``` class and ```<%= ff.input :_position, as: :hidden %>``` make inline objects reorderable.
+- This example uses ```chr-form-nested-images``` class for layout styling.
+
+
+## Models
+
+- Character::Post
+- Character::PostCategory
+- Character::Page
+- Character::Image
+- Character::Settings::Variable
+- Character::User
+- Character::Redirect
+
+
+## Concerns
+
+- UpdatedAgo
+- CreatedAgo
+- Orderable
+- Hideable
+
+
+## Helpers
+
+- Character::SitemapGeneratorHelper
+
+
+## Shortcuts
+
+- CMD+s — save changes
+- CMD+e — toggle fullscreen
+
+
+## API
+
+**[Character.Generic.DetailsView](https://github.com/slate-studio/character/blob/master/app/assets/javascripts/character/generic/details.coffee) and [Character.Settings.DetailsView](https://github.com/slate-studio/character/blob/master/app/assets/javascripts/character/settings/details.coffee)**
+
+These are blank methods that could be overriden to extend view functionality. Example of ```Character.Generic.DetailsView``` override: [character/posts/module.coffee](https://github.com/slate-studio/character/blob/master/app/assets/javascripts/character/posts/module.coffee)
+
+- @beforeContentRequest()
+- @beforeRenderContent()
+- @beforeFormHelpersStart()
+- @afterRenderContent()
+- @beforeSave()
+- @beforeFormSubmit(arr, $form, options)
+- @afterFormSubmitSuccess(responseText, statusText, xhr, $form)
+- @beforeOnClose()
+- @afterOnClose()
+
+
+## Instances
+
+Initializers for different instances are in ```config/initializers/character.rb```:
+
+    Character.configure do |config|
+      config.title = 'Project Title | Admin'
+    end
+
+Options:
+
+- @title                  = 'Character'
+- @user_model             = 'Character::User'
+- @development_auto_login = false
+- @force_ssl              = true
+
+## Analytics
+
+* Create a new project (```GA_APP_NAME```) at: [https://console.developers.google.com/project](https://console.developers.google.com/project)
+* Enable Analytics under **APIs & auth** -> **APIs** -> Analytics API
+* Create another client under **Credentials**
+* Download and put **key-file** (```GA_KEY_FILE_NAME```) to your projects ```config``` folder
+* Go to you (Analytics)[www.google.com/analytics] account and add the **Service account** email address to your account (```GA_SERVICE_ACCOUNT_EMAIL```). It should be something like ```something-long@developer.gserviceaccount.com```.
+
+Set all variables in server environment:
+
+- ```GA_APP_NAME```
+- ```GA_SERVICE_ACCOUNT_EMAIL```
+- ```GA_KEY_FILE_NAME```
+- ```GA_PROFILE_ID```
+
+
+## Settings
+
+
+## Reports
+
+(to be continued...)
+
+
+## Redirects
+
+Redirects app allows to quickly setup 301/302 redirects for the website.

data/Rakefile

@@ -4,4 +4,11 @@ spec = Gem::Specification.load(Dir['*.gemspec'].first)
 gem = Gem::PackageTask.new(spec)
 gem.define()
 
-#gem push pkg/character-version.gem
+# This will let us run our tests by typing "rake test" from the gem root folder
+require 'rake/testtask'
+Rake::TestTask.new do |t|
+  t.libs << 'test'
+  t.test_files = FileList['test/**/*_test.rb']
+  # t.warning = true
+  # t.verbose = true
+end

data/app/assets/javascripts/character.coffee

@@ -0,0 +1,134 @@
+#= require jquery
+#= require jquery_ujs
+#= require jquery.form
+#= require jquery.ui.sortable
+#= require jquery.ui.widget
+#= require jquery.iframe-transport
+#= require jquery.fileupload
+#= require jquery_nested_form
+
+#= require underscore
+#= require underscore.string
+#= require underscore.inflection
+#= require backbone
+#= require backbone.marionette
+
+#= require moment
+#= require character_editor
+#= require redactor
+
+#= require_self
+#= require ./character/generic/module
+#= require ./character/settings/module
+#= require ./character/posts/module
+#= require ./character/images/module
+#= require ./character/pages/module
+#= require ./character/dashboard/module
+
+@Character ||= {}
+
+_.mixin(_.str.exports())
+
+#
+# Unsuck Your Backbone
+# https://speakerdeck.com/ammeep/unsuck-your-backbone
+#
+
+#
+# Marionette.js Application Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.md
+#
+@chr = new Backbone.Marionette.Application()
+
+# App Layout
+# /app/views/character.html.erb
+@chr.addRegions
+  menu:    '#menu'
+  content: '#content'
+
+API =
+  addMenuItem: (path, icon, title) ->
+    $menuItems = $('#menu_items')
+    $menuItems.append """<li>
+                           <a href='#/#{ path }' class='chr-menu-item-#{ path }' title='#{ title }'>
+                             <i class='chr-menu-icon fa fa-#{ icon }'></i><div class='chr-menu-title'>#{ title }</div>
+                           </a>
+                         </li>"""
+
+  showModule: (module) ->
+    if chr.currentModuleName != module.moduleName
+      chr.currentModuleName = module.moduleName
+
+      name   = module.moduleName
+      layout = module.layout
+
+      $menuEl = $('#menu')
+      $menuEl.find('a.active').removeClass('active')
+      $menuEl.find("a.chr-menu-item-#{name}").addClass('active')
+
+      chr.content.show(layout, { preventDestroy: true })
+
+      $('#content').attr('class', "chr-content #{name}")
+
+  closeDetailsView: ->
+    Backbone.history.navigate('#/' + chr.currentPath, { trigger: true })
+
+  showError: (response) ->
+    $container = $('#character')
+    $overlay   = $('#chr_error')
+
+    if $overlay.length == 0
+      $container.after """<div id='chr_error' class='chr-error'>
+                            <div id='chr_error_message' class='chr-error-message'></div>
+                            <button id='chr_error_close' type='button' class='chr-error-close'>
+                              <i class='chr-icon icon-close'></i>
+                            </button>
+                          </div>"""
+      $overlay = $('#chr_error')
+
+    entityMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;', '/': '&#x2F;' }
+    escapeHtml = (string) -> String(string).replace(/[&<>"'\/]/g, (s) -> entityMap[s])
+    responseText = escapeHtml(response.responseText)
+
+    $('#chr_error_message').html "<pre>#{ responseText }</pre>"
+    $('#chr_error_close').on 'click', -> chr.execute('closeError')
+
+    $overlay.addClass('open')
+    $container.addClass('error-open')
+
+  closeError: ->
+    $('#chr_error').removeClass('open')
+    $('#character').removeClass('error-open')
+    $('#chr_error_close').off 'click'
+
+_.map API, (method, name) => @chr.commands.setHandler(name, method)
+
+
+@chr.on "before:start", (@options) -> # maps options!
+  # shortcuts
+  window.shortcuts = new window.keypress.Listener()
+
+  # close dialogs and details view on esc
+  window.shortcuts.register_combo
+    keys: 'esc'
+    is_exclusive: true
+    on_keyup: (event) ->
+      if $('#chr_images').hasClass 'open'
+        chr.execute('hideImages')
+      else if $('#chr_error').hasClass 'open'
+        chr.execute('closeError')
+      else
+        chr.execute('closeDetailsView')
+
+
+@chr.on "start", ->
+  # start history
+  if Backbone.history
+    Backbone.history.start()
+
+  # jump to first menu item when login to admin
+  if location.hash == ''
+    location.hash = $('#menu a:eq(1)').attr('href')
+
+  # disable default action for browser when drop image to window
+  $(document).bind 'drop dragover', (e) -> e.preventDefault()

data/app/assets/javascripts/character/dashboard/_visitors.coffee

@@ -0,0 +1,27 @@
+@Character.Dashboard.Charts ||= {}
+@Character.Dashboard.Charts.visitors = (layout) ->
+  title = 'Visitors'
+  color = '#fac043'
+
+  if layout.chartType() == 'day'
+    reportModel = 'Reports-AnalyticsDaily'
+    dateFormat = (d) -> moment(d).format("MMM D")
+  else if layout.chartType() == 'week'
+    reportModel = 'Reports-AnalyticsWeekly'
+    dateFormat = (d) ->
+      weekStart = moment(d).format("MMM D")
+      weekEnd   = moment(d).add('days', 6).format("MMM D")
+      "#{weekStart} - #{weekEnd}"
+  else if layout.chartType() == 'month'
+    reportModel = 'Reports-AnalyticsMonthly'
+    dateFormat = (d) -> moment(d).format("MMM YYYY")
+
+  fields    = [ 'visitors' ].join(',')
+  startDate = layout.dateFrom()
+  stopDate  = layout.dateTo()
+
+  url = "/admin/#{reportModel}?f=#{fields}&where__report_date=$gte:#{ startDate },$lte:#{ stopDate }&o=report_date:asc&pp=40"
+
+  $.get url, {}, (data) =>
+    d = _.map data, (r) -> { y: dateFormat(r.report_date), a: r.visitors }
+    layout.drawBarChart title, color, d

data/app/assets/javascripts/character/dashboard/layout.coffee

@@ -0,0 +1,156 @@
+#= require ./_visitors
+
+#
+# Marionette.js Layout Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.layout.md
+#
+@Character.Dashboard.Layout = Backbone.Marionette.LayoutView.extend
+  className: 'chr-module-generic'
+
+  template: -> """<header class="chr-details-header"><div class="title">Dashboard</div></header>
+                  <div id=dashboard_view class='dashboard-view'>
+                    <select id=dashboard_chart_select class='dashboard-chart-select'></select>
+                    <aside class='dashboard-chart-options'>
+                      <select id=dashboard_chart_type_select>
+                        <option value=day>Day</option>
+                        <option value=week>Week</option>
+                        <option value=month>Month</option>
+                      </select>
+                      <input type=date id=dashboard_chart_date_from />
+                      —
+                      <input type=date id=dashboard_chart_date_to />
+                    </aside>
+                    <div id=dashboard_chart_wrapper class='dashboard-chart-wrapper'>
+                      <div id=dashboard_chart></div>
+                    </div>
+                    <div id=dashboard_footer></div>
+                  </div>"""
+
+  regions:
+    footer: '#dashboard_footer'
+
+  ui:
+    view:         '#dashboard_view'
+    chart:        '#dashboard_chart'
+    chartWrapper: '#dashboard_chart_wrapper'
+    chartSelect:  '#dashboard_chart_select'
+    typeSelect:   '#dashboard_chart_type_select'
+    dateFrom:     '#dashboard_chart_date_from'
+    dateTo:       '#dashboard_chart_date_to'
+
+  _renderChart: ->
+    Character.Dashboard.Charts[@chartName](@)
+
+  _selectChart: ->
+    @chartName = @ui.chartSelect.val()
+    @_renderChart()
+
+  chartType: -> @ui.typeSelect.val()
+  dateFrom: -> @ui.dateFrom.val()
+  dateTo: -> @ui.dateTo.val()
+
+  setDateRange: (fromDate, toDate) ->
+    fromDate ?= moment().subtract('month', 1).format('YYYY-MM-DD')
+    toDate   ?= moment().format('YYYY-MM-DD')
+
+    @ui.dateFrom.val(fromDate)
+    @ui.dateTo.val(toDate)
+
+  _selectDateFrom: ->
+    fromDate = @dateFrom()
+
+    if @chartType() == 'day'
+      toDate = moment(fromDate).add('month', 1).format('YYYY-MM-DD')
+    else if @chartType() == 'week'
+      toDate = moment(fromDate).add('weeks', 30).format('YYYY-MM-DD')
+    else if @chartType() == 'month'
+      toDate = moment(fromDate).add('months', 30).format('YYYY-MM-DD')
+
+    @setDateRange(fromDate, toDate)
+    @_renderChart()
+
+  _selectDateTo: ->
+    toDate = @dateTo()
+
+    if @chartType() == 'day'
+      fromDate = moment(toDate).subtract('month', 1).format('YYYY-MM-DD')
+    else if @chartType() == 'week'
+      fromDate = moment(toDate).subtract('weeks', 30).format('YYYY-MM-DD')
+    else if @chartType() == 'month'
+      fromDate = moment(toDate).subtract('months', 30).format('YYYY-MM-DD')
+
+    @setDateRange(fromDate, toDate)
+    @_renderChart()
+
+  _selectType: -> @_selectDateTo()
+
+  onRender: ->
+    @currentChartType = ''
+
+    _.chain(Character.Dashboard.Charts).keys().each (key) =>
+      title = _(key).capitalize()
+      @ui.chartSelect.append("<option value=#{key}>#{title}</option>")
+
+    # TODO: after getting back to this layout from other app events declared in layout doesn't work
+    # so doing this right here:
+    @ui.chartSelect.on 'change', (e) => @_selectChart()
+    @ui.typeSelect.on 'change', (e) => @_selectType()
+    @ui.dateFrom.on 'change', (e) => @_selectDateFrom()
+    @ui.dateTo.on 'change', (e) => @_selectDateTo()
+
+    @afterRenderContent?()
+
+  onDestroy: ->
+    # NOTE: seems to be never called in current implementation
+    @ui.chartSelect.off 'change'
+    @ui.typeSelect.off 'change'
+    @ui.dateFrom.off 'change'
+    @ui.dateTo.off 'change'
+
+    @afterOnClose?()
+
+  updateScope: (@chartName, callback) ->
+    @chartName ?= 'visitors'
+    @_renderChart()
+
+  setChartTitle: (title) ->
+    @ui.chartWrapper.attr('data-title', title)
+
+  resetCurrentChart: ->
+    @ui.chart.html('')
+    @currentChart = null
+    @currentChartType = ''
+
+  drawBarChart: (title, color, data) ->
+    if data.length > 0
+      if @currentChartType == 'bar'
+        @currentChart.options.colors = [ color ]
+        @currentChart.options.labels = [ title ]
+        @currentChart.setData data
+      else
+        @resetCurrentChart()
+
+        options =
+          element:         'dashboard_chart'
+          data:            data
+          barColors:       [ color ]
+          labels:          [ title ]
+          xkey:            'y'
+          ykeys:           [ 'a' ]
+          # styles
+          hideHover:       true
+          gridTextFamily:  'sans-serif'
+          gridTextColor:   '#a9b1b5'
+          gridTextSize:    11
+          barOpacity:      0.6
+          barSizeRatio:    0.97
+          numLines:        6
+          gridStrokeWidth: 0.1
+
+        # https://github.com/morrisjs/morris.js
+        @currentChart = Morris.Bar options
+
+        @setChartTitle(title)
+        @currentChartType = 'bar'
+    else
+      @setChartTitle('No data')