1
\$\begingroup\$

Right now I'm studying OOP with javascript/jQuery and so far upon reading tutorials over the internet and with the helping hand of google, I come up with a way to do it based on my own understanding.

So far, I tried to create a plugin where I could make a custom twitter bootstrap panel with some options like close and minimize.

Technically, I'm not pro (just in case you ask me why I'm doing it this way) but this is how I do it:

var PREFIX = 'exc';
var PREFIX_CL = '.' + PREFIX + '-';
var PREFIX_ID = '#' + PREFIX + '_';

var _exc_var_selector = {
	panel: PREFIX_CL + 'panel'
};
var _exc_var_dom = {
	panel: $(_exc_var_selector.panel)
};

var _exc_class_widget = {
	init: function () {
		// Modified Bootstrap
		this.panel.init();
	},

	panel: {
		is_min: 'data-exc-isminimized',

		init: function () {
			var fn = _exc_class_widget.panel;

			_exc_var_dom.panel.on('click', function (e) {
				e.preventDefault();
				var id = $(this).attr('id');

				if (id) {
					var opt = $(e.target).attr('data-opt');
					switch (opt) {
						case 'refresh': break;
						case 'minimize': fn.minimize(id); break;
						case 'close': fn.close(id); break;
						default: break;
					};
				} else { console.log('ID attribute is required.') }
			});
		},

		dom: function (id, subselector) {
			if (id) {
				var dom = {};

				if (typeof subselector ===  'string') {
					return $(_exc_var_selector.panel + '#' + id + ' ' + subselector);
				} else if (typeof subselector === 'object') {
					$.each(subselector, function (i, v) {
						subselector[i] = _exc_var_selector.panel + '#' + id + ' ' + v;
					});
					return $(subselector.join(', '));
				} else {
					return $(_exc_var_selector.panel + '#' + id);
				}
			} return false;
		},

		minimize: function (id, is_close) {
			var icon = this.dom(id, 'span[data-opt=minimize]');
			var toggle = ['.panel-body', '.panel-footer'];
			var toggle_dom = this.dom(id, toggle);
			var panel_dom = this.dom(id);
			var flag = this.is_min;
			
			if (panel_dom.attr(flag)) {
				panel_dom.removeAttr(flag);
				if (is_close) { return toggle_dom; }
				icon.removeClass().addClass('glyphicon glyphicon-menu-up');
			} else {
				panel_dom.attr(flag, true);
				icon.removeClass().addClass('glyphicon glyphicon-menu-down');
			}

			return toggle_dom.slideToggle();
		},

		close: function (id) {
			var panel_dom = this.dom(id);
			this.minimize(id, true).promise().then(function () {
				panel_dom.fadeOut();
			});
		}
	},

	dropdown: function () {
		var options = {
			duration: 200
		};

		// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
		$('.dropdown').on('show.bs.dropdown', function(e){
			$(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(options);
		});

		// ADD SLIDEUP ANIMATION TO DROPDOWN //
		$('.dropdown').on('hide.bs.dropdown', function(e){
			$(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(options);
		});
	}
};

_exc_class_widget.init();
/* Panel */
.exc-panel .exc-panel-options span {
	display: inline-block;
	cursor: pointer;
	color: #777;
}
.exc-panel .exc-panel-options > span,
.exc-panel .exc-panel-options .dropdown-toggle > span {
	margin-left: 12px;
}
.exc-panel .exc-panel-options span:hover {
	color: #000;
}
.exc-panel-options .dropdown-menu {
	margin-top: 9px;
	margin-right: 6px;
}
.exc-panel .panel-footer {
	padding: 3px 9px;
	font-size: 12px;
}
.exc-panel .panel-footer a {
	width: 100%;
	height: 100%;
	display: block;
	font-size: 10px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="panel1" class="panel panel-default exc-panel">
    <div class="panel-heading">
        <div class="pull-right exc-panel-options">
            <span class="glyphicon glyphicon-refresh" data-opt="refresh"></span>
            <span class="glyphicon glyphicon-menu-up" data-opt="minimize"></span>
            <span class="glyphicon glyphicon-remove" data-opt="close"></span>
        </div>
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        <p>Curabitur arcu erat, accumsan id imperdiet et, 
	porttitor at sem. Donec rutrum congue leo eget malesuada. 
	Donec rutrum congue leo eget malesuada. Cras ultricies 
	ligula sed magna dictum porta. Curabitur non nulla sit 
	amet nisl tempus convallis quis ac lectus. Donec sollicitudin 
	molestie malesuada. Curabitur non nulla sit amet nisl tempus 
	convallis quis ac lectus. Donec rutrum congue leo eget 
	malesuada. Vivamus magna justo, lacinia eget consectetur sed, 
	convallis at tellus. Praesent sapien massa, convallis a 
	pellentesque nec, egestas non nisi.</p>
    </div>
    <div class="panel-footer">Panel footer</div>
</div>

My question is, am I doing it right? Is this kind of code flow good? I haven't test the speed of this or run any js test to this since I don't know how (am still about to learn it).

Feel free to give suggestions. Code workflow guide or conventions will help. TIA

\$\endgroup\$
  • 2
    \$\begingroup\$ $(_exc_var_selector.panel + '#' + id + ' ' + subselector); this is horrible, you are querying your presentation layer for your elements and data. Instead, just keep a reference to the objects you create that makes a lot more sense. \$\endgroup\$ – Benjamin Gruenbaum Apr 17 '15 at 7:10
  • \$\begingroup\$ hi, how am i going to do that? that part was meant to be a dynamic one. thanks for pointing out that. not yet fully familiar with jquery :) do you have any recommendations or if you want to let me see on your own perspective how are you going to do that? \$\endgroup\$ – Vainglory07 Apr 17 '15 at 7:14
  • \$\begingroup\$ Pass elements and not strings around. You're effectively passing strings around and then building queries with them against your presentation layer. Instead - pass the elements around. \$\endgroup\$ – Benjamin Gruenbaum Apr 17 '15 at 7:15
  • 6
    \$\begingroup\$ @BenjaminGruenbaum Comments are for seeking clarification. If you have a suggestion or critique, please write an answer instead. \$\endgroup\$ – 200_success Apr 17 '15 at 8:33
  • \$\begingroup\$ downvote? :( why? i'm looking for guidance. waited for days. give bounty even if my reputation is low. then downvote? what's the matter :(( \$\endgroup\$ – Vainglory07 Apr 28 '15 at 0:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.