Mouse hover with ember

1

Hello,

I am new to Ember. I want when i hover the mouse over a .png file to be transparent and to exist there on the right corner an ‘X’ button and when you press it, it will be removed from the store. Any ideas or any example?

2

CSS is your friend (icon done with Fontawesome):

The container div style: “position: relative”

<div class="thumbnail">
    <i class="fa fa-remove" {{action "removeImage" image}}></i>
    <img ... />   
</div>

Further in your CSS:

div.thumbnail i.fa-remove {
   color: #fff; background-color: #808080; background-color: rgba(0, 0, 0, 0.5);
   position: absolute; top: 8px; right: 8px; 
   padding: 2px; z-index: 1; cursor: pointer; 
}
3

I need something like this withe ember only.

4

What do mean by “Ember only”?

The first code snippet is a handlebars template. You see the action helper which tells your controller (or router) to call the function removeImage within your actions.

actions: {
    removeImage: function(image) {
        image.destroyRecord();
        ...
    }
}
5

And how implemet the hover effect? With a view in ember?

6

I am new to Ember. I want when i hover the mouse over a .png file to be transparent and to exist there on the right corner an ‘X’ button and when you press it, it will be removed from the store. Any ideas or any example? I have these files:

showactivecamp.hbs

<style type="text/css">


    .image {
        width: 190px;
        height: 190px;
        opacity: 1;

    }

    .image:hover {
        opacity: 0.3;
    }

    i.fa-remove {
    @extend . image : hover;
        color: #fff;
        background-color: #808080;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 2px;
        z-index: 1;
        cursor: pointer;
    }


</style>

<div class="thmb-prev">

                    <button type="button" class="fa fa-remove" {{action "removeCampaign" on="click"}}>


                    </button>
                    <img src="/assets/images/photos/media2.png" class="image" alt="">

                </div>

controllers\showactivecamp.js

import Ember from 'ember';

export default Ember.ObjectController.extend({
    needs: ['campaign'],

    actions: {
        removeCampaign: function (campaign) {
            
            var camp = this.get('model');
            camp.deleteRecord();
            camp.save();
            
        }
    },

    getactivecamp: function () {
        return this.store.findAll('campaign');
    }.property()

});

views\showactivecamp.js import Ember from ‘ember’;

export default Ember.View.extend({

    click: function (evt) {
        this.get('controller').send('click', this.get('campaign'));
    }

 });