CivicIdeas Projects Show

With Media Attachments

by Pete Fecteau

HTML

<script src="https://buttonpresser.com/CivicIdeas_BS/js/pdf.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/js/bootstrap.min.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/js/bootstrap-collapse.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/js/bootstrap-carousel.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/js/bootstrap-transition.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/js/goog_trans.js"></script>
<div class="standard-nav alone navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="nav-collapse" id="main-menu">
                <ul class="nav" id="main-menu-left">
                    <li class="nav-home"><a href="#">Home</a></li>
                    <li class="nav-ideas"><a href="#">Ideas</a></li>
                    <li class="nav-projects active"><a href="#">Projects</a></li>
                    <li class="nav-discussions"><a href="#">Discussions</a></li>
                    <li class="nav-forums"><a href="#">Forums</a></li>
                    <li class="nav-meetings"><a href="#">Meetings</a></li>
                    <li class="nav-surveys"><a href="#">Surveys</a></li>
                </ul>
                <ul class="nav pull-right" id="main-menu-right">
                    <li class="language">
                        <div id="google_translate_element"></div>
                    </li>
                    <li>
                        <form class="navbar-search pull-left" action="">
                            <input type="text" class="search-query span2" placeholder="Search" />
                        </form>
                    </li>
                    <li class="dropdown">
                    <a href="/users/sign_in" id="navbar-login">Login or Register</a>
                    <ul class="dropdown-menu" id="swatch-menu">
                        <li><a href="../default">Log Out</a></li>
            ...

SCSS

@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/viewer.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap-custom.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-nav.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-headers.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-sidebar.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-footer.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-project.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-discussion.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-forum.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-survey.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/widget-attach-media.css');
body {background:#DEDFE0;}
section {border-bottom: 1px solid #DEDFE0;}
section:last-child, section.media ul li:last-child {border-bottom:0;}
section.media ul li h4.slideshow:before,
section.media ul li h4.video:before,
section.media ul li h4.document:before,
.header[class^="small-"],
.header[class*=" small-"] {
	background-position-x:-50px;
}

JavaScript

$('.collapse').collapse();
$('.carousel').carousel();

// USES PDF.js
// https://github.com/mozilla/pdf.js

$(function() {   
    $(".expand").text('▼');
	$(".expand").live("click", function() {
        $(this).text('▲');
	});
    $(".collapsed").live("click", function() {
        $(this).text('▼');
	});

    var url = 'https://buttonpresser.com/CivicIdeas_BS/pdga.pdf';

    PDFJS.disableWorker = true;

    var pdfDoc = null,
        pageNum = 1,
        scale = 1.2,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    function renderPage(num) {
      pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        page.render(renderContext);
      });

      document.getElementById('page_num').textContent = pageNum;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
    }
    
    function goPrevious() {
      if (pageNum <= 1)
        return;
      pageNum--;
      renderPage(pageNum);
    }

    function goNext() {
      if (pageNum >= pdfDoc.numPages)
        return;
      pageNum++;
      renderPage(pageNum);
    }

    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
      pdfDoc = _pdfDoc;
      renderPage(pageNum);
    });
});