Changelog jQuery plugin

[catalinmiron]

Need

The easiest way to integrate the changelog on the client-side is through a jQuery plugin

Deliverables

• jQuery plugin that generates the DOM in a given container

The jQuery plugin will support the following options:

// Checks GitHub for new updates since last fetch
$('.changelog-container').changelog({
  // Label for the button the appears when you got updates, supports HTML
  buttonText: 'Click me, I got updates!',
  // Label for the reload button shown below the list, supports HTML
  reloadButtonText: 'Reload',
  // Position of the list around the button. E.g. if the button is placed 
  // on the bottom-right corner, you probably want the list to be positioned 
  // top-left or left-top
  listPosition: 'top-left',
  // Poll GitHub for new updates at every set number of seconds
  autoRefresh: 2,
  // GitHub repository to fetch issues from
  githubRepo: 'facebook/react',
  // Only show updates that have one of these labels
  githubLabels: ['bug', 'enhancement', 'feature'],
  // Payload for the GitHub issues endpoint 
  // https://developer.github.com/v3/issues/#list-issues
  githubParams: {
    // Only get issues from GitHub that have ALL of these labels
    // It's best to set a single label here, e.g. 'release', that's common
    // to all issues. For deeper filtering 'githubLabels' can be used
    labels: 'release'
  }
});

The jQuery plugin will have the following methods:

// Checks GitHub for new updates since last fetch
$('.changelog-container').changelog('checkForUpdates');

Solution

We need to have a container which in the first place will be empty, this will be targeted by the plugin.

Second, we need to make a jQuery plugin, which will have a method called checkForUpdates. Given options set by the user(see above), it will be able to poll GitHub and generate the appropriate DOM structure when issues are closed.
For a given repository (gitHubRepo) and a common label set under githubParams.labels this method will request the issues that were closed since a given timestamp. The timestamp will be set when the plugin is first initialized on a container and reset after new updates are received.

Prerequisites

• jQuery Plugins
• GitHub API

TODO

• create the skeleton for the plugin
• create the default options for the plugin
• apply custom options passed through changelog plugin
• create a method which will append the changelog DOM to the container
• create a method which will trigger click event on the button and toggle the list
• create checkForUpdates method
• create a destroy method that unbinds event listeners and removes the changelog DOM
• add support for GitHub API

cc: @skidding @RadValentin

[RadValentin]

I build a simple demo to populate the list with dummy data

cc: @catalinmiron

[ovidiuch]

Pull request?

[RadValentin]

Should we add an option to configure the text on the Reload button as well? I'm thinking that users might want to change it to something else like Relaunch or Refresh.

[ovidiuch]

Sure. Maybe allow HTML here as well, to be able to insert any icon, etc.

On Fri, May 23, 2014 at 2:28 PM, Valentin Radulescu <
notifications@github.com> wrote:

Should we add an option to configure the text on the Reload button as
well? I'm thinking that users might want to change it to something else
like Relaunch or Refresh.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2#issuecomment-43997654
.

Best regards,
Ovidiu Cherecheş