Creating jQuery Plugin - Settings Fail - javascript

I am creating my first jQuery plugin that I would like to use for my projects.
However, the knowledge I have is not enough probably. Still, I wanna continue creating it...
So I have this part in my little plugin:
jQuery Plugin - Default Settings:
;(function($) {
var defaults = {
title : 'miniBox - Title Spot!',
description : 'miniBox Description Spot. Write a short article or leave it blank!',
buttons: {
switcher : true,
nameButton_1 : 'Continue',
nameButton_2 : 'Discard',
}
};
Now below we have this part:
$.fn.miniBox = function(customs) {
var config = $.extend({}, defaults, customs);
var $first = this.first();
$first.init = function() {
$('body').append( // -->
'<div class="miniBox-wrap">'
+ '<div class="miniBox-frame">'
+ '<div class="miniBox-title"></div>'
+ '<div class="miniBox-content">'
+ '<div class="miniBox-description"></div>'
+ '<div class="miniBox-buttons"></div>'
+ '<div class="miniBox-counter"></div>'
+ '</div>'
+ '</div>'
+ '<div class="miniBox-overlay"></div>'
+ '</div>' // <--
);
var mB_buttonOne = config.buttons.nameButton_1,
mB_buttonTwo = config.buttons.nameButton_2,
mB_title = config.title,
mB_description = config.description;
// --> Confirmation Buttons - Settings OPEN //
if(config.buttons.switcher === true) {
$('.miniBox-buttons').append( // -->
'<input type="button" id="agree" value=' + mB_buttonOne + '>'
+ '<input type="button" id="disagree" value=' + mB_buttonTwo + '>'
// <--
);
} else {
$('.miniBox-buttons').remove();
}
// <-- Confirmation Buttons - Settings CLOSE //
};
$first.init();
};
})(jQuery);
It is confusing a little bit to me, for the first time I guess...
QUESTION:
The title leads to settings fail so here's another question.
My settings appears to be working if I set default title and description and then create custom title or/and description ... It works, it will override defaults.
However as you can read that short if statement for buttons... It still works and overrides default settings if my buttons switcher is set to false or true in defaults or customs... However if defaults and customs both say: true or false... buttons value becomes "undefined".
I have no clues how to say always read custom settings only, if they are defined and forget about defaults... Or something like that. I hope you guys understand me and hopefully I'll find an answer.
Regards, Nenad.
EDIT:
Appears like I need to define completely a button config into customs in order not to get "undefined"... How can I fix this?
Example of Defaults:
var defaults = {
buttons: {
switcher : false,
nameButton_1 : 'Continue',
nameButton_2 : 'Discard',
}
};
Example of Customs:
$(function() {
$().miniBox({
title: 'Works flawlessly!',
buttons: {
switcher: true
}
});
});
How can I still use defaults buttons settings for button names if they are not defined into custom settings ?

.first is just a jQuery method. It selects the first element from the collection.
The init method is a defined function, which is then called immediately (a bit pointless in this case) although you could call it later on outside of the plugin code (also pointless).
As for the second part of your question, you were not recursively .extending the objects, so the nested object values weren't getting extended. Use true as the first argument to .extend to make it deep: http://jsfiddle.net/ntdLu/1/

Related

Angular Bootstrap Tooltip Dynamic Content

I am making a cart application in Angular using Angular Bootstrap.
When hovering over the cart icon a tooltip should appear. The tooltip's content should change based on if the item is already in the cart or not.
So, here is the html:
<h3><i class="fa fa-shopping-basket" ng-click="add2Cart(item.Name)" tooltip-placement="right" uib-tooltip-html="itemtooltiptext(item.Name)" aria-hidden="true"></i></h3>
Basically, in order to check if the item is already in the cart, I want the tooltip text to resolve from a function. My understanding from the documentation is this is supported as long as the HTML is trusted.
It says,
uib-tooltip-html $ - Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the uib-tooltip-template attribute option instead. The user is responsible for ensuring the content is safe to put into the DOM!
So my itemtooltiptext() function is...
$scope.itemtooltiptext = function(name) {
if (localStorage.getItem("cart") === null) {
return $sce.trustAsHtml("Add " + name + " to Cart!");
} else {
var cart = JSON.parse(localStorage.getItem("cart"));
for (var i = 0; i < cart.length; i++) {
if (cart[i] == name) {
console.log("already in cart");
return $sce.trustAsHtml(name + "already in Cart!");
}
}
return $sce.trustAsHtml("Add " + name + " to Cart!");
}
}
This results in an
Infinite $digest Loop Error
As detailed here: https://stackoverflow.com/a/19370032
But the problem is I need it to come from a function with the various conditions? So should I be using a template? I don't understand how that would work any better because I still need dynamic text served from the template... so what is the solution?
Thank you.
This is not how you use uib-tooltip-html, apparently it causes an infinite digest loop, fortunately the demo plunk shows you how to do it.
You need to get/calculate your html, bind to some scope variable and bind it into uib-tooltip-html
js
$scope.itemtooltiptext = function() {
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
};
$scope.itemtooltiptext();
html
<button uib-tooltip-html="htmlTooltip" class="btn btn-default">Tooltip</button>
If you still want to bind a function to your tooltip, you can do like so
<button uib-tooltip="{{itemtooltiptext()}}" class="btn btn-default">Tooltip</button>
Note that this approache will have the function invoked every digest cycle.
I ran into this infinite digest cycle issue where I needed a dynamic tooltip... it caused angular to recalculate it every time as a new value (even though it was the same). I created a function to cache the computed value like so:
$ctrl.myObj = {
Title: 'my title',
A: 'first part of dynamic toolip',
B: 'second part of dynamic tooltip',
C: 'some other value',
getTooltip: function () {
// cache the tooltip
var obj = this;
var tooltip = '<strong>A: </strong>' + obj.A + '<br><strong>B: </strong>' + obj.B;
var $tooltip = {
raw: tooltip,
trusted: $sce.trustAsHtml(tooltip)
};
if (!obj.$tooltip) obj.$tooltip = $tooltip;
else if (obj.$tooltip.raw !== tooltip) obj.$tooltip = $tooltip;
return obj.$tooltip;
}
};
Then in the html, I accessed it like this:
<input type="text" ng-model="$ctrl.myObj.C"
uib-tooltip-html="$ctrl.myObj.getTooltip().trusted">

Froala editor custom dropdown with dynamic values

I am using Froala and I am stuck creating a custom drop down with dynamic option sets in it. I have used their common way to create the drop down but that is useless if we have to fetch the values from db.
I want to make a "Templates" dropdown with 10 options to select which will be created dynamically.
Currently we create a custom drop down this way,
options: {
'Template One': function(e){
_this.editable('insertHTML', "<p>This is template one</p>", true);
},
}
I want this to be dynamic, meaning I will fetch the names and content of the templates from database and add them in the option set accordingly.
something like,
options : {
$.each(alltemplates, function(i, h){
i: function(e){ /// "i" will be the name of the template fetched from db
_this.editable('insertHTML', h, true); // h is the html fetched from db
},
})
}
which will create the drop down dynamically. Any help please ?
Expanding on #c23gooey's answer, here's what we came up with for a similar problem (inserting dynamically-generated mail-merge placeholders).
var commandName = 'placeholders',
iconName = commandName + 'Icon',
buildListItem = function (name, value) {
// Depending on prior validation, escaping may be needed here.
return '<li><a class="fr-command" data-cmd="' + commandName +
'" data-param1="' + value + '" title="' + name + '">' +
name + '</a></li>';
};
// Define a global icon (any Font Awesome icon).
$.FroalaEditor.DefineIcon(iconName, { NAME: 'puzzle-piece' });
// Define a global dropdown button for the Froala WYSIWYG HTML editor.
$.FroalaEditor.RegisterCommand(commandName, {
title: 'Placeholders',
type: 'dropdown',
icon: iconName,
options: {},
undo: true,
focus: true,
refreshAfterCallback: true,
callback: function (cmd, val, params) {
var editorInstance = this;
editorInstance.html.insert(val);
},
refreshOnShow: function ($btn, $dropdown) {
var editorInstance = this,
list = $dropdown.find('ul.fr-dropdown-list'),
listItems = '',
placeholders = editorInstance.opts.getPlaceholders();
// access custom function added to froalaOptions on instance
// use a different iteration method if not using Angular
angular.forEach(placeholders, function (placeholder) {
listItems += buildListItem(placeholder.name, placeholder.value);
});
list.empty().append(listItems);
if (!editorInstance.selection.inEditor()) {
// Move cursor position to end.
editorInstance.selection.setAtEnd(editorInstance.$el.get(0));
editorInstance.selection.restore();
}
}
});
We ran this method by Froala support and were told:
The editor doesn't have any builtin mechanism for using dynamic
content when showing the dropdown, but your solution is definitely a
good one.
Use the refreshOnShow function to change the options dynamically.

RactiveJS events on tripple mustache

I have a paging function since it's a little bit tricky to do it in the templates. The problem is that if I place it like this:
{{ paging( rows, limit, offset ) }}
It will obviously escape the output , so I tried with triple-stache and the output is as expected. But then, it wont detect on-click events anymore.. any suggestions ?
A workaround I thought about is setting jQuery to detect the click event on the .pagination > li but I just wanted to ask if there's any way RactiveJS can do that for me or I'm just missing something.
Have a great day !
Use a partial if you want to add dynamic templating:
data: {
foo: 'foo',
paging: function(x){
var template = '<li on-click="clicked()">' + x + '</li>';
if (!this.partials.paging) {
this.partials.paging = template;
}
else {
this.resetPartial('paging', template);
}
return 'paging';
}
},
See http://jsfiddle.net/fz7adjm4/

Backbone View Attribute set for next Instantiation?

I have a view that has a tooltip attribute. I want to set that attribute dynamically on initialize or render. However, when I set it, it appears on the next instantiation of that view instead of the current one:
var WorkoutSectionSlide = Parse.View.extend( {
tag : 'div',
className : 'sectionPreview',
attributes : {},
template : _.template(workoutSectionPreviewElement),
initialize : function() {
// this.setDetailsTooltip(); // doesn't work if run here either
},
setDetailsTooltip : function() {
// build details
...
// set tooltip
this.attributes['tooltip'] = details.join(', ');
},
render: function() {
this.setDetailsTooltip(); // applies to next WorkoutViewSlide
// build firstExercises images
var firstExercisesHTML = '';
for(key in this.model.workoutExerciseList.models) {
// stop after 3
if(key == 3)
break;
else
firstExercisesHTML += '<img src="' +
(this.model.workoutExerciseList.models[key].get("finalThumbnail") ?
this.model.workoutExerciseList.models[key].get("finalThumbnail").url : Exercise.SRC_NOIMAGE) + '" />';
}
// render the section slide
$(this.el).html(this.template({
workoutSection : this.model,
firstExercisesHTML : firstExercisesHTML,
WorkoutSection : WorkoutSection,
Exercise : Exercise
}));
return this;
}
});
Here is how I initialize the view:
// section preview
$('#sectionPreviews').append(
(new WorkoutSectionPreview({
model: that.workoutSections[that._renderWorkoutSectionIndex]
})).render().el
);
How can I dynamically set my attribute (tooltip) on the current view, and why is it affecting the next view?
Thanks
You can define attribute property as a function that returns object as result. So you're able to set your attributes dynamically.
var MyView = Backbone.View.extend({
model: MyModel,
tagName: 'article',
className: 'someClass',
attributes: function(){
return {
id: 'model-'+this.model.id,
someAttr: Math.random()
}
}
})
I hope it hepls.
I think your problem is right here:
var WorkoutSectionSlide = Parse.View.extend( {
tag : 'div',
className : 'sectionPreview',
attributes : {} // <----------------- This doesn't do what you think it does
Everything that you put in the .extend({...}) ends up in WorkoutSectionSlide.prototype, they aren't copied to the instances, they're shared by all instances through the prototype. The result in your case is that you have one attributes object that is shared by all WorkoutSectionSlides.
Furthermore, the view's attributes are only used while the the object is being constructed:
var View = Backbone.View = function(options) {
this.cid = _.uniqueId('view');
this._configure(options || {});
this._ensureElement();
this.initialize.apply(this, arguments);
this.delegateEvents();
};
The _ensureElement call is the thing that uses attributes and you'll notice that it comes before initialize is called. That order combined with the prototype behavior is why your attribute shows up on the next instance of the view. The attributes is really meant for static properties, your this.$el.attr('tooltip', ...) solution is a good way to handle a dynamic attribute.

How to overwrite language labels in TinyMCE

I'd like to change language labels used in TinyMCE. E.g. "Überschrift 2" -> "Überschrift".
Im using the jQuery plugins version of TinyMCE.
Is there a way to overwrite those labels without editing the label files?
Just found this question and I did it in the following way (using tinyMCE 4.1.x):
tinymce.init({
language : 'en_GB',
init_instance_callback : function(editor) {
tinymce.i18n.data.en_GB['New window'] = 'Open in new tab or window';
tinymce.i18n.data.en_GB.Target = 'Options';
}
});
What this does is override the defaults with your text after the editor has been initialised. No need to edit any lang files
yeah look for the 'langs' folder edit de.js.
It is possible.
I've tested it at least for my own localization strings, using helpers geti18nstring() and set18nstring() handling tinymce.i18n property.
BTW, Here is the 'full' documentation http://www.tinymce.com/wiki.php/API3:property.tinymce.i18n of property. :)
The rest of snippet is done using well-known agile pattern 'trust-the-source-Luke'.
// folder: plugins/mycustomtinymceplugin
//
// file: ./langs/en_dlg.js
tinyMCE.addI18n('en.mycustomtinymceplugin_dlg',{charts:"Some charts"});
// file: mycustomtinymceplugin.html <-- opened by ./editor_plugin.js#init ed.windowManager.open({file : url + '/mycustomtinymceplugin.html'
<script>
function geti18nstring( id )
{
return tinymce.i18n[ tinymce.activeEditor.settings.language + '.mycustomtinymceplugin_dlg.' + id ];
}
function seti18nstring( id, i18nstring )
{
//just for curiosity if you wan't to modify something in a plugin which is killed after modification
if( geti18nString( id ) == i18nstring )
{
alert( 'id['+id+'] was replaced already with [' + i18nstring +'].' );
}
else
{
tinymce.i18n[ tinymce.activeEditor.settings.language + '.mycustomtinymceplugin_dlg.' + id ] = i18nstring;
}
}
function dostuffonpluginstart()
{
//to get localized strings
var charts_text = geti18nstring('charts');
$('#chartlist').append( charts_text );
...
//to manipulate localized strings
seti18nstring( 'charts', 'karamba' );
charts_text = geti18nstring('charts');
$('#chartlist').append( charts_text )
}
</script>
...
<div id"chartlist"></div>

Categories