display media list editorjs
authorveltr
Wed, 24 Oct 2012 17:44:18 +0200
brancheditorjs
changeset 13 42c59d09670e
parent 12 8a8b6097d382
child 14 2754a76e2787
display media list
integration/css/edition.css
integration/edition.html
integration/js/editor.js
integration/js/medialist-serializer.js
--- a/integration/css/edition.css	Wed Oct 24 15:58:27 2012 +0200
+++ b/integration/css/edition.css	Wed Oct 24 17:44:18 2012 +0200
@@ -1,12 +1,12 @@
 /* bloc */
 div.bloc-pvw{
-	
+    display: none;
 }
 div.bloc-segmentation{
 	display: none;
 }
 div.bloc-vide{
-	display: none;
+	display: block;
 }
 /* header - title-video-wrap */
 div.header div.title-video-wrap{
@@ -39,6 +39,7 @@
 }
 /* popin - update-title */
 div.update-title.popin{
+    display: none;
 	top: 34px;
 	left: 150px;
 }
@@ -75,7 +76,7 @@
 }
 /* col-middle */
 div.col-middle{
-	width: 460px;
+	width: 460px; min-height: 1px;
 }
 div.col-middle-header{
 	height: 35px;
@@ -511,12 +512,12 @@
 	display: block;
 	margin-bottom: 1px;
 }
-ul.list-video li a span.video-info span.time-lenght{
+ul.list-video li a span.video-info span.time-length{
 	font-size: 12px;
 	font-weight: 600;
 	display: block;
 }
-ul.list-video li a span.video-info span.time-lenght span{
+ul.list-video li a span.video-info span.time-length span{
 	color: #de2500;
 }
 ul.list-video li a span.number{
--- a/integration/edition.html	Wed Oct 24 15:58:27 2012 +0200
+++ b/integration/edition.html	Wed Oct 24 17:44:18 2012 +0200
@@ -1,8 +1,5 @@
 <!DOCTYPE html>
-<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<html>
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -10,13 +7,12 @@
         <link rel="stylesheet" href="css/reset.css" />
         <link rel="stylesheet" href="css/common.css" />
         <link rel="stylesheet" href="css/edition.css" />
-        <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css">
-        <script src="js/vendor/modernizr-2.6.1.min.js"></script>
+        <link rel="stylesheet" href="lib/jquery-ui.css">
     </head>
     <body>
         <div class="wrap">
             <div class="wrap-header">
-                <a title="Bibliothèque centre Pompidou" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
+                <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
             </div>
             <div class="header">
                 <!-- popin header -->
@@ -128,39 +124,7 @@
                         </p>
                     </form>
                     <ul class="list-video">
-                        <li class="item-video">
-                            <a class="clearfix" href="#">
-                                <span class="number">12</span>
-                                <img src="img/apercu-video.jpg" alt="aperçu" />
-                                <span class="video-info">
-                                    <span class="title-video">Le a Lune</span>
-                                    <span class="author">Par : Mozilla Foundation</span>
-                                    <span class="time-lenght">Durée : <span>12:33</span></span>
-                                </span>
-                            </a>
-                        </li><!-- item-video -->
-                        <li class="item-video">
-                            <a class="clearfix active" href="#">
-                                <span class="number">12</span>
-                                <img src="img/apercu-video.jpg" alt="aperçu" />
-                                <span class="video-info">
-                                    <span class="title-video">Le a Lune</span>
-                                    <span class="author">Par : Mozilla Foundation</span>
-                                    <span class="time-lenght">Durée : <span>12:33</span></span>
-                                </span>
-                            </a>
-                        </li><!-- item-video -->
-                        <li class="item-video">
-                            <a class="clearfix" href="#">
-                                <span class="number">12</span>
-                                <img src="img/apercu-video.jpg" alt="aperçu" />
-                                <span class="video-info">
-                                    <span class="title-video">Le a Lune</span>
-                                    <span class="author">Par : Mozilla Foundation</span>
-                                    <span class="time-lenght">Durée : <span>12:33</span></span>
-                                </span>
-                            </a>
-                        </li><!-- item-video -->
+
                     </ul>
                 </div><!-- col-left -->
 
@@ -401,9 +365,15 @@
             </div><!-- footer -->
         </div><!-- wrap -->
         <!-- JavaScript -->
-        <script src="js/vendor/jquery-1.8.0.min.js"></script>
-        <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
-        <script src="js/plugins.js"></script>
-        <script src="js/main.js"></script>
+        <script type="text/javascript" src="lib/jquery.min.js"></script>
+        <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
+        <script type="text/javascript" src="lib/mustache.js"></script>
+        <script type="text/javascript" src="lib/underscore-min.js"></script>
+        <script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
+        <script type="text/javascript" src="lib/raphael-min.js"></script>
+        <script type="text/javascript" src="js/init.js"></script>
+        <script type="text/javascript" src="js/medialist-serializer.js"></script>
+        <script type="text/javascript" src="js/model.js"></script>
+        <script type="text/javascript" src="js/editor.js"></script>
     </body>
 </html>
--- a/integration/js/editor.js	Wed Oct 24 15:58:27 2012 +0200
+++ b/integration/js/editor.js	Wed Oct 24 17:44:18 2012 +0200
@@ -1,3 +1,50 @@
-$(function() {
+(function() {
+    var Hashcut = function() {
+        var directory = new IriSP.Model.Directory(),
+            project = directory.remoteSource({
+                url: "data/bpidata.json",
+                serializer: IriSP.serializers.medialist
+            }),
+            mediatemplate = '<li class="item-video"><a class="clearfix" href="#"><img src="{{thumbnail}}" alt="aperçu" />'
+                + '<span class="video-info"><span class="title-video">{{title}}</span><span class="author">{{description}}</span>'
+                + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></a></li>';
+        project.onLoad(function() {
+            var html = '';
+            project.getMedias().forEach(function(_m) {
+                html += Mustache.to_html(mediatemplate, _m);
+            });
+            $(".col-left .list-video").html(html);
+        });
+        
+        $(".col-left input").bind("keyup change input paste", function() {
+            var val = $(this).val();
+            if (val) {
+                var find = IriSP.Model.regexpFromTextOrArray(val, true),
+                    replace = IriSP.Model.regexpFromTextOrArray(val, false);
+            }
+            $(".col-left .item-video").each(function() {
+                var li = $(this),
+                    title = $(this).find(".title-video"),
+                    titletext = title.text();
+                if (val && find.test(titletext)) {
+                    title.html(titletext.replace(replace, '<span style="background: yellow;">$1</span>'));
+                    li.show();
+                } else {
+                    title.text(titletext);
+                    if (val) {
+                        li.hide();
+                    } else {
+                        li.show();
+                    }
+                }
+            })
+        });
+    }
     
+    IriSP.Hashcut = Hashcut;
+}
+)();
+
+$(function() {
+    var hashcut = new IriSP.Hashcut();
 });
--- a/integration/js/medialist-serializer.js	Wed Oct 24 15:58:27 2012 +0200
+++ b/integration/js/medialist-serializer.js	Wed Oct 24 17:44:18 2012 +0200
@@ -4,7 +4,6 @@
     },
     deSerialize : function(_data, _source) {
         var _medialist = new IriSP.Model.List(_source.directory);
-        console.log(_medialist);
         IriSP._(_data).each(function(_m) {
             var _media = new IriSP.Model.Media(_m.id, _source);
             _media.video = _m.video;
@@ -13,7 +12,6 @@
             _media.setDuration(_m.duration);
             _media.thumbnail = _m.thumbnail;
             _medialist.push(_media);
-            console.log(_medialist);
         });
         _source.addList("media", _medialist);
     }