A Pen by hoodwink73.

index.jade

.one.publisher(contenteditable="") If you update me everybody gets updated

.two.subscriber I talk about Compilers

.three.subscriber I talk about OS

.four.subscriber I talk about AI

script.js

var trackContentChange = function (elSelector, customEventName) {
  // pass in a contenteditable element and the 
  // function triggers a `contentChange` event 
  // on the element if the content has changed.
  
  var el, isContentEditable, 
      oldContent, 
      newContent;
  
  el = $(elSelector);
  
  // the content at the very beginning, when everything was fresh and new
  trackContentChange.initialContent = el.html();
  
  // reset the content to the very first content
  trackContentChange.reset = function () {
    el.html(trackContentChange.initialContent);
  };
  
  // the element which triggers the event must ``contenteditable'
  // so folks can change its conteng and what other elements *dance* to it 
  isContentEditable = el.attr("contenteditable");
  
  // if the element does not have `contenteditable' attribute
  // the `attr` method returns `undefined` else returns a blank string
  if (typeof isContentEditable === "string") {
    el.focus(function (e) {
      oldContent = $(this).html();
    });
  } else {
    throw new Error("The element should be content editable");
  }
  
  // when the user blurs off the element check whether the text has changed or not
  el.blur(function (e) {
    newContent = $(this).html();
    // if we have a new content trigger a message
    if (newContent !== oldContent) {
      el.trigger(customEventName, newContent);
    }    
  });
};

trackContentChange(".one", "contentChanged");

$(".one").on("contentChanged", function (e, newContent) {
    $(".subscriber").html(newContent).addClass("ta-da");
  
  // decorational stuff. not part of logic
  setTimeout(function () {
    $(".subscriber").removeClass("ta-da");
  }, 1000);
});

Simple-PubSub-with-jQuery.markdown

Simple PubSub with jQuery

The pen is to demonstrate the basic idea of PubSub. Here the first element triggers an event whenever its content changes and the other three elements changes to the same content.

This is done by jQuery's custom events which makes it really. Although the traditional PubSub method is more interesting to look at.

So, when the content of the first field gets updated, it triggers a custom event and passes the new content with it.

We listen for the event and when that happens we change the content of the other elements.

A Pen by hoodwink73 on CodePen.

License.

style.scss

@import "compass";
$wetAsphalt: #34495e;
$peterRiver: #3498db;
$nephritis: #27ae60;
$sunflower: #f1c40f;

body,html {
  width: 100%;
  height: 100%;
  background-color: $wetAsphalt;
}

.publisher, .subscriber {
  background-color: $peterRiver;
  padding: 30px;
  color: white;
  margin: 25px;
  font-family: "Open Sans";
  transition: all 1s;
}

.publisher {
  background-color: #27ae60;
  border: 2px dashed white;
  
  &:focus {
    background-color: #e74c3c;
  }
}

.ta-da {
  background-color: $sunflower;
}