Skip to content

Instantly share code, notes, and snippets.

@jimmyhchan

jimmyhchan/demo.html

Forked from wondersloth/demo.html
Created April 16, 2011 00:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jimmyhchan/922683 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jimmyhchan/922683 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jimmyhchan revised this gist Apr 16, 2011. 1 changed file with 42 additions and 50 deletions.
    92 changes: 42 additions & 50 deletions searchcompany.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,27 +7,17 @@ IN.$extensions("SearchCompany", function SearchCompany() {

    Sslac.Class("IN.Tags.SearchCompany").Extends("IN.Tags.Base").Constructor(function(el, attributes) {
    this.Parent(el, attributes);

    // NOTE: This is required for development on linken.biz domains
    IN.ENV.url.xd_us_html = "http://medwards-md.linkedin.biz/~medwards/search/xdrpc.html";
    // END REQUIRED

    var that = this;

    IN.Event.onOnce(IN, "auth", function () {
    IN.API.Raw("people-search:(people:(id,first-name,last-name,headline,distance,picture-url,location,site-standard-profile-request,industry))?count=28&facet=current-company," + attributes.id)
    .result(function peopleSearchCallback(result) {
    var view, template, markup;

    view = { users: result.people.values };

    console.log(view);

    template = [
    this.companyId = attributes.id || "";
    this.template = [
    '<h3>Find your colleagues</h3>',
    '<form>',
    ' <input type="text" name="keywords" placeholder="Type a name, postion or skill" >',
    ' </input><input type="submit" id="company-search-submit" name=></input>'+
    '</form>',
    '<ul class="user-list">',
    '{{#users}}',
    ' <li class="user">',
    ' <img src="{{pictureUrl}}" class="profile-photo"/>',
    ' <img src="{{pictureUrl}}{{^pictureUrl}}http://static02.linkedin.com/scds/common/u/img/icon/icon_no_photo_80x80.png{{/pictureUrl}}" class="profile-photo"/>',
    ' <div class="profile-info">',
    ' <div class="content">',
    ' <h2>{{firstName}} {{lastName}}</h2>',
    @@ -40,41 +30,44 @@ IN.$extensions("SearchCompany", function SearchCompany() {
    '{{/users}}',
    '</ul>'
    ].join('');



    // Do stuff here.

    // Parse data and render.

    markup = Mustache.to_html(template, view);
    // console.log(markup);
    that.el().innerHTML = markup;

    $('.user-list').ready(function () {
    var people = $('.profile-photo');

    people.click(function () {
    $('.user .profile-info').hide()
    $(this).siblings('.profile-info').show();
    });
    IN.Event.onOnce(IN, "auth", function () {
    //do initial search
    this.doSearch();
    }, this);


    $('.profile-info .close').click(function () {
    $(this).parents('.profile-info').hide();
    })
    });
    $('.user-list').ready(function () {
    var people = $('.profile-photo');

    people.click(function () {
    $('.user .profile-info').hide()
    $(this).siblings('.profile-info').show();
    });
    });










    $('.profile-info .close').click(function () {
    $(this).parents('.profile-info').hide();
    })
    });

    })
    .Method("render", function( result ){
    // Parse data and render.
    var view = { users: result.people.values };
    var markup = Mustache.to_html(this.template, view);
    // console.log(markup);
    this.el().innerHTML = markup;
    })
    .Method("doSearch", function( keywords, callback ){
    IN.API.Raw("people-search:(people:(id,first-name,last-name,headline,distance,picture-url,location,site-standard-profile-request,industry))?count=20&facet=current-company," + this.companyId).result(function peopleSearchCallback(result) {
    // Do stuff here.
    this.render(result);
    }, this);
    });

    // NOTE: This is required for development on linken.biz domains
    IN.ENV.url.xd_us_html = "http://jchan-md.linkedin.biz/~jchan/search/xdrpc.html";
    // END REQUIRED


    // var win = new IN.Objects.SmartWindow({
    @@ -86,7 +79,6 @@ IN.$extensions("SearchCompany", function SearchCompany() {
    // NOTE: This is required for development on linken.biz domains
    IN.ENV.url.xd_us_html = ORIGINAL_XDURL;
    // END REQUIRED
    });

    IN.addTag("SearchCompany", IN.Tags.SearchCompany);

  2. @wondersloth wondersloth created this gist Apr 15, 2011.
    129 changes: 129 additions & 0 deletions demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,129 @@
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>LinkedIn Colleague Search</title>
    <style type="text/css" media="screen">
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }
    body {
    line-height: 1;
    color: black;
    background: white;
    }
    ol, ul {
    list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: separate;
    border-spacing: 0;
    }
    caption, th, td {
    text-align: left;
    font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: "";
    }
    blockquote, q {
    quotes: "" "";
    }
    </style>
    <style type="text/css" media="screen">
    #body {
    margin: 0 auto;
    width: 252px;
    }

    ul.user-list {
    list-style: none;
    width: 252px;
    }

    li.user {
    float: left;
    height: 61px;
    width: 61px;
    position: relative;
    margin-right: 2px;
    margin-bottom: 2px;
    }

    .user.first {
    clear: left;
    }

    .profile-photo {
    height: 61px;
    width: 61px;
    background-color: #AAA;
    cursor: pointer;
    }

    .profile-info {
    display: none;
    position: absolute;
    bottom: -150px;
    left: 0;
    height: 150px;
    width: 200px;
    z-index: 20;
    background-color: #DDD;
    }

    .profile-info .content {
    position: relative;
    }

    .profile-info .close {
    border: 1px solid black;
    text-align: center;
    line-height: 20px;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    }
    </style>
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://github.com/janl/mustache.js/raw/master/mustache.js"></script>
    <script type="text/javascript">
    // WARNING: If your XDRPC is on same host, you MUST adjust document.domain to the lowest common denominator
    document.domain = "linkedin.biz";
    </script>
    </head>
    <body style="background: #ccc">
    <p>
    Look at moo!
    </p>
    <script type="text/javascript" src="http://platform.linkedin.com/in.js">
    api_key: F1o04RFEfDGcJ_Nu8WhuPpk2Nx8sr8h3RhDT2FIz8dTiRBSMSi2tOEqEjUln9U3Q
    authorize: true
    extensions: SearchCompany@http://medwards-md.linkedin.biz/~medwards/search/searchcompany.js
    </script>
    <script type="IN/SearchCompany" data-id="1337"></script>
    </body>
    </html>
    94 changes: 94 additions & 0 deletions searchcompany.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,94 @@
    /*jslint white:false */
    /*globals IN, Mustache, Sslac, console */
    IN.$extensions("SearchCompany", function SearchCompany() {
    // NOTE: This is required for development in linkedin.biz domains
    var ORIGINAL_XDURL = IN.ENV.url.xd_us_html;
    // END REQUIRED

    Sslac.Class("IN.Tags.SearchCompany").Extends("IN.Tags.Base").Constructor(function(el, attributes) {
    this.Parent(el, attributes);

    // NOTE: This is required for development on linken.biz domains
    IN.ENV.url.xd_us_html = "http://medwards-md.linkedin.biz/~medwards/search/xdrpc.html";
    // END REQUIRED

    var that = this;

    IN.Event.onOnce(IN, "auth", function () {
    IN.API.Raw("people-search:(people:(id,first-name,last-name,headline,distance,picture-url,location,site-standard-profile-request,industry))?count=28&facet=current-company," + attributes.id)
    .result(function peopleSearchCallback(result) {
    var view, template, markup;

    view = { users: result.people.values };

    console.log(view);

    template = [
    '<ul class="user-list">',
    '{{#users}}',
    ' <li class="user">',
    ' <img src="{{pictureUrl}}" class="profile-photo"/>',
    ' <div class="profile-info">',
    ' <div class="content">',
    ' <h2>{{firstName}} {{lastName}}</h2>',
    ' <h3>{{headline}}</h3>',
    ' <h4>{{#location}}{{name}}{{/location}}</h4>',
    ' <div class="close">X</div>',
    ' </div>',
    ' </div>',
    ' </li>',
    '{{/users}}',
    '</ul>'
    ].join('');



    // Do stuff here.

    // Parse data and render.

    markup = Mustache.to_html(template, view);
    // console.log(markup);
    that.el().innerHTML = markup;

    $('.user-list').ready(function () {
    var people = $('.profile-photo');

    people.click(function () {
    $('.user .profile-info').hide()
    $(this).siblings('.profile-info').show();
    });

    $('.profile-info .close').click(function () {
    $(this).parents('.profile-info').hide();
    })
    });
    });
    });












    // var win = new IN.Objects.SmartWindow({
    // mode: "embedded",
    // url: "http://jheuser-md.linkedin.biz/~hackday/hackday/plugin/plugin.html"
    // });
    // win.place(this.el());

    // NOTE: This is required for development on linken.biz domains
    IN.ENV.url.xd_us_html = ORIGINAL_XDURL;
    // END REQUIRED
    });

    IN.addTag("SearchCompany", IN.Tags.SearchCompany);

    // console.log("HelloWorld Extension has Executed");
    });