From f7982f23094edd1051347d1dd2303b108e5816b0 Mon Sep 17 00:00:00 2001 From: Antoine <2ec0b4@users.noreply.github.com> Date: Thu, 23 Jun 2016 21:55:40 +0200 Subject: [PATCH] Partage de sons (#4) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Permet la lecture d'un son passé en paramètre d'URL * Remplace du code créé par l'utilisation d'un template * Ajoute un bouton de partage * Ajoute une région pour gérer une modal * Affiche une modal de partage * Améliore le style du flash de sélection de son * Corrige un mauvais appel de fonction * Supprime la destruction de la vue au scroll de la fenêtre : le comportement n'est pas idéal sur iOS quand il y a le focus sur l'input * Ne joue pas automatiquement le son partagé sur iOS (après avoir tenté : https://paulbakaus.com/tutorials/html5/web-audio-on-ios/ ) * Permet d'éviter le zoom au focus sur l'input * Ajoute, dans le style, des préfixes manquants --- css/style.css | 146 +++++++++++++++++++++++++++++++ img/share.svg | 1 + index.html | 4 +- js/app/app.js | 11 ++- js/app/controllers/soundboard.js | 4 +- js/app/models/sound.js | 10 +++ js/app/templates/share.hbs | 12 +++ js/app/templates/sound.hbs | 5 +- js/app/templates/soundDetail.hbs | 3 + js/app/views/share.js | 74 ++++++++++++++++ js/app/views/sound.js | 54 ++++++++---- js/app/views/soundboard.js | 7 +- js/app/views/sounds.js | 24 ++++- 13 files changed, 330 insertions(+), 25 deletions(-) create mode 100644 img/share.svg create mode 100644 js/app/templates/share.hbs create mode 100644 js/app/templates/soundDetail.hbs create mode 100644 js/app/views/share.js diff --git a/css/style.css b/css/style.css index 6d0018a..a63e15f 100644 --- a/css/style.css +++ b/css/style.css @@ -176,6 +176,88 @@ footer .likely { * ANIMATIONS * ----------------------------------------------------------------------------- */ +@-webkit-keyframes flash { + 0% { + background-color: none; + border-color: none; + } + 50% { + background-color: #fbf8b2; + border-color: #fbf8b2; + } + 100% { + background-color: none; + border-color: none; + } +} +@-moz-keyframes flash { + 0% { + background-color: none; + border-color: none; + } + 50% { + background-color: #fbf8b2; + border-color: #fbf8b2; + } + 100% { + background-color: none; + border-color: none; + } +} +@-ms-keyframes flash { + 0% { + background-color: none; + border-color: none; + } + 50% { + background-color: #fbf8b2; + border-color: #fbf8b2; + } + 100% { + background-color: none; + border-color: none; + } +} +@-o-keyframes flash { + 0% { + background-color: none; + border-color: none; + } + 50% { + background-color: #fbf8b2; + border-color: #fbf8b2; + } + 100% { + background-color: none; + border-color: none; + } +} +@keyframes flash { + 0% { + background-color: none; + border-color: none; + } + 50% { + background-color: #fbf8b2; + border-color: #fbf8b2; + } + 100% { + background-color: none; + border-color: none; + } +} +.flash { + -moz-animation: flash 1s ease-out; + -moz-animation-iteration-count: 1; + -webkit-animation: flash 1s ease-out; + -webkit-animation-iteration-count: 1; + -ms-animation: flash 1s ease-out; + -ms-animation-iteration-count: 1; + -o-animation: flash 1s ease-out; + -o-animation-iteration-count: 1; + animation: flash 1s ease-out; + animation-iteration-count: 1; +} @-webkit-keyframes uil-ring-anim { 0% { -ms-transform: rotate(0deg); @@ -412,6 +494,7 @@ input[type="text"] { font-size: 14px; height: 34px; line-height: 1.42857; + outline: none; padding: 6px 12px; } .btn, .btn:hover, .btn:focus, @@ -455,6 +538,24 @@ a.btn-play:before { a.btn-play.playing:before { background: url('../img/stop.svg') no-repeat center center; } +.btn-share, .btn-share:hover, .btn-share:focus, +a.btn-share, a.btn-share:hover, a.btn-share:focus { + background: #18AE90; + border-bottom: 3px solid #017F66; + padding: 5px; + position: absolute; + top: 0; +} +a.btn-share:before { + content: ""; + background: url('../img/share.svg') no-repeat center center; + font-size: 1em; + height: 43px; + left: 12px; + position: absolute; + top: 7px; + width: 43px; +} .btn:active, a.btn:active { top:3px; @@ -495,6 +596,18 @@ noscript p { -webkit-transform: scale(0.4); transform: scale(0.4); } +#modal-back { + background: #333333; + bottom: 0; + height: 100%; + left: 0; + opacity: 0.5; + position: fixed; + right: 0; + top: 0; + width: 100%; + z-index: 10000; +} #filter { text-align: center; } @@ -524,10 +637,37 @@ noscript p { position: relative; } #list ul li a { + height: 43px; + width: 43px; +} +#list ul li > a { + right: 0; +} +#list ul li div { + margin-right: 45px; +} +#list ul li div a { overflow: hidden; text-overflow: ellipsis; width: 100%; } +.share-link { + background-color: #FFFFFF; + border: 1px solid #999; + box-shadow: 0 0 8px rgba(0,0,0,0.2); + color: #333; + margin: 0 auto; + padding: 10px; + position: absolute; + text-align: center; + z-index: 10001; +} +.share-link input[type="text"] { + width: 100%; +} +.share-link .likely { + margin-top: 5px; +} /** * MEDIA QUERIES * ----------------------------------------------------------------------------- @@ -538,6 +678,9 @@ noscript p { margin-left: 1%; margin-right: 1%; } + .share-link { + width : 400px; + } } @media only screen and (min-width:1024px){ #list ul li { @@ -574,6 +717,9 @@ noscript p { margin-left: 2%; margin-right: 2%; } + .share-link { + width : 90%; + } } @media only screen and (max-width:430px){ header h1 { diff --git a/img/share.svg b/img/share.svg new file mode 100644 index 0000000..fc6f0f5 --- /dev/null +++ b/img/share.svg @@ -0,0 +1 @@ + diff --git a/index.html b/index.html index 2fdc202..ef0ea7e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + Kaamelott Soundboard @@ -72,6 +72,8 @@ + + diff --git a/js/app/app.js b/js/app/app.js index 8a41904..eb80a86 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -12,10 +12,12 @@ define("app", function(require) { app = Marionette.Application.extend({ initialize: function intialize() { this.addRegions({ - mainRegion: "#main" + mainRegion: "#main", + modalRegion: "#modal" }); Radio.channel("App").reply("region:show", this.showRegion.bind(this)); + Radio.channel("App").reply("modal:show", this.showModal.bind(this)); this.router = new Marionette.AppRouter(); @@ -26,7 +28,8 @@ define("app", function(require) { var soundboardController = new SoundboardController(); this.router.processAppRoutes(soundboardController, { - "": "index" + "": "index", + "son/:slug": "index" }); if (Backbone.history) { @@ -39,6 +42,10 @@ define("app", function(require) { showRegion: function showRegion(params) { this.mainRegion.show(params.view); + }, + + showModal: function showModal(params) { + this.modalRegion.show(params.view); } }); diff --git a/js/app/controllers/soundboard.js b/js/app/controllers/soundboard.js index 89bee71..1d81d0c 100644 --- a/js/app/controllers/soundboard.js +++ b/js/app/controllers/soundboard.js @@ -11,8 +11,8 @@ define("controllers/soundboard", function(require) { initialize: function() { var soundsRadio = new SoundsRadio(); }, - index: function() { - var view = new SoundboardView(); + index: function(slug) { + var view = new SoundboardView({slug: slug}); Radio.channel("App").request("region:show", { view: view }); } diff --git a/js/app/models/sound.js b/js/app/models/sound.js index e30f523..eb3db45 100644 --- a/js/app/models/sound.js +++ b/js/app/models/sound.js @@ -34,6 +34,16 @@ define("models/sound", function(require) { }, getSoundDetail: function() { return this.get("character")+", "+this.get("episode"); + }, + getSlug: function() { + return this.get("file").slice(0, this.get("file").lastIndexOf('.')); + }, + toJSON: function(){ + var json = Backbone.Model.prototype.toJSON.apply(this, arguments); + + json.slug = this.getSlug(); + + return json; } }); diff --git a/js/app/templates/share.hbs b/js/app/templates/share.hbs new file mode 100644 index 0000000..a74b1aa --- /dev/null +++ b/js/app/templates/share.hbs @@ -0,0 +1,12 @@ +
+
+ + +
+ +
+ + +
+1
+
+
diff --git a/js/app/templates/sound.hbs b/js/app/templates/sound.hbs index 29c602f..448d5e8 100644 --- a/js/app/templates/sound.hbs +++ b/js/app/templates/sound.hbs @@ -1 +1,4 @@ -{{title}} +
+ {{title}} +
+ diff --git a/js/app/templates/soundDetail.hbs b/js/app/templates/soundDetail.hbs new file mode 100644 index 0000000..024cf1e --- /dev/null +++ b/js/app/templates/soundDetail.hbs @@ -0,0 +1,3 @@ +
+

{{detail}}

+
diff --git a/js/app/views/share.js b/js/app/views/share.js new file mode 100644 index 0000000..9bbe596 --- /dev/null +++ b/js/app/views/share.js @@ -0,0 +1,74 @@ +define("views/share", function(require) { + "use strict"; + + var Marionette = require("marionette"), + ShareTemplate = require("hbs!templates/share"), + ShareView; + + require("likely"); + + ShareView = Marionette.LayoutView.extend({ + template: ShareTemplate, + templateHelpers: function () { + return { + title: this.model.get("title"), + url: this.getAbsoluteUrl("#son/"+this.model.getSlug()) + }; + }, + ui: { + background: "#modal-back", + body: ".share-link", + field: "input:text" + }, + events: { + "click @ui.background": "destroy" + }, + initialize: function(options) { + this.model = options.model; + + $(window).on("resize", this.center.bind(this)); + }, + onDestroy: function() { + $(this.ui.background).remove(); + + $(window).off("resize", this.center.bind(this)); + }, + onBeforeShow: function() { + this.$el.append($("
").attr("id", "modal-back")); + }, + onShow: function() { + var that = this; + + likely.initiate(); + + this.center(); + + window.setTimeout(function() { + that.$el + .find(that.ui.field) + .focus(function() { + $(this).select(); + }) + .focus(); + }, 1000); + }, + center: function() { + var $body = this.$el.find(this.ui.body); + + $body.css({ + "top": Math.max(0, (($(window).height() - $body.outerHeight()) / 2) + $(window).scrollTop()) + "px", + "left": Math.max(0, (($(window).width() - $body.outerWidth()) / 2) + $(window).scrollLeft()) + "px" + }); + }, + getAbsoluteUrl: function(url) { + var a = document.createElement('a'); + this.getAbsoluteUrl = function(url) { + a.href=url; + return a.href; + } + return this.getAbsoluteUrl(url); + } + }); + + return ShareView; +}); diff --git a/js/app/views/sound.js b/js/app/views/sound.js index 9f722da..0a01370 100644 --- a/js/app/views/sound.js +++ b/js/app/views/sound.js @@ -1,9 +1,10 @@ define("views/sound", function(require) { "use strict"; - var Marionette = require("marionette"), - SoundModel = require("models/sound"), - SoundTemplate = require("hbs!templates/sound"), + var Marionette = require("marionette"), + SoundModel = require("models/sound"), + SoundTemplate = require("hbs!templates/sound"), + SoundDetailTemplate = require("hbs!templates/soundDetail"), SoundView; SoundView = Marionette.ItemView.extend({ @@ -11,16 +12,39 @@ define("views/sound", function(require) { model: SoundModel, tagName: "li", ui: { - soundItem: "a" + btn: ".btn", + btnPlay: ".btn-play", + btnShare: ".btn-share" }, events: { - "click @ui.soundItem": "toggleSound", - "mouseenter @ui.soundItem": "toggleSoundDetail", - "mouseleave @ui.soundItem": "toggleSoundDetail" + "mouseenter @ui.btnPlay": "toggleSoundDetail", + "mouseleave @ui.btnPlay": "toggleSoundDetail", + "click @ui.btnPlay": "toggleSound" + }, + triggers: { + "click @ui.btnShare": { + event: "sound:share", + preventDefault: true + }, }, initialize: function() { this.listenTo(this.model, "change:playing", this.playingAttributeChanged); }, + onShow: function() { + var that = this, + height; + + if( this.model.get('selected') ) { + height = $('header').outerHeight(); + $('html, body').animate({scrollTop: this.$el.offset().top-height}, 750, 'swing', function() { + that.$el.find(that.ui.btn).addClass('flash'); + }); + + if( !/iPhone|iPad|iPod/i.test(navigator.userAgent) ) { + this.$el.find(this.ui.btnPlay).click(); + } + } + }, toggleSound: function(e) { e.preventDefault(); @@ -36,26 +60,24 @@ define("views/sound", function(require) { }, playingAttributeChanged: function() { if( this.model.get("playing") ) { - $(this.ui.soundItem).addClass("playing"); + $(this.ui.btnPlay).addClass("playing"); } else { - $(this.ui.soundItem).removeClass("playing"); + $(this.ui.btnPlay).removeClass("playing"); } }, toggleSoundDetail: function(e) { - var offset; + var offset, + template; if (e.type === "mouseleave") { $(".tooltip").remove(); return; } - offset = $(this.el).offset(); + offset = $(this.el).offset(); + template = SoundDetailTemplate({detail: this.model.getSoundDetail()}); - $("
") - .addClass("tooltip") - .append( - $("

").text(this.model.getSoundDetail()) - ) + $(template) .css({left: (offset.left+25)+"px", top: (offset.top+30)+"px"}) .appendTo("body") .delay(1000) diff --git a/js/app/views/soundboard.js b/js/app/views/soundboard.js index 7977cd7..97bd4bc 100644 --- a/js/app/views/soundboard.js +++ b/js/app/views/soundboard.js @@ -13,9 +13,14 @@ define("views/soundboard", function(require) { regFilter: "#filter", regList: "#list" }, + initialize: function(options) { + this.slug = typeof options.slug !== 'undefined' ? options.slug : ''; + }, onShow: function() { this.showChildView("regFilter", new SoundsFilterView()); - this.showChildView("regList", new SoundsView()); + this.showChildView("regList", new SoundsView({ + slug: this.slug + })); } }); diff --git a/js/app/views/sounds.js b/js/app/views/sounds.js index 704331a..24ba610 100644 --- a/js/app/views/sounds.js +++ b/js/app/views/sounds.js @@ -5,6 +5,7 @@ define("views/sounds", function(require) { Radio = require("backbone.radio"), SoundsCollection = require("collections/sounds"), SoundView = require("views/sound"), + SoundShareView = require("views/share"), SoundsCollectionView; SoundsCollectionView = Marionette.CollectionView.extend({ @@ -12,11 +13,14 @@ define("views/sounds", function(require) { collection: new SoundsCollection(), tagName: "ul", childEvents: { - "sound:play": "stopPlayingSound" + "sound:play": "stopPlayingSound", + "sound:share": "shareSoundLink" }, - initialize: function() { + initialize: function(options) { var that = this; + this.slug = typeof options.slug !== 'undefined' ? options.slug : ''; + this.data = { collection: this.collection }; @@ -25,6 +29,17 @@ define("views/sounds", function(require) { this.channel.request("getSounds").then(this.initCollection.bind(this)); this.channel.on("sounds:filter", this.filterCollection.bind(this)); }, + onBeforeRender: function() { + var sound; + + if( this.slug ) { + sound = this.collection.findWhere({file: this.slug+".mp3"}); + + if( sound ) { + sound.set('selected', true); + } + } + }, initCollection: function(sounds) { this.data.collection = new SoundsCollection(sounds); this.collection = this.data.collection; @@ -42,6 +57,11 @@ define("views/sounds", function(require) { if( playingSound ) { playingSound.stop(); } + }, + shareSoundLink: function(args) { + var view = new SoundShareView({model: args.model}); + + Radio.channel("App").request("modal:show", { view: view }); } });