-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #24 from esmero/ISSUE-23
ISSUE-23: New Panorama Builder Webform Element and Other Webform related improvements. Each commit adds its little tiny details. All for beta2
- Loading branch information
Showing
15 changed files
with
2,115 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| .hotspot_marker_wrapper { | ||
| background-color: deepskyblue; | ||
| border-radius: 50%; | ||
| position: absolute; | ||
| top: 0px; | ||
| left: 0px; | ||
| display: none; | ||
| opacity: 0; | ||
| -moz-transition: opacity .3s ease-in-out; | ||
| -webkit-transition: opacity .3s ease-in-out; | ||
| -o-transition: opacity .3s ease-in-out; | ||
| -ms-transition: opacity .3s ease-in-out; | ||
| transition: opacity .3s ease-in-out; | ||
| z-index: 1 | ||
| } | ||
| .hotspot_editor_marker { | ||
| border-radius: 50%; | ||
| background-color: deepskyblue; | ||
| width: 150px; | ||
| height: 150px; | ||
| position: absolute; | ||
| left:-75px; | ||
| top:-75px; | ||
| opacity: 0; | ||
| animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32); | ||
| } | ||
| @keyframes scaleIn { | ||
| from { | ||
| transform: scale(.5, .5); | ||
| opacity: .5; | ||
| } | ||
| to { | ||
| transform: scale(2.5, 2.5); | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| (function ($, Drupal, drupalSettings, pannellum) { | ||
|
|
||
|
|
||
|
|
||
| function marker(event, $marker, $container) { | ||
| var pos = mousePosition(event,$container); | ||
| $marker.css("left", pos.x + 'px'); | ||
| $marker.css("top", pos.y + 'px'); | ||
| $marker.css("opacity", '1.0'); | ||
| $marker.css("display", 'block'); | ||
| $marker.fadeIn('slow'); | ||
| $marker.fadeOut('slow'); | ||
| } | ||
|
|
||
|
|
||
| function mousePosition(event,$container) { | ||
| var bounds = $container.getBoundingClientRect(); | ||
| var pos = {}; | ||
| // pageX / pageY needed for iOS | ||
| pos.x = (event.clientX || event.pageX) - bounds.left; | ||
| pos.y = (event.clientY || event.pageY) - bounds.top; | ||
| return pos; | ||
| } | ||
|
|
||
| Drupal.AjaxCommands.prototype.webform_strawberryfield_pannellum_editor_addHotSpot = function(ajax, response, status) { | ||
| console.log('adding hotspot'); | ||
| // we need to find the first '.strawberry-panorama-item' id that is child of data-drupal-selector="edit-panorama-tour-hotspots" | ||
| console.log(response.selector); | ||
| $targetScene = $(response.selector).find('.strawberry-panorama-item').attr("id"); | ||
| console.log($targetScene); | ||
| if (response.hasOwnProperty('hotspot')) { | ||
| $scene = Drupal.FormatStrawberryfieldPanoramas.panoramas.get($targetScene); | ||
| // add click handlers for new Hotspots if they have an URL. | ||
| // Empty URLs are handled by Drupal.FormatStrawberryfieldhotspotPopUp() | ||
| console.log(response); | ||
| if (response.hotspot.hasOwnProperty('URL')) { | ||
| response.hotspot.clickHandlerFunc = Drupal.FormatStrawberryfieldhotspotPopUp; | ||
| response.hotspot.clickHandlerArgs = response.hotspot.URL; | ||
| } | ||
|
|
||
| $scene.panorama.addHotSpot(response.hotspot); | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| Drupal.behaviors.webform_strawberryfield_pannellum_editor = { | ||
| attach: function(context, settings) { | ||
| $('.strawberry-panorama-item[data-iiif-image]').once('attache_pne') | ||
| .each(function (index, value) { | ||
| var hotspots = []; | ||
| // Get the node uuid for this element | ||
| var element_id = $(this).attr("id"); | ||
| console.log('Checking for loaded Panoramatour builder Hotspots'); | ||
| console.log(drupalSettings.webform_strawberryfield.WebformPanoramaTour); | ||
| // Feed with existing Hotspots comming from the Webform Element data. | ||
| for (var parentselector in drupalSettings.webform_strawberryfield.WebformPanoramaTour) { | ||
| if (Object.prototype.hasOwnProperty.call(drupalSettings.webform_strawberryfield.WebformPanoramaTour, parentselector)) { | ||
| $targetScene = $("[data-webform_strawberryfield-selector='" + parentselector + "']").find('.strawberry-panorama-item').attr("id"); | ||
| console.log(parentselector); | ||
| console.log($targetScene); | ||
| $scene = Drupal.FormatStrawberryfieldPanoramas.panoramas.get($targetScene); | ||
| if ((typeof $scene !== 'undefined')) { | ||
| if (drupalSettings.webform_strawberryfield.WebformPanoramaTour[parentselector]!== null | ||
| && typeof drupalSettings.webform_strawberryfield.WebformPanoramaTour[parentselector][Symbol.iterator] === 'function' | ||
| ) { | ||
| drupalSettings.webform_strawberryfield.WebformPanoramaTour[parentselector].forEach(function (hotspotdata, key) { | ||
| console.log(hotspotdata); | ||
| if (hotspotdata.hasOwnProperty('URL')) { | ||
| hotspotdata.clickHandlerFunc = Drupal.FormatStrawberryfieldhotspotPopUp; | ||
| hotspotdata.clickHandlerArgs = hotspotdata.URL; | ||
| } | ||
| $scene.panorama.addHotSpot(hotspotdata); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Check if we got some data passed via Drupal settings. | ||
| if (typeof(drupalSettings.format_strawberryfield.pannellum[element_id]) != 'undefined') { | ||
| console.log('initializing Panellum Panorama Builder') | ||
| console.log(Drupal.FormatStrawberryfieldPanoramas.panoramas); | ||
| Drupal.FormatStrawberryfieldPanoramas.panoramas.forEach(function(item, key) { | ||
|
|
||
| var element_id_marker = element_id + '_marker'; | ||
| var $newmarker = $( "<div class='hotspot_marker_wrapper'><div class='hotspot_editor_marker' id='" + element_id_marker +"'></div></div>"); | ||
|
|
||
| $("#" +element_id+ " .pnlm-ui").append( $newmarker ); | ||
|
|
||
| item.panorama.on('mousedown', function clicker(e) { | ||
|
|
||
| $hotspot_cors = item.panorama.mouseEventToCoords(e); | ||
| console.log(item.panorama.getHfov()); | ||
| var $jquerycontainer = $(item.panorama.getContainer()); | ||
|
|
||
| $button_container = $jquerycontainer.closest("[data-drupal-selector='edit-panorama-tour-hotspots-temp']"); | ||
|
|
||
| $button_container.find("[ data-drupal-hotspot-property='yaw']").val($hotspot_cors[1]); | ||
| $button_container.find("[ data-drupal-hotspot-property='pitch']").val($hotspot_cors[0]); | ||
| $button_container.find("[ data-drupal-hotspot-property='hfov']").val(item.panorama.getHfov()); | ||
|
|
||
| marker(e,$newmarker,item.panorama.getContainer()); | ||
|
|
||
| } | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| })}} | ||
|
|
||
| })(jQuery, Drupal, drupalSettings, window.pannellum); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <?php | ||
| /** | ||
| * Created by PhpStorm. | ||
| * User: dpino | ||
| * Date: 10/1/19 | ||
| * Time: 11:30 AM | ||
| */ | ||
|
|
||
| namespace Drupal\webform_strawberryfield\Ajax; | ||
| use Drupal\Core\Ajax\CommandInterface; | ||
| class AddHotSpotCommand implements CommandInterface | ||
| { | ||
|
|
||
| /** | ||
| * The Hotspot | ||
| * | ||
| * @var \stdClass; | ||
| */ | ||
| protected $hotspot; | ||
|
|
||
|
|
||
| /** | ||
| * The Scene ID | ||
| * | ||
| * @var string | ||
| */ | ||
| protected $sceneid; | ||
|
|
||
| /** | ||
| * The JQuery() selector | ||
| * | ||
| * @var string | ||
| */ | ||
| protected $selector; | ||
|
|
||
| /** | ||
| * Constructs an AlertCommand object. | ||
| * | ||
| * @param string $text | ||
| * The text to be displayed in the alert box. | ||
| */ | ||
| public function __construct($selector, $hotspot, $sceneid) { | ||
| $this->selector = $selector; | ||
| $this->hotspot = $hotspot; | ||
| $this->sceneid = $sceneid; | ||
|
|
||
| } | ||
|
|
||
| /** | ||
| * Implements Drupal\Core\Ajax\CommandInterface:render(). | ||
| */ | ||
| public function render() { | ||
|
|
||
| return [ | ||
| 'command' => 'webform_strawberryfield_pannellum_editor_addHotSpot', | ||
| 'selector' => $this->selector, | ||
| 'hotspot' => $this->hotspot, | ||
| 'sceneid' => $this->sceneid, | ||
| ]; | ||
| } | ||
|
|
||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.