Drag-and-Drop Succulent Garden : Solution

drag-and-drop-succulent-garden-solution.markdown

Drag-and-Drop Succulent Garden : Solution

One solution to the Drag and Drop Succulent Garden - Project Outline posted for the Creative Coding Club.

A Pen by Nat Cooper on CodePen.

License.

index.html

<!-- WOW THIS IS SUPER BROKEN NOW - Nat, 2019 -->

<main>  
  <div class="tut-wrap">
    <a class="tutorial" href="https://codepen.io/natacoops/post/drag-and-drop-succulent-garden-project-outline" target="_blank">Project Outline</a>
  <a class="tutorial" href="https://codepen.io/natacoops/post/a-drag-and-drop-succulent-garden-project-solution" target="_blank">Project Solution</a>
  </div>
  <section class="plant-drawer">
    <div class="small">
      <img class="succulent original" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/succulent-agave.svg" alt="agave succulent">
    </div>
    <div class="small">
      <img class="succulent original smaller" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/succulent-barrel-cactus.svg" alt="barrel cactus">
    </div>
    <div>
      <img class="succulent original" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/succulent-purple-agave.svg" alt="purple agave succulent">
    </div>
    <div>
      <img class="succulent original smaller" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/succulent-cacti.svg" alt="three cacti grouped together">
    </div>
    <div class="tall">
      <img class="succulent original" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/succulent-purslane.svg" alt="purslane succulent">
    </div>
    <div class="tall">
      <img class="succulent original" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/succulent-snakeplant.svg" alt="snake plant succulent with two flowers">
    </div>
    <div>
      <img class="succulent original smaller" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/succulent-gnome.svg" alt="a little gnome">
    </div>
    <div>
      <img class="succulent original smaller" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/succulent-gemstone.svg" alt="decorative purple crystal">
    </div>
    <p>drag the plants into your terrarium</p>
  </section>  
  <section class="terrarium-container">
    <div class="terr-wrap start">
      <img class="soil" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/terrarium-bottle-soil.svg" alt="Bottle-shaped terrarium soil" />
      <img class="frame" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/terrarium-bottle-frame.svg" alt="Bottle-shaped terrarium outline" />
    </div>
    <div class="terr-wrap start">
      <img class="soil" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/terrarium-house-soil.svg" alt="House-shaped terrarium soil" />
      <img class="frame" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/terrarium-house-frame.svg" alt="House-shaped terrarium outline" />
    </div>
    <div class="terr-wrap start">
      <img class="soil" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/terrarium-dome-soil.svg" alt="Dome-shaped terrarium soil" />
      <img class="frame" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/terrarium-dome-frame.svg" alt="Dome-shaped terrarium outline" />
    </div>
    <div class="terr-wrap start">
      <img class="soil" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/terrarium-bowl-soil.svg" alt="Bowl-shaped terrarium soil" />
      <img class="frame" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/terrarium-bowl-frame.svg" alt="Bowl-shaped terrarium outline" />
    </div>
    <div class="terr-wrap start">
      <img class="soil" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/terrarium-geo-soil.svg" alt="Geometric terrarium soil" />
      <img class="frame" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/terrarium-geo-frame.svg" alt="Geometric terrarium outline" />
    </div>
    
    <p>choose your terrarium</p>
    
    <div class="context-menu">
      <a id="forwards"><i class="fa fa-arrow-up"></i></a>
      <a id="backwards"><i class="fa fa-arrow-down"></i></a>
      <a id="grow"><i class="fa fa-plus"></i></a>
      <a id="shrink"><i class="fa fa-minus"></i></a>
      <a id="trash"><i class="fa fa-trash"></i></a>
      <div class="thumb"></div>
    </div>
    
    <div class="button-wrap">
      <a class="button clear">clear</a>
      <a class="button new">new terrarium</a>
    </div>
  </section>
</main>

script.js

$('.terr-wrap.start').on('click', function(){
  $(this).removeClass('start').addClass('selected');
  $('.terr-wrap.start').fadeOut();
  $('.terrarium-container p').fadeOut();
  $('.terrarium-container').addClass('shrink');
  $('.plant-drawer').addClass('open');
  
  $(this).droppable({
    drop: function(e, ui) {
      if ($(ui.helper).clone().hasClass('original')) {
        $(this).append($(ui.helper).clone());
        $(this).find('.succulent').removeClass('original');
        $(this).find('.succulent').draggable();
      }
    }
  });
});

$('.original').draggable({
  appendTo: ".terr-wrap.selected",
  helper: 'clone'
});


// context menu
$('.terr-wrap').on('click', '.succulent', function(){
  $('.terr-wrap .succulent').removeClass('edit');
  $(this).addClass('edit');
  var bg = $(this).attr('src');
  $('.thumb').css({
    "background": "url(" + bg + ") no-repeat",
    "background-size": "contain",
    "background-position": "50% 50%",
  });
});

 
// calculate correct scale value
function getScale() {
  // get the transform matrix of the clicked succulent
  var div = $('.edit').css('transform');

  // turn the matrix string into an array of values
  var values = div.split('(')[1];
  values = values.split(')')[0];
  values = values.split(',');
  
  // return the transform scale values we need from the matrix array
  var a = values[0];
  var b = values[1];

  // this is how to get the correct scale value out of the css matrix
  return Math.sqrt(a*a + b*b);
}

// context menu icons
$('.fa-plus').on('click',function(){
  $('.edit').css('transform', 'scale(' + ( getScale() + 0.05 ) + ')') ;
});

$('.fa-minus').on('click',function(){
  $('.edit').css('transform', 'scale(' + ( getScale() - 0.05 ) + ')') ;
});

$('.fa-arrow-up').on('click',function(){
  var level = $('.edit').css('z-index');
  $('.edit').css('z-index', level + 1);
});

$('.fa-arrow-down').on('click',function(){
  var level = $('.edit').css('z-index');
  $('.edit').css('z-index', level - 1);
});

$('.fa-trash').on('click',function(){
  $('.edit').remove();
});

// Buttons
$('.clear').on('click',function(){
  $('.terr-wrap.selected .succulent').remove();
});

$('.new').on('click', function(){
  $('.terr-wrap.selected .succulent').remove();
  $('.terr-wrap.selected').removeClass('selected').addClass('start');
  $('.terr-wrap.start').fadeIn();
  $('.terrarium-container p').fadeIn();
  $('.terrarium-container').removeClass('shrink');
  $('.plant-drawer').removeClass('open');
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://codepen.io/steveg3003/pen/MmqOpb/"></script>

style.css

.tut-wrap {
  position: absolute;
  z-index: 999;
}
.tutorial {
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 10px;
  margin: 10px 0 0 10px;
  text-decoration: none;
  font-size: 16px;
  border: 1px solid #fff;
  display: inline-block;
}
.tutorial:hover {
  background: rgba(0,0,0,0.96);
}

body {
  background: #333;
  font-size: 24px;
  letter-spacing: 0.5px;
  font-family: 'EB Garamond', serif;
  line-height: 1.4;
  padding: 10px;
}

main {
  display: flex;
  width: 920px;
  margin: 0 auto;
}

.plant-drawer {
  padding: 20px 0;
  width: 0%;
  background: #DCEDC8;
  margin-right: 0px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  left: -100%;
  transition: 2s all;
}

.plant-drawer.open {
  left: 0;
  width: 40%;
  margin-right: 10px;
}

.plant-drawer div {
  width: 50%;
  text-align: center;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/160607/circle.svg) no-repeat;
  background-position: bottom;
  min-height: 120px;
  position: relative;
}

.plant-drawer div.tall {
  height: 230px;
}

.plant-drawer div.small .succulent {
  width: 50%;
}

.plant-drawer p {
  position: absolute;
  left: 105%;
  width: 200px;
  z-index: 10;
}

.succulent {
  position: absolute; 
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  max-height: 80%;
  max-width: 90%;
  opacity: 0.7;
  z-index: 20;
}

.succulent:hover {
  cursor: grab;
  opacity: 1;
}

.terrarium-container {
  width: 100%;
  background: #fff;
  position: relative;
  min-height: 100vh;
}

.terrarium-container p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.terrarium-container.shrink {
  width: 60%;
}

.terr-wrap {
  position: absolute;
  width: 30%;
  transition: 1s all;
}

.terr-wrap .soil,
.terr-wrap .frame {
  width: 100%;
  opacity: 0.8;
}

.terr-wrap .succulent {
  opacity: 1;
  z-index: 20;
  transform: scale(0.8);
}

.terr-wrap .succulent.smaller {
  transform: scale(0.6);
}

.frame {
  position: absolute;
  top: 0;
  z-index: 300;
  pointer-events: none;
}

.terr-wrap:hover {
  width: 33%;
  cursor: pointer;
}

.terr-wrap:hover img {
  opacity: 1;
}

.terr-wrap:first-child {
  left: 50%;
  transform: translateX(-50%);
}

.terr-wrap:nth-child(2),
.terr-wrap:nth-child(3) {
  top: 25%;
}

.terr-wrap:nth-child(3) {
  right: 0%;
}

.terr-wrap:nth-child(4),
.terr-wrap:nth-child(5) {
  bottom: 0%;
  left: 15%;
}

.terr-wrap:nth-child(5) {
  left: initial;
  right: 15%;
}

.context-menu {
  position: absolute;
  top: 10px; 
  right: 10px;
  display: none;
}
.thumb {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 0;
  opacity:0.4;
}
.fa {
  font-size: 28px;
  margin: 0 5px;
  color: #ccc;
  position: relative;
}
.fa:after {
  font-size: 12px;
  position: absolute;
  bottom: -26px;
  left: 0px;
  opacity: 0;
}
.fa:hover {
  color: rgba(0,0,0,1);
  cursor: pointer;
}
.fa:hover:after {
  opacity: 1;
}
.fa-arrow-up:after {
  content: 'bring forward';
}
.fa-arrow-down:after {
  content: 'send back';
}
.fa-minus:after {
  content: 'shrink';
}
.fa-plus:after {
  content: 'grow';
}   
.fa-trash:after {
  content: 'delete';
}


.button-wrap {
  position:absolute;
  bottom: 20px;
  left: 10px;
  display:none;
}
.button {
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid #333;
  left: 10px;
  font-size: 13px;
  color: #333;
}
.button:hover {
  cursor: pointer;
  background: #333;
  color: #FFF;
}

.shrink .terr-wrap {
  width: 100%;
  bottom: initial;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.shrink .terr-wrap .soil,
.shrink .terr-wrap .frame {
  opacity: 1;
}

.shrink .button-wrap,
.shrink .context-menu {
  display: block;
}