first commit

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

.travis.yml

@@ -0,0 +1,7 @@
+language: node_js
+node_js: 9
+
+before_script:
+  - export CHROME_BIN=chromium-browser
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start

LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2018 Washington Botelho
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,59 @@
+# Inplace - An inplace editor
+
+[![Build Status](https://img.shields.io/travis/wbotelhos/inplace/master.svg)](https://travis-ci.org/wbotelhos/inplace)
+[![NPM Version](https://badge.fury.io/js/inplace.svg)](https://badge.fury.io/js/inplace)
+[![Dependency](https://david-dm.org/wbotelhos/inplace.svg)](https://david-dm.org/wbotelhos/inplace)
+[![Dev Dependency](https://david-dm.org/wbotelhos/inplace/dev-status.svg)](https://david-dm.org/wbotelhos/inplace#info=devDependencies)
+[![Code Climate](https://codeclimate.com/github/wbotelhos/inplace.png)](https://codeclimate.com/github/wbotelhos/inplace)
+[![Support](https://img.shields.io/badge/donate-%3C3-brightgreen.svg)](https://liberapay.com/wbotelhos)
+
+Inplace is an tiny inplace editor to enable a quick ajax update with no need to create a form.
+
+## Options
+
+```js
+buttonOrder:   // the cancel and save order button on screen
+cancel:        // enables cancel button creation
+cancelClass:   // the cancel button class
+cancelValue:   // the cancel button label
+checkable:     // html elements that will listen check change
+fieldClass:    // the field class
+fieldName:     // the field name
+fieldTemplate: // template used to build custom names format
+fieldType:     // the field type
+method:        // method used on ajax request
+save:          // enables save button creation
+saveClass:     // the save button class
+saveValue:     // the save button label
+selectable:    // html elements that will listen select change
+typeful:       // html elements that will listen enter change
+```
+
+## Usage
+
+You declare an element with optional data atributes:
+
+```html
+<div
+  class="inplace"
+  data-attributes='{ "maxlength": 2 }'
+  data-field-name="number"
+  data-field-value="42"
+  data-url="/update"
+>42</div>
+```
+
+On JS you can declare attributes too, but data attributes has priority:
+
+```js
+$('.inplace').inplace({ url: 'save' });
+```
+
+## Functions
+
+```js
+```
+
+## Contributors
+
+[Check it out](http://github.com/wbotelhos/inplace/graphs/contributors)

changelog.md

@@ -0,0 +1,7 @@
+### Master
+
+-  
+
+### v0.1.0
+
+- First release.

karma.conf.js

@@ -0,0 +1,32 @@
+module.exports = function(config) {
+  'use strict';
+
+  config.set({
+    autoWatch:  true,
+    debug:      true,
+    browsers:   ['Chrome', 'Firefox'],
+    frameworks: ['jasmine', 'fixture'],
+    logLevel:   config.LOG_ERROR,
+    port:       9876,
+    reporters:  ['dots'],
+    singleRun:  true,
+
+    files: [
+      'node_modules/jquery/dist/jquery.min.js',
+      'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
+
+      'spec/spec_helper.js',
+
+      'spec/fixtures/*.html',
+
+      'lib/*.css',
+      'lib/*.js',
+
+      'spec/javascripts/**/*.js'
+    ],
+
+    preprocessors: {
+      '**/*.html': ['html2js']
+    }
+  });
+};

lib/inplace.js

@@ -0,0 +1,205 @@
+/*!
+ * Inplace - An inplace editor
+ *
+ * The MIT License
+ *
+ * @author  : Washington Botelho
+ * @doc     : http://wbotelhos.com/inplace
+ * @version : 0.1.0
+ *
+ */
+
+;
+(function($) {
+  'use strict';
+
+  $.inplace = {
+    buttonOrder:   ['cancel', 'save'],
+    cancel:        true,
+    cancelClass:   'inplace__cancel',
+    cancelValue:   'Cancel',
+    checkable:     ['checkbox', 'radio'],
+    fieldClass:    'inplace__field',
+    fieldName:     undefined,
+    fieldTemplate: '{name}',
+    fieldType:     'text',
+    method:        'PATCH',
+    save:          true,
+    saveClass:     'inplace__save',
+    saveValue:     'Save',
+    selectable:    ['select-one', 'select-multiple'],
+
+    typeful: [
+      'color',
+      'date',
+      'datetime',
+      'datetime-local',
+      'email',
+      'hidden',
+      'month',
+      'number',
+      'password',
+      'range',
+      'search',
+      'tel',
+      'text',
+      'textarea',
+      'time',
+      'url',
+      'week'
+    ]
+  }
+
+  $.fn.inplace = function(options) {
+    var settings = $.extend({}, $.inplace, options);
+
+    return this.each(function() {
+      return (new $.inplace.Inplace(this, settings))._create();
+    });
+  }
+
+  $.inplace.Inplace = (function() {
+    var Inplace = function(element, options) {
+      this.el      = $(element);
+      this.element = element;
+
+      this.options = $.extend({}, $.inplace, options, this.el.data());
+    }
+
+    Inplace.prototype = {
+      _activate: function() {
+        var field = this._field();
+
+        this
+          .el
+          .off('click.inplace.el')
+          .addClass('inplace--active')
+          .html(field)
+          .trigger('inplace:activate', this.element);
+
+        for (var i = 0; i < this.options.buttonOrder.length; i++) {
+          var value = this.options.buttonOrder[i];
+
+          if (this.options[value]) {
+            this._build(value, 'button').appendTo(this.el);
+          }
+        }
+
+        var actived = $('.inplace--active').not(this.el);
+
+        for (var i = 0; i < actived.length; i++) {
+          actived.data('inplace')._deactivate();
+        }
+
+        field.trigger('focus');
+      },
+
+      _bindCancel: function() {
+        this.el.on('click.inplace.cancel', '[data-inplace-cancel]', this._deactivate.bind(this));
+      },
+
+      _bindClick: function() {
+        this.el.on('click.inplace.el', this._activate.bind(this));
+      },
+
+      _bindField: function() {
+        var typeful = [];
+
+        for (var i = 0; i < $.inplace.typeful.length; i++) {
+          typeful.push('[type="' + $.inplace.typeful[i] + '"]');
+        }
+
+        var fields = typeful.join(',');
+
+        this.el.on('keypress.inplace.field', fields, function(evt) {
+          var key = evt.which || evt.keyCode;
+
+          if (key === 13) {
+            this._request();
+          }
+        }.bind(this));
+
+        this.el.on('keyup.inplace.field', fields, function(evt) {
+          var key = evt.which || evt.keyCode;
+
+          if (key === 27) {
+            this._deactivate();
+          }
+        }.bind(this));
+      },
+
+      _bindSave: function() {
+        this.el.on('click.inplace.save', '[data-inplace-save]', this._request.bind(this));
+      },
+
+      _build: function(kind, type) {
+        var options = {
+          'class': this.options[kind + 'Class'],
+          type:    type,
+          value:   this.options[kind + 'Value']
+        };
+
+        if (kind === 'field') {
+          var attributes = this.el.data('attributes');
+
+          if (attributes) {
+            options = $.extend({}, options, attributes);
+          }
+        }
+
+        options['data-inplace-' + kind] = '';
+
+        return $('<input />', options);
+      },
+
+      _create: function() {
+        this._bindClick();
+        this._bindField();
+        this._bindSave();
+        this._bindCancel();
+
+        this.el.data('inplace', this);
+
+        return this;
+      },
+
+      _deactivate: function() {
+        this._bindClick();
+
+        this
+          .el
+          .removeClass('inplace--active')
+          .html(this.element.getAttribute('data-field-value'))
+          .trigger('inplace:deactivate', this.element);
+      },
+
+      _done: function(json) {
+        this._deactivate();
+
+        this.options.fieldValue = json[this.options.fieldName];
+
+        this.element.setAttribute('data-field-value', this.options.fieldValue);
+        this.el.trigger('inplace:done', json);
+      },
+
+      _field: function() {
+        return this._build('field', this.options.fieldType);
+      },
+
+      _request: function() {
+        $.ajax(this._requestOptions()).done(this._done.bind(this));
+      },
+
+      _requestOptions: function() {
+        var data = {};
+        var name = this.options.fieldTemplate.replace('{name}', this.options.fieldName);
+
+        data[name] = this.el.find('[data-inplace-field]').val();
+
+        return { data: data, method: this.options.method, url: this.options.url };
+      }
+    };
+
+    return Inplace;
+  })();
+})(jQuery);