變化reveal.js放大快捷

目前滑蓋內部。ZOMM快捷鍵爲ALT +單擊變化reveal.js放大快捷

// Custom reveal.js integration 
(function(){ 
var isEnabled = true; 

document.querySelector('.reveal .slides').addEventListener('mousedown', function(event) { 
    var modifier = (Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt') + 'Key'; 

    var zoomPadding = 20; 
    var revealScale = Reveal.getScale(); 

    if(event[ modifier ] && isEnabled) { 
     event.preventDefault(); 

     var bounds = event.target.getBoundingClientRect(); 

     zoom.to({ 
      x: (bounds.left * revealScale) - zoomPadding, 
      y: (bounds.top * revealScale) - zoomPadding, 
      width: (bounds.width * revealScale) + (zoomPadding * 2), 
      height: (bounds.height * revealScale) + (zoomPadding * 2), 
      pan: false 
     }); 
    } 
});

我應該如何改變這種Alt +鼠標點擊只需按「Z」鍵？主要文件是：https://github.com/hakimel/reveal.js/blob/master/plugin/zoom-js/zoom.js

乾杯，阿納爾多。

來源

2015-06-27 arnaldo

您可以通過檢查幻燈片的mousemove事件來實現此目的。當按下「z」時，這將用於跟蹤鼠標的最後位置。然後，您還需要更新已定義的鍵綁定，例如，只要按下「z」（keyDown事件將觸發在reveal.js中調用onDocumentKeyDown函數），網頁就會放大該元素。

雖然我已經測試了下面，發現它工作，我應該補充說我不是一個常用的JavaScript編碼器。我正在使用全局變量，這在很多腳本和編程語言中是普遍的共識，這是一件壞事。

在zoom.js附加：

var bbox_elm_below_mouse; // keeps track of the mouselocation 

(function(){ 
document.querySelector('.reveal .slides').addEventListener('mousemove', function(event){ 
    bbox_elm_below_mouse = event.target; 
    }) 
})(); // Update the global var any time the mouse moves. 

function initiateZoom(){ 
    // based on the function on the function at the top in reveal.js's modification to zoom.js 
    var isEnabled = true; 
    var zoomPadding = 20; 
    var revealScale = Reveal.getScale(); 

    if(isEnabled) { 
     var bounds = bbox_elm_below_mouse.getBoundingClientRect(); 
     zoom.to({ 
      x: (bounds.left * revealScale) - zoomPadding, 
      y: (bounds.top * revealScale) - zoomPadding, 
      width: (bounds.width * revealScale) + (zoomPadding * 2), 
      height: (bounds.height * revealScale) + (zoomPadding * 2), 
      pan: false 
     }); 
    } 

    Reveal.addEventListener('overviewshown', function() { isEnabled = false; }); 
    Reveal.addEventListener('overviewhidden', function() { isEnabled = true; }); 
};

你需要跟蹤的鼠標事件和鍵盤事件的原因是，當一個鍵盤事件觸發，該事件已經沒有辦法知道哪裏是老鼠的（作爲discussed in this forum）。

最後，增加的reveal.jsonDocumentKeyDown功能，讀取// 2. System defined key bindings以下行部分：然後

// letter "z" 
case 90: initiateZoom(); break;

的switch聲明將是這樣的：

 switch(event.keyCode) { 
      // p, page up 
      case 80: case 33: navigatePrev(); break; 
      // n, page down 
      case 78: case 34: navigateNext(); break; 
      // h, left 
      case 72: case 37: navigateLeft(); break; 
      // l, right 
      case 76: case 39: navigateRight(); break; 
      // k, up 
      case 75: case 38: navigateUp(); break; 
      // j, down 
      case 74: case 40: navigateDown(); break; 
      // home 
      case 36: slide(0); break; 
      // end 
      case 35: slide(Number.MAX_VALUE); break; 
      // space 
      case 32: isOverview() ? deactivateOverview() : event.shiftKey ? navigatePrev() : navigateNext(); break; 
      // return 
      case 13: isOverview() ? deactivateOverview() : triggered = false; break; 
      // two-spot, semicolon, b, period, Logitech presenter tools "black screen" button 
      case 58: case 59: case 66: case 190: case 191: togglePause(); break; 
      // f 
      case 70: enterFullscreen(); break; 
      // a 
      case 65: if (config.autoSlideStoppable) toggleAutoSlide(autoSlideWasPaused); break; 
      // letter "z" 
      case 90: initiateZoom(); break; 
      default: 
       triggered = false; 
     }

現在重新加載你演示文稿並在鼠標懸停在要放大的元素上時按「z」。

我可能會將呼叫更改爲zoom.to，以使瀏覽器放大光標所在的點。現在（即使在Reveal.js的默認配置中），您將放大與光標下的元素相關的位置，這可能與您實際需要的位置有點偏離，特別是如果該元素需要一些屏幕空間。

注意，這種方法並不太適合於changing the keyboard bindings Reveal.js的API，因爲異步調用其zoom.js依賴（功能initiateZoom必須定義你叫Reveal.configure()之前）。但是，您可以通過使用Reveal.isReady()來避開它。這只是必要的，但如果你想使用API來重新配置熱鍵綁定，而不是像我在上面的例子中那樣編輯源代碼。

來源

2015-12-06 02:50:05

變化reveal.js放大快捷

回答

相關問題