Paperedit - dragula

by Pietro Passarelli

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"></script>
<div class="container-fluid">
    <a class="btn btn-default" href="./paperedits.html" role="button">
      <span class="glyphicon glyphicon-arrow-left"></span>
    </a>

    <div class="row">
      <div id="transcriptSection" class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
        <!-- <img class="img-responsive hidden-print" src="http://placehold.it/350x150" > -->
        <!-- Transcripts list  -->
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Transcript 1</a></li>
            <li><a href="#">Transcript 2</a></li>
            <li><a href="#">Transcript 3</a></li>
            <li><a href="#">Transcript 4</a></li>
          </ul>
        </div>
        <!-- end transcript list end -->
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
          <div id="transcript-n">
            <!-- <h2><small>Transcript 1</small></h2> -->
            <!-- <img class="img-responsive hidden-print video"  src="demoVideoPlaceholder.png" > -->

            <!-- video -->
            <div class="row">
              <div class="embed-responsive embed-responsive-16by9 hidden-xs col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <video id="videoId" controls>
                  <source src="video/Thomas_Drake.mp4" type="video/mp4">
                    <source src="movie.ogg" type="video/ogg">
                      Your browser does not support the video tag.
                    </video>
                ...

CSS

.highlighted {
    background-color: yellow;

  }

  .highlighted-used {
    background-color: #FFFF99;
    /*FFFFCC*/
  }

  .transcript-n-text.row {
    height: 70vh;
    overflow: scroll;
  }

  /*.video {
  height: 20vh;
  }*/

  .embed-responsive-16by9 {
    padding-bottom: 30%!important;
  }

  .syncPlayTest {
    background-color: lightgreen;
    cursor: pointer;
  }

  /*Dragula style*/

  .gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

/*Scrollbar*/

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

JavaScript

$('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })

  $(function () {
    $('[data-toggle="popover"]').popover()
  })
  
  //
   var video =   document.getElementById("videoId");

    var playing = false;

    document.getElementById("playSyncExample").addEventListener("click", function(){
      video.currentTime = 30;
      console.log("click")
      if(playing){
        console.log("stop")
        video.pause();
        playing = false;
      }else{
        console.log("play")
        video.play()
        playing = true;
      }

    });
  //
  
   var transcriptSection = document.getElementById("transcriptSection");
    var papereditSection = document.getElementById("papereditSection");

    function hideTranscripts(bol){
      if(bol){
        transcriptSection.className = "hidden-xs hidden-sm hidden-md hidden-lg";
        papereditSection.className="col-xs-11 col-sm-11 col-md-11 col-lg-11 col-xs-offset-1"
      }else{
        transcriptSection.className = "col-xs-7 col-sm-7 col-md-7 col-lg-7";
        papereditSection.className="col-xs-5 col-sm-5 col-md-5 col-lg-5"
      }
    }

    function flipPage(){
      if(window.orientation === 0){
        // alert("portrait");
        hideTranscripts(true);
      }else {
        // alert("landscape");
        hideTranscripts(false);
      }
    }
    // on page load
    window.onload = function(e) {
      // alert("window loaded");
      flipPage();
    };
    //when moving is triggered
    window.addEventListener("orientationchange", function() {
      // Announce the new orientation number
      flipPage();

    }, false);
    
    ///
    
    var left = document.getElementById("sampleTranscript");
var right =  document.getElementById("samplePaperedit");

dragula([left,right], {

  //  // Besides the containers that you pass to dragula, or the containers you dynamically push or unshift from drake.containers, you can also use this method to specify any sort of logic that...