Browse Source

Formatting

master
Chimo 4 years ago
parent
commit
5c1452e5dc
4 changed files with 149 additions and 119 deletions
  1. 10
    0
      .jscsrc
  2. 14
    0
      .jshintrc
  3. 4
    6
      hovercard.css
  4. 121
    113
      hovercard.js

+ 10
- 0
.jscsrc View File

@@ -0,0 +1,10 @@
{
"preset": "jquery",
// Preset overrides
"requireCamelCaseOrUpperCaseIdentifiers": null,
"maximumLineLength": 500,
// Additional preset tightening
"requireBlocksOnNewline": true,
"requireSpaceBeforeBlockStatements": true,
"disallowMixedSpacesAndTabs": true
}

+ 14
- 0
.jshintrc View File

@@ -0,0 +1,14 @@
{
"boss": true,
"curly": true,
"eqeqeq": true,
"eqnull": true,
"expr": true,
"immed": true,
"noarg": true,
"undef": true,
"unused": true,
"jquery": true,
"browser": true,
"es3": true
}

+ 4
- 6
hovercard.css View File

@@ -1,8 +1,8 @@
.sn-hovercard {
background-color: #FFF;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
box-shadow: 2px 2px 2px #CCC;
box-shadow: 2px 2px 2px #ccc;
display: none;
font-size: small;
position: absolute;
@@ -32,8 +32,8 @@
}

.sn-hovercard .hc-actions {
background-color: #EEE;
border-top: 1px solid #CCC;
background-color: #eee;
border-top: 1px solid #ccc;
border-radius: 0 0 5px 5px;
padding: 5px;
}
@@ -55,5 +55,3 @@
#hc-profile {
margin-bottom: 5px;
}



+ 121
- 113
hovercard.js View File

@@ -1,167 +1,175 @@
(function ($) {
// private
function buildHTML(data, group) {
var at = '',
desc = 'Description',
notices = '',
latest = '',
subs = 'members',
( function( $ ) {
/* private */
function buildHTML( data, group ) {
var at = "",
desc = "Description",
notices = "",
latest = "",
subs = "members",
html,
uid = (new Date).getTime();
uid = new Date().getTime();

// Redefine some things if we're dealing with @user
if (!group) {
at = '@';
desc = 'Bio';
subs = 'subscribers';
notices = '<span class="hc-notices">\
<span class="hc-count">' + data.statuses_count + '</span> notices,\
</span>';
latest = '<h3>Latest</h3>\
<span class="hc-status">' + data.status.text + '</span>';
if ( !group ) {
at = "@";
desc = "Bio";
subs = "subscribers";
notices = "<span class='hc-notices'>" +
"<span class='hc-count'>" + data.statuses_count + "</span> notices," +
"</span>";
latest = "<h3>Latest</h3>" +
"<span class='hc-status'>" + data.status.text + "</span>";
}

html = '<div class="sn-hovercard">\
<div class="hc-content">\
<h2>' + (data.name || data.fullname) + '</h2>\
<a href="' + (data.statusnet_profile_url || data.url) + '">' + at + (data.screen_name || data.fullname) + '\
<img src="' + (data.profile_image_url || data.stream_logo) + '" />\
</a>\
<p class="hc-stats">\
' + notices + '\
<span class="hc-subs">\
<span class="hc-count">' + (data.friends_count || data.member_count) + '</span> ' + subs + '\
</span>\
</p>\
<h3>' + desc + '</h3>\
<span class="hc-bio">' + (data.description || '') + '</span>\
' + latest + '\
</div>\
<div class="hc-actions"><a href="#" class="hc-follow">subscribe</a>\
<div class="hc-follow-form">\
<form>\
<fieldset>\
<label for="hc-profile-' + uid + '">Your Accound ID</label>\
<input id="hc-profile-' + uid + '" type="text" placeholder="e.g. user@identi.ca" />\
<input type="hidden" name="profile" value="' + (data.statusnet_profile_url || data.url) + '" />\
<button type="submit">Subscribe</button>\
</fieldset>\
</form>\
</div>\
</div>\
</div>';
html = "<div class='sn-hovercard'>" +
"<div class='hc-content'>" +
"<h2>" + ( data.name || data.fullname ) + "</h2>" +
"<a href='" + ( data.statusnet_profile_url || data.url ) + "'>" + at + ( data.screen_name || data.fullname ) +
"<img src='" + ( data.profile_image_url || data.stream_logo ) + "' />" +
"</a>" +
"<p class='hc-stats'>" + notices +
"<span class='hc-subs'>" +
"<span class='hc-count'>" + ( data.friends_count || data.member_count ) + "</span> " + subs +
"</span>" +
"</p>" +
"<h3>" + desc + "</h3>" +
"<span class='hc-bio'>" + ( data.description || "" ) + "</span>" + latest +
"</div>" +
"<div class='hc-actions'><a href='#' class='hc-follow'>subscribe</a>" +
"<div class='hc-follow-form'>" +
"<form>" +
"<fieldset>" +
"<label for='hc-profile-" + uid + "'>Your Accound ID</label>" +
"<input id='hc-profile-" + uid + "' type='text' placeholder='e.g. user@identi.ca' />" +
"<input type='hidden' name='profile' value='" + ( data.statusnet_profile_url || data.url ) + "' />" +
"<button type='submit'>Subscribe</button>" +
"</fieldset>" +
"</form>" +
"</div>" +
"</div>" +
"</div>";

return html;
}

function buildCard(data, $link) {
$link.on('mouseenter', function () {
setTimeout(function () {
$('.sn-hovercard').hide(); // Only show one hovercard at a time
$link.data('sn-hovercard').show();
}, 400);
});
function buildCard( data, $link ) {
$link.on( "mouseenter", function() {
setTimeout( function() {
$( ".sn-hovercard" ).hide(); /* Only show one hovercard at a time */
$link.data( "sn-hovercard" ).show();
}, 400 );
} );

var offset = $link.offset(),
group = ($link.text().charAt(0) === '!'),
html = buildHTML(data, group);

html = $(html).appendTo('body')
.on('mouseleave', function () { setTimeout(function () { html.hide(); }, 400); })
.css({top: offset.top, left: offset.left});

html.find('.hc-follow').on('click', function (e) {
group = ( $link.text().charAt( 0 ) === "!" ),
html = buildHTML( data, group );

html = $( html ).appendTo( "body" )
.on( "mouseleave", function() {
setTimeout( function() {
html.hide();
}, 400 );
} )
.css( { top: offset.top, left: offset.left } );

html.find( ".hc-follow" ).on( "click", function( e ) {
e.preventDefault();
$(this).parent().find('.hc-follow-form').slideToggle();
});
$( this ).parent().find( ".hc-follow-form" ).slideToggle();
} );

html.find('form').on('submit', function (e) {
html.find( "form" ).on( "submit", function( e ) {
e.preventDefault();

var $form = $(this),
$input = $form.find('input[type=text]'),
profile = $input.val().split('@');
var $form = $( this ),
$input = $form.find( "input[type=text]" ),
profile = $input.val().split( "@" );

if (profile.length !== 2) {
// TODO: show error msg
$input.css('border', '1px solid #F00');
if ( profile.length !== 2 ) {
/* TODO: show error msg */
$input.css( "border", "1px solid #f00" );
} else {
profile = profile[1];
if (!group) {
$form.attr('action', 'http://' + profile + '/main/ostatussub');
profile = profile[ 1 ];
if ( !group ) {
$form.attr( "action", "http://" + profile + "/main/ostatussub" );
} else {
$form.attr('action', 'http://' + profile + '/main/ostatusgroup');
$form.attr( "action", "http://" + profile + "/main/ostatusgroup" );
}
this.submit();
}
});
} );

$link.data('sn-hovercard', html); // Could use ARIA instead
$link.trigger('mouseenter'); // Initial show() after we got the data
$link.data( "sn-hovercard", html ); /* Could use ARIA instead */
$link.trigger( "mouseenter" ); /* Initial show() after we got the data */
}

function buildErrorCard() {
// TODO
/* TODO */
}

function getData(e) {
var $this = $(this),
id = $this.text().substr(1),
group = ($this.text().charAt(0) === '!'),
patt = group ? new RegExp('group\/' + id + '$') : new RegExp(id + '$'),
url = $this.attr('href').replace(patt, ''),
api = group ? '/api/statusnet/groups/show.json?id=' + id : '/api/users/show.json?id=' + id;
function getData() {
var $this = $( this ),
id = $this.text().substr( 1 ),
group = ( $this.text().charAt( 0 ) === "!" ),
patt = group ? new RegExp( "group\/" + id + "$" ) : new RegExp( id + "$" ),
url = $this.attr( "href" ).replace( patt, "" ),
api = group ? "/api/statusnet/groups/show.json?id=" + id : "/api/users/show.json?id=" + id;

// NOTE: Doesn't support api at non-default locations
// FIXME: This (probably) fails if a single-user instance is installed in a subdir that matches the user's nickname
$.getJSON(url + api) // Fancy URL
.success(function (data) { buildCard(data, $this); })
.error(function () { // Try non-fancy URL
$.getJSON(url + '/index.php' + api)
.success(function (data) { buildCard(data, $this); })
.error(function () { buildErrorCard(); });
});
$.getJSON( url + api ) /* Fancy URL */
.success( function( data ) {
buildCard( data, $this );
} )
.error( function() { /* Try non-fancy URL */
$.getJSON( url + "/index.php" + api )
.success( function( data ) {
buildCard( data, $this );
} )
.error( function() {
buildErrorCard();
} );
} );
}

// public
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this),
init: function() {
return this.each( function() {
var $this = $( this ),
$collection;

if ($this.is('a[href]')) {
if ( $this.is( "a[href]" ) ) {
$collection = $this;
} else {
$collection = $this.find('a[href]');
$collection = $this.find( "a[href]" );
}

if ($collection) {
$collection.each(function () {
if ($(this).text().match(/@\w+/)) {
$(this).one('mouseenter', getData);
} else if ($(this).text().match(/!\w+/)) {
$(this).one('mouseenter', getData);
if ( $collection ) {
$collection.each( function() {
if ( $( this ).text().match( /@\w+/ ) ) {
$( this ).one( "mouseenter", getData );
} else if ( $( this ).text().match( /!\w+/ ) ) {
$( this ).one( "mouseenter", getData );
}
});
} );
}
});
} );
}
};

// Method calling logic
$.fn.SnHoverCard = function (method) {
$.fn.SnHoverCard = function( method ) {
var elm;

if (methods[method]) {
elm = methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
elm = methods.init.apply(this, arguments);
if ( methods[ method ] ) {
elm = methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ) );
} else if ( typeof method === "object" || !method ) {
elm = methods.init.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.SnHoverCard');
$.error( "Method " + method + " does not exist on jQuery.SnHoverCard" );
}

return elm;
};

}(jQuery));
}( jQuery ) );

Loading…
Cancel
Save