Emberjs Bootstrap Modal Carousel

Developer
Jon Beebe
Size
4,233 Kb
Views
2,024
  1. Emberjs Bootstrap Modal Carousel Previews
  2. Emberjs Bootstrap Modal Carousel HTML Codes
  3. Emberjs Bootstrap Modal Carousel CSS Codes
  4. Emberjs Bootstrap Modal Carousel JS Codes

How do I make an emberjs bootstrap modal carousel?

Render a carousel into a bootstrap modal. What is a emberjs bootstrap modal carousel? How do you make a emberjs bootstrap modal carousel? This script and codes were developed by Jon Beebe on 23 January 2023, Monday.

Emberjs Bootstrap Modal Carousel Previews
IQ Test

Emberjs Bootstrap Modal Carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Emberjs Bootstrap Modal Carousel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .modal .carousel-control { color: #777;
}
.modal .carousel-control.right { background: transparent;
}
.modal .carousel-control.left { background: transparent;
}
.modal .carousel-indicators { bottom: -42px;
}
.modal .carousel-indicators li { border-color: #999;
}
.modal .carousel-indicators li.active { background: #ddd;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script type="text/x-handlebars" data-template-name="application"> {{outlet 'modal'}} {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index"> <div class="container"> <div class="page-header"> <h1>Emberjs <small>Boilerplate</small></h1> </div> <p class="lead">Your stuff here&hellip;</p> <button class="btn btn-primary" {{action 'openModal'}}>Open Modal</button> </div>
</script>
<script type="text/x-handlebars" data-template-name="modal_layout"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> {{#if showCloseButton}} <button type="button" class="close" {{action cancel view}} aria-hidden="true">&times;</button> {{/if}} <h4 class="modal-title"> {{#if titleIcon}} <i class="glyphicon glyphicon-{{unbound titleIcon}}"></i> {{/if}} {{title}} </h4> </div> <div class="modal-body"> {{yield}} </div> {{#if showFooter}} <div class="modal-footer modal-button-bar"> {{#if showCancelButton}}<button type="button" class="btn btn-default" {{action cancel view}}>{{cancelButtonText}}</button>{{/if}} {{#if showConfirmButton}}<button type="button" class="btn btn-primary" {{action confirm view}}>{{confirmButtonText}}</button>{{/if}} </div> {{/if}} </div><!-- /.modal-content --> </div><!-- /.modal-dialog -->
</script>
<script type="text/x-handlebars" data-template-name="carouselModal"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" class="active"></li> <li data-target="#carousel-example-generic"></li> <li data-target="#carousel-example-generic"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <p>item 1</p> </div> <div class="item"> <p>item 2</p> </div> <div class="item"> <p>item 3</p> </div> </div> {{#if showControls}} <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> {{/if}} </div>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js'></script>
<script src='http://builds.emberjs.com/tags/v1.2.0-beta.1/ember.js'></script>
<script src='http://builds.emberjs.com/tags/v1.0.0-beta.3/ember-data.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Emberjs Bootstrap Modal Carousel - Script Codes CSS Codes

.modal .carousel-control { color: #777;
}
.modal .carousel-control.right { background: transparent;
}
.modal .carousel-control.left { background: transparent;
}
.modal .carousel-indicators { bottom: -42px;
}
.modal .carousel-indicators li { border-color: #999;
}
.modal .carousel-indicators li.active { background: #ddd;
}

Emberjs Bootstrap Modal Carousel - Script Codes JS Codes

Ember.Route.reopen({ renderModal: function(modalView, options) { options = options || {}; var controller = this.controllerFor(modalView); controller.setProperties(options); this.render(modalView, { into: 'application', outlet: 'modal', controller: controller }); }
});
var App = Ember.Application.create({});
App.Store = DS.Store.extend({ adapter: DS.FixtureAdapter
});
// Routes ==================================
App.IndexRoute = Ember.Route.extend({ actions: { openModal: function() { this.renderModal('carouselModal'); } }
});
// Models ==================================
// Views ===================================
App.ModalBaseView = Ember.View.extend({ classNames: ['modal', 'fade'], layoutName: 'modal_layout', attributeBindings: ['data-show'], 'data-show': 'true', didInsertElement: function() { var self = this; this.$().modal(); // Once the modal is hidden, destroy it. Otherwise the route cannot // reshow it. this.$().on('hidden.bs.modal', function() { self.$().off('hidden.bs.modal'); self.destroy(); }); }, willDestroyElement: function() { this.$().off('hidden.bs.modal'); this._super(); }, hide: function() { this.$().modal('hide'); },
});
App.CarouselModalView = App.ModalBaseView.extend({ getCarousel: function() { var carousel = this.get('_carousel'); var $carousel = this.$('.carousel'); if(!carousel && $carousel) { $carousel.carousel({ interval: false, wrap: false }); carousel = $carousel.data('bs.carousel'); this.set('_carousel', carousel); } return carousel; }, didInsertElement: function() { this.get('controller').send('didInsertElement'); this._super(); this.getCarousel(); }, willDestroyElement: function() { this.$('.carousel').remove(); this._super(); }, onControllerCarouselIndexChanged: function() { var carousel = this.getCarousel(); if(carousel) { carousel.to(this.get('controller.carouselIndex')); } }.observes('controller.carouselIndex')
});
// Controllers =============================
App.ModalBaseController = Ember.Controller.extend({ title: 'Modal Title - Replace Me', titleIcon: null, confirmButtonText: 'Save Changes', cancelButtonText: 'Cancel', showCancelButton: true, showConfirmButton: true, showCloseButton: true, showFooter: true, actions: { confirm: function(view) { // Empty placeholder for the confirm action. Necessary since the // template renders the confirm action into dom. }, cancel: function(view) { view.hide(); } }
});
App.CarouselModalController = App.ModalBaseController.extend({ title: function() { return [ 'Title 1!', 'What’s Title 2?', 'The last Title' ][this.get('carouselIndex')]; }.property('carouselIndex'), showControls: false, showCloseButton: false, showCancelButton: function() { var index = this.get('carouselIndex'); var count = this.get('itemCount'); return index > 0; }.property('itemCount', 'carouselIndex'), cancelButtonText: 'Previous', confirmButtonText: function() { var index = this.get('carouselIndex'); var count = this.get('itemCount'); return index < (count - 1) ? 'Next' : 'Continue'; }.property('itemCount', 'carouselIndex'), carouselIndex: 0, itemCount: 3, actions: { didInsertElement: function() { this.set('carouselIndex', 0); }, confirm: function(view) { var nextIndex = this.get('carouselIndex')+1; var count = this.get('itemCount'); if(nextIndex >= count) { view.hide(); } else { this.set('carouselIndex', nextIndex); } }, cancel: function(view) { var nextIndex = Math.max(this.get('carouselIndex')-1, 0); this.set('carouselIndex', nextIndex); } }
});
// Components ==============================
// Fixtures ================================
Emberjs Bootstrap Modal Carousel - Script Codes
Emberjs Bootstrap Modal Carousel - Script Codes
Home Page Home
Developer Jon Beebe
Username somethingkindawierd
Uploaded January 23, 2023
Rating 3
Size 4,233 Kb
Views 2,024
Do you need developer help for Emberjs Bootstrap Modal Carousel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jon Beebe (somethingkindawierd) Script Codes
Name
Radial Progress with SVG
Emberjs Nested Components
Backbone Resizeable View
Emberjs Component Playground
Turning off Marionette wrapper div
Leaflet.js - Mark Radius
IOS inspired Definition List
MarionetteJS Module Router 2
Calendar Widget
MarionetteJS Cubed Layout
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!