decidim-core 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ae58dc6d73fd2f5ccbaf107d8966cbea07ce82aa
-  data.tar.gz: 0ce5d5b51977be65b449a4b550bb576c373f0df9
+  metadata.gz: 90088cf15e64d2ce6b1d18dc801aafd4f2bcaf25
+  data.tar.gz: 03fbfda546c53214106febeea0e31b94f5b07e8e
 SHA512:
-  metadata.gz: e45afa5d770b41bb0e9f5da72a0b4792249b8e57e7edadae6abdaa05084815e8e123af69ac0a6d4a751c32cc568ceb86587c9001c24c89494d78fdcc1fd9a62c
-  data.tar.gz: '0684f3b9f7e8a9877f1e5e07abb7dc026cff017f217978edc2c02e48cbfc730026d35b7aa8d5382326b8ab5285e2c16ee8ccb8438a4edcbe77e3f8a2f4b6470f'
+  metadata.gz: f2ddf2c4e04870bd329115a24a5c43680133b4cdc3e750b7606d67594123d2f8668f702ed0c80c56aef68f803e5727a3974e8289d3eb47532aa6ad50ac588e71
+  data.tar.gz: c3c192e8f660653064880131624f897d41ebe1a070925dd25a8780e4f182c731bc188962b931e54034139543d231d7b6fcc03beef7f58b8a4af8840cb5ba43d4

data/Rakefile

@@ -1,2 +1,2 @@
 # frozen_string_literal: true
-require "decidim/common_rake"
+require "decidim/dev/common_rake"

data/app/assets/config/decidim_core_manifest.js

@@ -1,3 +1,4 @@
 //= link decidim/email.css
 //= link_directory ../fonts/decidim/
 //= link_directory ../images/decidim/
+//= link decidim/filters

data/app/assets/javascripts/decidim.js.es6

@@ -2,12 +2,13 @@
 // = require modernizr
 // = require owl.carousel.min
 // = require svg4everybody.min
-// = require appendAround
+// = require decidim/append_elements
+// = require decidim/inline_svg
+// = require decidim/user_registrations
 
 /* globals svg4everybody */
 
 $(document).on('turbolinks:load', () => {
   $(document).foundation();
-  $('.js-append').appendAround();
   svg4everybody();
 });

data/app/assets/javascripts/decidim/append_elements.js.es6

@@ -0,0 +1,8 @@
+// = require appendAround
+
+(function() {
+  $(document).on("turbolinks:load", function () {
+    let $appendableElements = $('.js-append');
+    $appendableElements.appendAround();
+  })
+}(window));

data/app/assets/javascripts/decidim/filters.js.es6

@@ -0,0 +1,22 @@
+// = require ./form_filter.component
+// = require_self
+
+// Initializes the form filter. We're unmounting the component before
+// changing the page so that we stop listening to events and we don't bind
+// multiple times when re-visiting the page.
+((exports) => {
+  const { Decidim: { FormFilterComponent } } = exports;
+  const formFilter = new FormFilterComponent('form.new_filter');
+
+  const onDocumentReady = () => {
+   formFilter.mountComponent();
+  };
+
+  const onTurboLinksBeforeVisit = () => {
+    formFilter.unmountComponent();
+    $(document).off('turbolinks:before-visit', onTurboLinksBeforeVisit);
+  };
+
+  $(document).ready(onDocumentReady);
+  $(document).on('turbolinks:before-visit', onTurboLinksBeforeVisit);
+})(window);

data/app/assets/javascripts/decidim/form_filter.component.js.es6

@@ -0,0 +1,176 @@
+/* eslint-disable no-div-regex, no-useless-escape, no-param-reassign */
+
+/**
+ * A plain Javascript component that handles the form filter.
+ * @class
+ * @augments Component
+ */
+((exports) => {
+  class FormFilterComponent {
+    mounted;
+    $form;
+
+    constructor(selector) {
+      this.$form = $(selector);
+      this.mounted = false;
+
+      this._onFormChange = this._onFormChange.bind(this);
+      this._onPopState = this._onPopState.bind(this);
+    }
+
+    /**
+     * Handles the logic for unmounting the component
+     * @public
+     * @returns {Void} - Returns nothing
+     */
+    unmountComponent() {
+      if (this.mounted) {
+        this.mounted = false;
+        this.$form.off('change', 'input, select', this._onFormChange);
+
+        exports.onpopstate = null;
+      }
+    }
+
+    /**
+     * Handles the logic for mounting the component
+     * @public
+     * @returns {Void} - Returns nothing
+     */
+    mountComponent() {
+      if (this.$form.length > 0 && !this.mounted) {
+        this.mounted = true;
+        this.$form.on('change', 'input, select', this._onFormChange);
+
+        exports.onpopstate = this._onPopState;
+      }
+    }
+
+    /**
+     * Finds the current location.
+     * @private
+     * @returns {String} - Returns the current location.
+     */
+    _getLocation() {
+      return exports.location.toString();
+    }
+
+    /**
+     * Finds the values of the location prams that match the given regexp.
+     * @private
+     * @param {Regexp} regex - a Regexp to match the params.
+     * @returns {String[]} - An array of values of the params that match the regexp.
+     */
+    _getLocationParams(regex) {
+      const location = decodeURIComponent(this._getLocation());
+      let values = location.match(regex);
+      if (values) {
+        values = values.map((val) => val.match(/=(.*)/)[1]);
+      }
+      return values;
+    }
+
+    /**
+     * Parse current location and get filter values.
+     * @private
+     * @returns {Object} - An object where a key correspond to a filter field
+     *                     and the value is the current value for the filter.
+     */
+    _parseLocationFilterValues() {
+      // Every location param is constructed like this: filter[key]=value
+      let regexpResult = decodeURIComponent(this._getLocation()).match(/filter\[([^\]]*)\](?:\[\])?=([^&]*)/g);
+
+      // The RegExp g flag returns null or an array of coincidences. It doesn't return the match groups
+      if (regexpResult) {
+        const filterParams = regexpResult.reduce((acc, result) => {
+          const [, key, value] = result.match(/filter\[([^\]]*)\](?:\[\])?=([^&]*)/);
+          acc[key] = value;
+          return acc;
+        }, {});
+
+        return filterParams;
+      }
+
+      return null;
+    }
+
+    /**
+     * Clears the form to start with a clean state.
+     * @private
+     * @returns {Void} - Returns nothing.
+     */
+    _clearForm() {
+      this.$form.find('input[type=checkbox]').attr('checked', false);
+      this.$form.find('input[type=radio]').attr('checked', false);
+
+      // This ensure the form is reset in a valid state where a fieldset of
+      // radio buttons has the first selected.
+      this.$form.find('fieldset input[type=radio]:first').each(function () {
+        // I need the this to iterate a jQuery collection
+        $(this)[0].checked = true; // eslint-disable-line no-invalid-this
+      });
+    }
+
+    /**
+     * Handles the logic when going back to a previous state in the filter form.
+     * @private
+     * @returns {Void} - Returns nothing.
+     */
+    _onPopState() {
+      this._clearForm();
+
+      const filterParams = this._parseLocationFilterValues();
+
+      if (filterParams) {
+        const fieldIds = Object.keys(filterParams);
+
+        // Iterate the filter params and set the correct form values
+        fieldIds.forEach((fieldId) => {
+          let field = null;
+          
+          // Since we are using Ruby on Rails generated forms the field ids for a
+          // checkbox or a radio button has the following form: filter_${key}_${value}
+          field = this.$form.find(`input#filter_${fieldId}_${filterParams[fieldId]}`);
+
+          if (field.length > 0) {
+            field[0].checked = true;
+          } else {
+            // If the field is not a checkbox neither a radio it means is a input or a select.
+            // Ruby on Rails ensure the ids are constructed like this: filter_${key}
+            field = this.$form.find(`input#filter_${fieldId},select#filter_${fieldId}`);
+            
+            if (field.length > 0) {
+              field.val(filterParams[fieldId]);
+            }
+          }
+        });
+      }
+
+      this.$form.submit();
+    }
+
+    /**
+     * Handles the logic to update the current location after a form change event.
+     * @private
+     * @returns {Void} - Returns nothing.
+     */
+    _onFormChange() {
+      let newUrl = '';
+      const formAction = this.$form.attr('action');
+      const params = this.$form.serialize();
+
+      this.$form.submit();
+
+      if (formAction.indexOf('?') < 0) {
+        newUrl = `${formAction}?${params}`;
+      } else {
+        newUrl = `${formAction}&${params}`;
+      }
+
+      exports.history.pushState(null, null, newUrl);
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.FormFilterComponent = FormFilterComponent;
+})(window);

data/app/assets/javascripts/decidim/form_filter.component.test.js

@@ -0,0 +1,151 @@
+/* eslint-disable no-unused-expressions */
+require('jquery');
+require('./form_filter.component.js.es6');
+
+const { Decidim: { FormFilterComponent } } = window;
+
+describe('FormFilterComponent', () => {
+  const selector = 'form#new_filter';
+  let subject = null;
+
+  beforeEach(() => {
+    let form = `
+      <form id="new_filter" action="/filters" method="get">
+        <fieldset>
+          <input id="filter_order_start_time_asc" value="asc" type="radio" name="order_start_time" checked />
+          <input id="filter_order_start_time_desc" value="desc" type="radio" name="order_start_time" />
+        </fieldset>
+
+        <fieldset>
+          <input id="filter_scope_id_1" value="1" type="checkbox" name="scope_id[]" />
+          <input id="filter_scope_id_2" value="2" type="checkbox" name="scope_id[]" />
+          <input id="filter_scope_id_3" value="3" type="checkbox" name="scope_id[]" />
+        </fieldset>
+
+        <fieldset>
+          <select id="filter_category_id" name="filter[category_id]">
+            <option value="1">Category 1</option>
+            <option value="2">Category 2</option>
+          </select>
+        </fieldset>
+      </form>
+    `;
+    $('body').append(form);
+    window.history = {
+      pushState: sinon.stub()
+    };
+    subject = new FormFilterComponent(selector);
+  });
+
+  it('exists', () => {
+    expect(FormFilterComponent).to.exist;
+  });
+
+  it('initializes unmounted', () => {
+    expect(subject.mounted).to.be.falsey;
+  });
+
+  it('initializes the formSelector with the given selector', () => {
+    expect(subject.$form).to.deep.equal($(selector));
+  });
+
+  describe('when mounted', () => {
+    beforeEach(() => {
+      sinon.spy(subject.$form, 'on');
+      subject.mountComponent();
+    });
+
+    afterEach(() => {
+      subject.$form.on.restore();
+      subject.unmountComponent();
+    });
+
+    it('mounts the component', () => {
+      expect(subject.mounted).to.be.truthy;
+    });
+
+    it('mounts the component', () => {
+      expect(window.onpopstate).to.equal(subject._onPopState);
+    });
+
+    it('binds the form change event', () => {
+      expect(subject.$form.on).to.have.been.calledWith('change', 'input, select', subject._onFormChange);
+    });
+
+    describe('on form change event', () => {
+      let stub = null;
+
+      beforeEach(() => {
+        stub = sinon.stub(subject.$form, 'submit');
+      });
+
+      it('form is submitted', () => {
+        $(selector).find('input[name=order_start_time][value=desc]').trigger('change');
+
+        expect(stub).to.have.been.calledOnce;
+      })
+
+      it('sets the onpopostate callback', () => {
+        sinon.stub(subject.$form, 'serialize').returns('order_start_time=desc')
+        $(selector).find('input[name=order_start_time][value=desc]').trigger('change');
+
+        expect(window.history.pushState).to.have.been.calledWith(null, null, '/filters?order_start_time=desc');
+      });
+    });
+
+    describe('onpopstate event', () => {
+      beforeEach(() => {
+        sinon.stub(subject.$form, 'submit');
+      });
+
+      it('clears the form data', () => {
+        let clearFormSpy = sinon.spy(subject, '_clearForm');
+
+        window.onpopstate();
+
+        expect(clearFormSpy).to.have.been.called;
+      });
+
+      it('sets the correct form fields based on the current location', () => {
+        sinon.stub(subject, '_getLocation').returns('/filters?order_start_time=desc&scope_id[]=1&scope_id[]=2&filter[category_id]=2')
+
+        window.onpopstate();
+
+        expect($(selector).find('select').val()).to.equal('2');
+        expect($(selector).find('input[name=order_start_time][value=desc]').attr('checked')).to.be.truthy;
+        expect($(selector).find('input[name=order_start_time][value=asc]').attr('checked')).to.be.falsey;
+        expect($(selector).find('input[name=scope_id][value=1]').attr('checked')).to.be.truthy;
+        expect($(selector).find('input[name=scope_id][value=2]').attr('checked')).to.be.truthy;
+        expect($(selector).find('input[name=scope_id][value=3]').attr('checked')).to.be.falsey;
+      });
+    });
+  });
+
+  describe('when unmounted', () => {
+    beforeEach(() => {
+      sinon.spy(subject.$form, 'off');
+      subject.mountComponent();
+      subject.unmountComponent();
+    });
+
+    afterEach(() => {
+      subject.$form.off.restore();
+    })
+
+    it('mounts the component', () => {
+      expect(subject.mounted).to.be.falsey;
+    });
+
+    it('unbinds the form change event', () => {
+      expect(subject.$form.off).to.have.been.calledWith('change', 'input, select', subject._onFormChange);
+    });
+
+    it('removes the onpopostate callback', () => {
+      expect(window.onpopstate).not.to.exist;
+    });
+  });
+
+  afterEach(() => {
+    $(selector).remove();
+  })
+});

data/app/assets/javascripts/decidim/inline_svg.js.es6

@@ -0,0 +1,12 @@
+// = require svg-injector
+
+(function() {
+  let inlineSVG = function () {
+    let $externalSvg = $("img.external-svg");
+    SVGInjector($externalSvg, {
+      each: (svg) => $(svg).show()
+    });
+  }
+
+  $(document).on('turbolinks:load', inlineSVG);
+}(window));

data/app/assets/javascripts/decidim/user_registrations.js.es6

@@ -0,0 +1,22 @@
+$(document).on('turbolinks:load', () => {
+  const $userRegistrationForm = $('.register-form');
+  const $userGroupFields      = $userRegistrationForm.find('.user-group-fields');
+  const inputSelector         = 'input[name="user[sign_up_as]"]';
+
+  const setGroupFieldsVisibility = (value) => {
+    if (value === 'user') {
+      $userGroupFields.hide();
+    } else {
+      $userGroupFields.show();
+    }
+  }
+
+  setGroupFieldsVisibility($userRegistrationForm.find(`${inputSelector}:checked`).val());
+  
+  $userRegistrationForm.on('change', inputSelector, (event) => {
+    const value = event.target.value;
+
+    setGroupFieldsVisibility(value);
+  });
+
+});

data/app/assets/stylesheets/decidim/_variables.scss

@@ -1,4 +1,4 @@
-// Decidim Variables
+// Variables
 
 $primary: map-get($foundation-palette, primary) !default;
 $secondary: map-get($foundation-palette, secondary) !default;

data/app/assets/stylesheets/decidim/modules/_comments.scss

@@ -57,9 +57,11 @@ $comment-form-bg: $light-gray;
   }
 }
 
-.comment__footer{
+.comment__footer,
+.comment__additionalreply{
   padding: $comment-padding;
   font-size: 90%;
+  @include clearfix;
 }
 
 .comment--nested{
@@ -74,10 +76,6 @@ $comment-form-bg: $light-gray;
   }
 }
 
-.comment__footer{
-  @include clearfix;
-}
-
 .comment__reply{
   float: left;
   color: $muted;
@@ -116,4 +114,3 @@ $comment-form-bg: $light-gray;
     display: block;
   }
 }
-