emm88n · June 24, 2016 11:12
diff --git a/README.md b/README.md
diff --git a/an_html_file.html b/an_html_file.html
 on every single page
 ...
 <div data-app-component="notifier">
  <audio src="{{ url('maramba.mp3') }}"
    data-notifier="new-order"
    data-url="{{ url('b/orders/newest') }}"
    data-title="You have a new order"
    data-icon="https://s3-ap-southeast-1.amazonaws.com/elasticbeanstalk-ap-southeast-1-622281270456/Icon-167%402x.png"
  ></audio>
 </div>
 ...
diff --git a/app.js b/app.js
 // create if it doesn't exist yet
 this.App       = this.App       || {};
 App.components = App.components || {};
 App.views      = App.views      || {};

 // initialization functions
 App.initializeComponents = function() {
  for (var component in App.components) {
    if (App.components.hasOwnProperty(component)) {
      App.components[component]();
    }
  }
 };

 App.initializeView = function(view) {
  view = view || $('[data-app-view]').data('app-view') || null;

  if (view !== null && App.views.hasOwnProperty(view)) {
    App.views[view]();
  }
 };
diff --git a/manifest.js b/manifest.js
 // let us assume everything was already concatenated
 // this might also be .on('other:event')
 $(document).on('ready', function() {
  App.initializeComponents();
 });
diff --git a/sample_component.js b/sample_component.js
 App.components['notifier'] = function() {
  'use strict';

  // declare constants
  var NAME              = 'notifier';
  var EVENT_NAME        = 'app:notify';
  var SELECTOR          = '[data-app-component=' + NAME + ']';
  var NOTIFIER_SELECTOR = SELECTOR + ' > [data-notifier]';



  // binds the ajax requests for each notification type
  $(NOTIFIER_SELECTOR).each(function() {
    var $object = $(this);
    var notification = function() {
      $.get($object.data('url'), function(data) {
        var response = data.data;
        var momentResponse = moment(response["created_at"]);
        notification.momentCurrent = notification.momentCurrent || momentResponse;

        if (notification.momentCurrent.isBefore(momentResponse)) {
          notification.momentCurrent = momentResponse;
          $(SELECTOR).trigger(EVENT_NAME, $object.get(0));
        }

        setTimeout(notification, 5000);
      });
    };

    notification();
  });



  // if new notifications are available from the server,
  // create notifications for each notification type
  $(document).on(EVENT_NAME, SELECTOR, function(event, object) {
    var $object = $(object);
    var title   = $object.data('title');
    var options = {
      dir: $object.data('dir') || 'auto',
      lang: $object.data('lang'),
      body: $object.data('body'),
      // tag: $object.data('tag'),
      icon: $object.data('icon'),
      data: null,
      vibrate: null,
      renotify: $object.data('renotify') || false
      // requireInteraction: $object.data('require-interaction') || false,
      // sticky: $object.data('sticky') || false
    };


    // show notification immediately
    if (Notification.permission === 'granted') {
      new Notification(title, options);
    }
    object.play();

    // show notification in intervals afterward
    if (Notification.permission === 'granted') {
      var notificationInterval = setInterval(function() {
        var notification = new Notification(title, options);
        object.play();
        notification.onclick = function() {
          clearInterval(notificationInterval);
        };
      }, 5000);
    }
  });



  // request permission if not yet granted
  if (Notification.permission === 'default') {
    Notification.requestPermission();
  }
 };
	on every single page
	...
	<div data-app-component="notifier">
	<audio src="{{ url('maramba.mp3') }}"
	data-notifier="new-order"
	data-url="{{ url('b/orders/newest') }}"
	data-title="You have a new order"
	data-icon="https://s3-ap-southeast-1.amazonaws.com/elasticbeanstalk-ap-southeast-1-622281270456/Icon-167%402x.png"
	></audio>
	</div>
	...
	// create if it doesn't exist yet
	this.App = this.App \|\| {};
	App.components = App.components \|\| {};
	App.views = App.views \|\| {};

	// initialization functions
	App.initializeComponents = function() {
	for (var component in App.components) {
	if (App.components.hasOwnProperty(component)) {
	App.components[component]();
	}
	}
	};

	App.initializeView = function(view) {
	view = view \|\| $('[data-app-view]').data('app-view') \|\| null;

	if (view !== null && App.views.hasOwnProperty(view)) {
	App.views[view]();
	}
	};
	// let us assume everything was already concatenated
	// this might also be .on('other:event')
	$(document).on('ready', function() {
	App.initializeComponents();
	});
	App.components['notifier'] = function() {
	'use strict';

	// declare constants
	var NAME = 'notifier';
	var EVENT_NAME = 'app:notify';
	var SELECTOR = '[data-app-component=' + NAME + ']';
	var NOTIFIER_SELECTOR = SELECTOR + ' > [data-notifier]';



	// binds the ajax requests for each notification type
	$(NOTIFIER_SELECTOR).each(function() {
	var $object = $(this);
	var notification = function() {
	$.get($object.data('url'), function(data) {
	var response = data.data;
	var momentResponse = moment(response["created_at"]);
	notification.momentCurrent = notification.momentCurrent \|\| momentResponse;

	if (notification.momentCurrent.isBefore(momentResponse)) {
	notification.momentCurrent = momentResponse;
	$(SELECTOR).trigger(EVENT_NAME, $object.get(0));
	}

	setTimeout(notification, 5000);
	});
	};

	notification();
	});



	// if new notifications are available from the server,
	// create notifications for each notification type
	$(document).on(EVENT_NAME, SELECTOR, function(event, object) {
	var $object = $(object);
	var title = $object.data('title');
	var options = {
	dir: $object.data('dir') \|\| 'auto',
	lang: $object.data('lang'),
	body: $object.data('body'),
	// tag: $object.data('tag'),
	icon: $object.data('icon'),
	data: null,
	vibrate: null,
	renotify: $object.data('renotify') \|\| false
	// requireInteraction: $object.data('require-interaction') \|\| false,
	// sticky: $object.data('sticky') \|\| false
	};


	// show notification immediately
	if (Notification.permission === 'granted') {
	new Notification(title, options);
	}
	object.play();

	// show notification in intervals afterward
	if (Notification.permission === 'granted') {
	var notificationInterval = setInterval(function() {
	var notification = new Notification(title, options);
	object.play();
	notification.onclick = function() {
	clearInterval(notificationInterval);
	};
	}, 5000);
	}
	});



	// request permission if not yet granted
	if (Notification.permission === 'default') {
	Notification.requestPermission();
	}
	};