Изменить 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

Cheers, Arnaldo.

источник

2015-06-27 arnaldo

Вы можете достичь этого, проверив события mousemove на слайдах. Это поможет отслеживать, где мышь была последней, когда была нажата кнопка «z». Затем вам также потребуется обновить определенные привязки клавиш, так что всякий раз, когда вы нажимаете «z» (событие keyDown вызовет вызов функции onDocumentKeyDown в reveal.js), веб-страница увеличивает масштаб элемента.

Пока я тестировал нижеследующее и нашел, что он работает, я должен добавить, что я не являюсь частым 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).

Наконец, добавьте к onDocumentKeyDown функции reveal.js «с, в разделе, который читает // 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 по умолчанию), вы увеличите позицию, связанную с элементом под курсором, который может быть немного удален от того, где вы на самом деле этого хотите, особенно если этот элемент принимает некоторое экранное пространство.

Имейте в виду, что этот метод не поддается хорошо API Reveal.js о changing the keyboard bindings, из-за асинхронного вызова его zoom.js зависимость (функция initiateZoom должна быть определена до того вы звоните Reveal.configure()). Тем не менее, вы можете обойти его, используя Reveal.isReady(). Это необходимо только, если вы хотите использовать API для перенастройки привязок горячих клавиш, а не для редактирования источника, как в примере выше.

источник

2015-12-06 02:50:05

Изменить reveal.js увеличить ярлык

ответ

Смежные вопросы